Upgrade to v2.3

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.

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.

Add the options object with the recommended React Query configuration.

Update the exported AppConfig component definition.

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.

Assign DEFAULT_LOCALE as the default value for the targetLocale property.

Replace defaultLocale with the new static value.

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.

Add react-query to your devDependencies.

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.

To learn more about React Query and how to use it, see the React Query documentation.