Mise à 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.

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.

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.

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

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

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.

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

Remplacez defaultLocale par la nouvelle valeur statique.

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.

Ajoutez react-query à votre devDependencies.

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

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

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