React Query 3: un guide pour récupérer et gérer les données

Simplifiez l'acquisition de données pour les applications frontales CRUD à l'aide de React Query

La construction d'applications CRUD front-end est facile au début, mais à mesure que la fonctionnalité augmente, la complexité augmente rapidement. Pour chaque point de terminaison de l'API, la gestion de l'état, la synchronisation, la mise en cache et la gestion des erreurs sont nécessaires. Cet article présentera une bibliothèque appelée React Query et comment elle peut aider à résoudre tous ces problèmes. La bibliothèque prétend être une "bibliothèque d'acquisition de données manquante" et fournit une "gestion de l'état du serveur" pour votre application React.

Nous utiliserons un projet complet de démonstration de requête React pour apprendre les fonctionnalités principales fournies par la bibliothèque. Vous pouvez ensuite appliquer ces connaissances à votre propre projet. Tout d'abord, apprenons un peu à ce sujet avant de commencer la configuration du projet.

Points clés

• React Query 3 simplifie la gestion des états et l'acquisition de données dans les applications React, la gestion efficace du cache, de la synchronisation et de la gestion des erreurs.
• Cette bibliothèque convient aux développeurs de niveau moyen à élevé familier avec React, React Router et REST API.
• React Query 3 ajoute de nouvelles fonctionnalités et améliorations à la version 2.x et fournit un guide de migration pour les utilisateurs améliorés.
• Les fonctionnalités clés de la démo dans le projet de démonstration comprennent les requêtes de base, les requêtes de pagination et les requêtes illimitées, ainsi que les opérations de création, de mise à jour et de suppression.
• L'utilitaire Devtools de React Query aide à déboguer en visualisant les états et les processus internes en temps réel.
Des options de configuration telles que
• cacheTime et staleTime optimiser les performances en gérant la fraîcheur des données et la durée du cache.
• Cette bibliothèque prend en charge les scénarios avancés tels que le défilement illimité et les dépendances d'état complexes, améliorant l'expérience utilisateur et l'expérience des développeurs.

À propos de React Query 3

React Query est un projet open source créé par Tanner Linsey. La dernière version majeure de React Query 3 a été officiellement publiée en décembre 2020. Dans cette nouvelle version, de nouvelles fonctionnalités ont été ajoutées et les fonctionnalités existantes ont été améliorées.

Il convient de noter qu'il a des changements significatifs par rapport à la version précédemment très populaire de React Query 2.x. Il existe un guide de migration qui explique clairement ces changements, car vous pouvez rencontrer de nombreux tutoriels obsolètes écrits pour les versions plus anciennes.

La nouvelle version offre une énorme amélioration, et bon nombre des bogues précédemment signalés ont été résolus. Bien que la version 3.x soit prête pour la production, elle est toujours en cours de développement et est régulièrement corrigée avec des bogues nouvellement découverts.

Précautions

Cet article concerne les développeurs frontaux de niveau intermédiaire, qui ont maîtrisé les compétences et les connaissances de base suivantes:

• react
• REACT ROUTER
• React Hooks
• Rest API Data Acquisition

Dans votre environnement de machine de développement, vous devez définir les éléments suivants:

• node.js
• git
• REST CLIENTS tels que les extensions de repos pour les facteurs, l'insomnie ou le code vs

sur le projet

Le projet de démonstration que nous analyserons est une application frontale React qui utilisera React Query pour obtenir les données fournies par le serveur API JSON Rest. L'application se compose de seulement cinq pages, montrant ce que propose React Query. Ces fonctionnalités incluent:

• requête de base
• Query de pagination
• Query illimité
• Créer une opération
• Mettre à jour l'opération
• Supprimer l'opération

React Query fournit plus de fonctionnalités, mais cet article est limité dans l'espace et ne peut pas être introduit un par un. Voici un aperçu de l'application que nous utiliserons:

Paramètres du projet

Avant de commencer à nous installer, je pense qu'il est préférable de jeter un bref aperçu des autres dépendances utilisées dans le projet. Ceux-ci incluent:

• VITE: Un outil de construction très rapide
• Winticss: un compilateur CSS très rapide à vent arrière
• REACT HORD FORM: Un constructeur de formulaires et une bibliothèque de vérification qui utilise des crochets React
• React Modal: un composant modal accessible
• axios: un navigateur basé sur des promesses Client HTTP
• serveur JSON: un serveur API de repos de contrefaçon complet

Pour configurer l'application de démonstration React Query sur votre propre machine, effectuez les instructions suivantes:

<code class="language-bash"># 克隆项目
git clone git@github.com:sitepoint-editors/react-query-demo.git

# 导航到项目目录
cd react-query-demo

# 安装包依赖项
npm install

# 为 json-server 设置数据库文件
cp api/sample.db.json api/db.json

# 启动 json-server
npm run json-server</code>

Le fichier de base de données utilisé par JSON-Server contient un tableau d'utilisateurs. Lorsque vous exécutez npm run json-server, un faux serveur API commencera sur le port 3004. L'exécution d'une demande GET produira l'exemple suivant JSON Response:

<code class="language-json">[
  {
    "id": 1,
    "first_name": "Siffre",
    "last_name": "Timm",
    "email": "stimmes0@nasa.govz",
    "gender": "Male"
  },
  {
    "id": 2,
    "first_name": "Fonzie",
    "last_name": "Coggen",
    "email": "fcoggen1@weather.com",
    "gender": "Female"
  },
  {
    "id": 3,
    "first_name": "Shell",
    "last_name": "Kos",
    "email": "skos2@prweb.com",
    "gender": "Female"
  }
]</code>

Ensuite, démarrez le serveur de développement qui exécutera le code frontal:

<code class="language-bash"># 在另一个终端中，启动 React 开发服务器
npm run dev</code>

Accédez à votre navigateur et ouvrez http://localhost:3000 pour accéder à l'application. Vous devriez avoir la même expérience que dans l'aperçu ci-dessus. Assurez-vous d'effectuer les tâches suivantes pour explorer soigneusement la fonctionnalité de l'application:

• Affichez la page de requête de base (page d'accueil).
• Accédez à la page de pagination et interagissez avec les boutons précédents et suivants.
• Accédez aux pages illimitées et interagissez avec le bouton de chargement plus.
• Revenez à la page de requête de base et cliquez sur le bouton "Créer un utilisateur". Vous serez dirigé vers la page Créer des utilisateurs. Remplissez le formulaire et cliquez sur le bouton Enregistrer.
• Dans la table utilisateur, trouvez l'icône d'édition. Cliquez dessus. Cela vous amènera à la page Modifier les utilisateurs. Faites toutes les modifications que vous aimez et cliquez sur le bouton "Enregistrer".
• Dans la table utilisateur, trouvez l'icône "Supprimer". Cliquez dessus. Cela démarrera une boîte de dialogue modale qui vous demande de confirmer l'opération de suppression. Cliquez sur le bouton Supprimer pour confirmer.

Après avoir terminé toutes les tâches ci-dessus, nous pouvons commencer à décomposer le projet. Veuillez vérifier la structure du projet pour comprendre l'emplacement de chaque composant et la vue. Je vais fournir une version simplifiée de ces composants dans cet article afin que vous puissiez comprendre les bases de l'utilisation de React Query dans votre projet.

Installation React Query

React Query peut être installé dans des projets REACT vides ou existants en utilisant la commande suivante:

<code class="language-bash"># 克隆项目
git clone git@github.com:sitepoint-editors/react-query-demo.git

# 导航到项目目录
cd react-query-demo

# 安装包依赖项
npm install

# 为 json-server 设置数据库文件
cp api/sample.db.json api/db.json

# 启动 json-server
npm run json-server</code>

Ce package contient tout ce dont vous avez besoin - y compris les fonctionnalités utilitaires Devtools, dont nous discuterons plus tard. Après avoir installé le package, vous devez mettre à jour votre composant de niveau supérieur - App.jsx - comme illustré ci-dessous:

<code class="language-json">[
  {
    "id": 1,
    "first_name": "Siffre",
    "last_name": "Timm",
    "email": "stimmes0@nasa.govz",
    "gender": "Male"
  },
  {
    "id": 2,
    "first_name": "Fonzie",
    "last_name": "Coggen",
    "email": "fcoggen1@weather.com",
    "gender": "Female"
  },
  {
    "id": 3,
    "first_name": "Shell",
    "last_name": "Kos",
    "email": "skos2@prweb.com",
    "gender": "Female"
  }
]</code>

Tout composant enfant de

QueryClientProvider pourra accéder aux crochets fournis par la bibliothèque React Query. Les crochets que nous utiliserons dans cet article sont:

• useQuery
• useInfiniteQuery
• useMutation
• useQueryClient

Ce qui suit est une version mise à jour (version simplifiée) App.jsx avec les sous-vues que nous utiliserons:

<code class="language-bash"># 在另一个终端中，启动 React 开发服务器
npm run dev</code>

(Un tel contenu, veuillez continuer à traduire les pièces restantes en fonction de vos exigences, y compris des composants d'interface utilisateur, des requêtes de base, des requêtes de pagination, des requêtes illimitées, des mutations et d'autres chapitres.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!