React Query – Récupérer les données de la bonne manière

Apprenons à utiliser React Query, qui est une bibliothèque de récupération de données qui utilise un ensemble de crochets pour gérer la récupération de nos applications React.

Lorsque nous commençons à apprendre React et son fonctionnement, nous ne Je ne vois pas de problème avec la récupération de données. Habituellement, nos premières applications React sont des applications simples que nous ne gérons pas et nous n'avons besoin d'aucune récupération de données.

Les composants jouent un rôle important dans les applications React car ils sont responsables du rendu du contenu. Nous pouvons créer autant de composants que nous le souhaitons, et nous pouvons diviser un composant énorme et désordonné en petits composants et rendre toute notre application plus composable. Mais les composants ne sont pas responsables de la récupération des données des API. Nous avons besoin d'autre chose pour nous aider.

Nous avons de nombreuses façons différentes de récupérer des données dans les applications React. Nous pouvons utiliser des API et des bibliothèques largement utilisées dans les applications React, telles que l'Fetch APIla bibliothèque Axiosun hook React personnalisé que nous pouvons créer nous-mêmes, etc.

Chaque développeur a sa méthode préférée pour récupérer les données, et choisir la bonne méthode peut prendre du temps et des discussions. La plupart du temps, la récupération de données peut apporter de la complexité à notre code. La récupération de données dans les applications React modernes est un sujet très important et c'est ce sur quoi nous allons en apprendre davantage aujourd'hui.

Nous allons en apprendre davantage sur React Query et comment la bibliothèque devient l'un des moyens les plus standard pour récupération de données dans les applications React. Cela rend la récupération de données pour React facile, puissante et amusante.

React Query

La création de crochets React personnalisés pour la récupération de données peut être une bonne solution. Nous pouvons les créer comme nous le voulons et les utiliser quand nous le voulons. Un bon point pour ne pas créer de crochets React personnalisés est que cela nécessite beaucoup de temps et de tests, et vous devrez le prendre en charge de temps en temps.

React Query est une bibliothèque de récupération de données pour React. applications qui simplifient la récupération des données. Il s'agit d'un ensemble de crochets React qui nous aident à améliorer la façon dont nous récupérons les données dans nos applications. Il peut être personnalisé au fur et à mesure que notre application grandit et possède des fonctionnalités puissantes telles que récupération de recentrage de fenêtre préchargement mises à jour optimistes, prise en charge de TypeScript Prise en charge de React Suspenseetc.

React Query facilite l'extraction, la mise en cache, la synchronisation et la mise à jour de l'état du serveur dans vos applications React. – React Query

Il est très simple et direct de démarrer avec React Query :

 fil ajouter react-query

Tout ce que nous avons à faire est d'importer QueryClientProvider et QueryClient et de procéder comme suit :

import { QueryClient, QueryClientProvider } from  "react-query";
import { ReactQueryDevtools } from "react-query-devtools";

const queryClient = new QueryClient({});

const App = ([19659019]) => {
  return (
    <QueryClientProvider client={queryClient}>[19659045]{}
    </QueryClientProvider>
  );
};

export default Application;

Le débogage de la récupération de données peut être pénible et c'est pourquoi React Query est livré avec un composant dédié devtools.

import { ReactQueryDevtools } de[19659018]'react-query/devtools'

Cela vous aidera à comprendre et à visualiser comment React Query récupère les données. Cela vous fera gagner des heures de débogage et vous aidera à vérifier l'état actuel de vos demandes.

import { QueryClient, QueryClientProvider } from  "react-query";
import { ReactQueryDevtools } from "react-query/devtools";

const queryClient = new QueryClient({});

const App = ([19659019]) => {
  return (
    <QueryClientProvider client={queryClient}>[19659045]{}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  )
}

useQuery Hook

Le useQu ery hook gère la récupération des données et peut être utilisé avec n'importe quelle méthode basée sur les promesses. Chaque fois que vous souhaitez récupérer une ressource, vous allez utiliser le hook useQuery.

Ce hook accepte une clé unique pour la requête et une fonction qui renvoie une promesse. La clé unique est utilisée pour récupérer en interne, mettre en cache et partager votre requête.

const result = useQuery(key, promiseBasedFn );

L'objet renvoyé par le hook useQuery a des états internes très utiles, tels que isLoading, isError, isSuccess, isSuccess, error, data, isFetching.