If you are upgrading a PWA Kit project that was created before the availability of v2, follow the instructions in the Upgrade to v2 guide first.
Important
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.
Open _app-config/index.js and make the following changes.
Import the higher-order components required to enable react-query and retain getProps support.
1- import {withLegacyGetProps} from 'pwa-kit-react-sdk/ssr/universal/components/with-legacy-get-props'
2+ import {withReactQuery} from 'pwa-kit-react-sdk/ssr/universal/components/with-react-query'Add the options object with the recommended React Query configuration.
1// 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.
2const isServerSide = typeof window === 'undefined'
3
4// Recommended settings for PWA-Kit usages.
5// NOTE: They will be applied server-side and client-side.
6const options = {
7 queryClientConfig: {
8 defaultOptions: {
9 queries: {
10 retry: false,
11 staleTime: 2 * 1000,
12
13 // If isServerSide is true, disable retries on mount.
14 ...(isServerSide ? {retryOnMount: false} : {})
15 },
16 mutations: {
17 retry: false
18 }
19 }
20 }
21}Update the exported AppConfig component definition.
1- export default AppConfig
2+ export default withReactQuery(withLegacyGetProps(AppConfig), options)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.
1+ const DEFAULT_LOCALE = 'en-US'Assign DEFAULT_LOCALE as the default value for the targetLocale property.
1- const {children, targetLocale, messages, categories: allCategories = {}} = props
2+ const {
3+ children,
4+ targetLocale = DEFAULT_LOCALE,
5+ messages = {},
6+ categories: allCategories = {}
7+ } = propsReplace defaultLocale with the new static value.
1- defaultLocale="en-US"
2+ defaultLocale={DEFAULT_LOCALE}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.
Note
Add react-query to your devDependencies.
1+ "@tanstack/react-query": "^4.0.10",To test whether your changes have been made successfully, run the following commands:
npm install to install the required react-query dependency.npm start to verify that the app is able to run locally.npm run build for verifying that the build process is successful.npm run push (and deploy via Runtime Admin) to verify that deploying a bundle is successful.To learn more about React Query and how to use it, see the React Query documentation.
j