Formation Apprendre React : Découverte de react-query

Dans cette nouvelle vidéo je vous propose de découvrir la librairie react-query qui va vous permettre de gérer simplement la synchronisation des données avec votre serveur.

Le principe de base

La librairie va fournir un hook personnalisé useQuery() qui attend 3 paramètres :

• Une clef, qui servira a identifier cette requête parmis toutes les requêtes de l'application
• Une fonction, qui permet d'indiquer comment récupérer les données
• Un objet d'options

import { QueryClient, QueryClientProvider, useQuery } from 'react-query'

 const queryClient = new QueryClient()

 export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <Example />
     </QueryClientProvider>
   )
 }

 function Example() {
   const { isLoading, error, data } = useQuery('repoData', () =>
     fetch('https://api.github.com/repos/tannerlinsley/react-query').then(res =>
       res.json()
     )
   )

   if (isLoading) return 'Loading...'

   if (error) return 'An error has occurred: ' + error.message

   return (
     <div>
       <h1>{data.name}</h1>
       <p>{data.description}</p>
       <strong>👀 {data.subscribers_count}</strong>{' '}
       <strong>✨ {data.stargazers_count}</strong>{' '}
       <strong>🍴 {data.forks_count}</strong>
     </div>
   )
 }

react-query récupèrera automatiquement les données et se chargera de les récupérer à nouveau lorsque l'utilisateur refocus la fenêtre ou lorsqu'il se reconnecte. Par défaut, le résultat de la requête sera sauvegardé en mémoire pour être réutilisé lorsque le composant est remonté pendant qu'une nouvelle requête est lancée pour actualiser les informations.

Mutation

Lorsque l'on souhaite modifier des informations on utilisera useMutation()

const {
  isLoading: isUpdating,
  isSuccess,
  reset,
  mutate,
} = useMutation(
  (data) => updatePost(postId, data),
  {
      onSuccess: () => queryClient.invalidateQueries(["posts"]),
  }
); 

On pourra écouter la résolution de la mutation afin d'invalider les données invalidateQueries() ou pour définir les nouvelles données dans le cache setData. On pourra aussi choisir de modifier les données en amont lors de la mutation onMutate afin de créer une interface "optimiste" qui changera les données avant de recevoir le retour du serveur.