Mettre à jour vers la version 2.3

Si vous mettez à jour un projet PWA Kit créé avant la sortie de la version 2, suivez d’abord les instructions du guide Mise à jour vers la version 2.

Important

Pour profiter des fonctionnalités opt-in disponibles dans la version 2.3 (l’intégration de react-query), vous devez apporter quelques modifications à _app-config/index.js, _app/index.js et package.json dans votre projet PWA Kit.

Modifications apportées à _app-config/index.js

Ouvrez _app-config/index.js et apportez les modifications suivantes.

Importez les composants de niveau supérieur requis pour activer react-query et conserver la prise en charge de getProps.

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'

Ajoutez l’objet options avec la configuration React Query recommandée.

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}

Mettez à jour la définition du composant AppConfig exporté.

1- export default AppConfig
2+ export default withReactQuery(withLegacyGetProps(AppConfig), options)

Modifications apportées à _app/index.js

Ouvrez _app/index.js et apportez les modifications suivantes.

Déclarez une variable nommée DEFAULT_LOCALE pour stocker le paramètre régional par défaut afin d’afficher des messages dans votre application. Pour un projet nouvellement généré, les messages par défaut sont rédigés en anglais pour le paramètre régional États-Unis. Si vous n’avez pas réécrit les messages par défaut, alors en-US est la bonne valeur pour DEFAULT_LOCALE. Sinon, définissez DEFAULT_LOCALE sur une valeur différente, telle que fr-fr ou ja-jp.

1+ const DEFAULT_LOCALE = 'en-US'

Attribuez DEFAULT_LOCALE comme valeur par défaut pour la propriété targetLocale.

1- const {children, targetLocale, messages, categories: allCategories = {}} = props
2+ const {
3+     children,
4+     targetLocale = DEFAULT_LOCALE,
5+     messages = {},
6+     categories: allCategories = {}
7+ } = props

Remplacez defaultLocale par la nouvelle valeur statique.

1- defaultLocale="en-US"
2+ defaultLocale={DEFAULT_LOCALE}

Si elles sont activées, les fonctions useQuery et getProps sont exécutées en parallèle. L’exécution en parallèle a un effet secondaire : le rendu conditionnel d’un composant basé sur la valeur retournée par getProps peut empêcher certains hooks useQuery de s’exécuter sur le serveur. Par souci de simplicité, nous vous recommandons de choisir getProps ou useQuery pour la récupération des données.

Note

Modifications apportées à package.json

Ajoutez react-query à votre devDependencies.

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

Tester vos modifications

Pour vérifier si vos modifications ont bien été effectuées, exécutez les commandes suivantes :

npm install pour installer la dépendance react-query requise.
npm start pour vérifier que l’application peut s’exécuter localement.
npm run build pour contrôler la réussite du processus de build.
npm run push (et déployer via Runtime Admin) pour contrôler la réussite du déploiement d’un bundle.

Lectures complémentaires

Pour en savoir plus sur React Query et son utilisation, consultez la documentation React Query.