---
schema_version: "1"
id: 58785f6c578d05221b13b36af5dc2ee74fef99f7aef5763ee16167da6c71cda1
title: Upgrade to v2.3
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/commerce-cloud/pwa-kit-managed-runtime/guides/upgrade-to-v2-3.md
canonical_url: https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/upgrade-to-v2-3.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: f77f2a91c701b0b30f566a62e7438a62527bb5cdd2a9d7af8c10ab6da1f24698
products:
  - Composable Storefront
  - Salesforce APIs
---
# Upgrade to v2.3

**important:** If you are upgrading a PWA Kit project that was created before the availability of v2, follow the instructions in the [Upgrade to v2](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/upgrade-to-v2.md) guide first.

To take advantage of the opt-in features available in v2.3, specifically the `react-query` integration, you must make a few changes to `_app-config/index.js`, `_app/index.js` and `package.json` in your PWA Kit project.

## Changes to \_app-config/index.js

Open `_app-config/index.js` and make the following changes.

Import the higher-order components required to enable `react-query` and retain `getProps` support.

```javascript
- import {withLegacyGetProps} from 'pwa-kit-react-sdk/ssr/universal/components/with-legacy-get-props'
+ import {withReactQuery} from 'pwa-kit-react-sdk/ssr/universal/components/with-react-query'
```

Add the `options` object with the recommended React Query configuration.

```javascript
// Determine whether the code is running server-side or client-side based on the presence of the window object. Set isServerSide to true if running server-side or false if running client-side.
const isServerSide = typeof window === 'undefined'

// Recommended settings for PWA-Kit usages.
// NOTE: They will be applied server-side and client-side.
const options = {
  queryClientConfig: {
    defaultOptions: {
      queries: {
        retry: false,
        staleTime: 2 * 1000,

        // If isServerSide is true, disable retries on mount.
        ...(isServerSide ? {retryOnMount: false} : {})
      },
      mutations: {
        retry: false
      }
    }
  }
}
```

Update the exported `AppConfig` component definition.

```javascript
- export default AppConfig
+ export default withReactQuery(withLegacyGetProps(AppConfig), options)
```

## Changes to \_app/index.js

Open `_app/index.js` and make the following changes.

Declare a variable named `DEFAULT_LOCALE` to store the default locale for displaying messages in your application. For a newly generated project, the default messages are written in English for the United States locale. If you haven’t rewritten the default messages, then `en-US` is the right value for `DEFAULT_LOCALE`. Otherwise, set `DEFAULT_LOCALE` to a different value, such as `fr-fr` or `ja-jp`.

```javascript
+ const DEFAULT_LOCALE = 'en-US'
```

Assign `DEFAULT_LOCALE` as the default value for the `targetLocale` property.

```javascript
- const {children, targetLocale, messages, categories: allCategories = {}} = props
+ const {
+     children,
+     targetLocale = DEFAULT_LOCALE,
+     messages = {},
+     categories: allCategories = {}
+ } = props
```

Replace `defaultLocale` with the new static value.

```javascript
- defaultLocale="en-US"
+ defaultLocale={DEFAULT_LOCALE}
```

**note:** If enabled, `useQuery` and `getProps` functions are run in parallel. A side effect of running in parallel is that conditionally rendering a component based on the return value of `getProps` can cause some `useQuery` hooks not to run on the server. For simplicity sake, we recommend that you choose either `getProps` or `useQuery` for data fetching.

## Changes to package.json

Add `react-query` to your `devDependencies`.

```javascript
+ "@tanstack/react-query": "^4.0.10",
```

## Testing Your Changes

To test whether your changes have been made successfully, run the following commands:

1. `npm install` to install the required `react-query` dependency.
2. `npm start` to verify that the app is able to run locally.
3. `npm run build` for verifying that the build process is successful.
4. `npm run push` (and deploy via Runtime Admin) to verify that deploying a bundle is successful.

## Further Reading

To learn more about React Query and how to use it, see the [React Query documentation](https://tanstack.com/query/latest).