Démarrer avec React Query en 2022

Le prochain grand projet ! Apprenez à utiliser React Query pour la gestion des données de l’état du serveur.

Pourquoi est-ce la prochaine grande chose ?

C’était la pièce manquante de React qui aide à la gestion des données de l’état du serveur. Oubliez de tout garder dans un état global standard, car la plupart des bibliothèques ont été créées pour gérer l’état du client uniquement et l’état du serveur est bien différent.

Les données du serveur sont asynchrones. Comme elles ne sont pas stockées dans votre application, elles peuvent être périmées en un clin d’œil, vous devez donc trouver un moyen de créer un cache. Voici la mauvaise nouvelle : c’est l’une des choses les plus difficiles en programmation. Mais la bonne nouvelle, c’est que React Query peut gérer la récupération, la mise en cache, la synchronisation et la mise à jour de l’état du serveur de vos données.

Pourquoi est-ce cool de commencer un projet de récupération de données avec React Query ?

En un mot, cela fera passer votre application à un niveau supérieur. Mais vraiment, considérez les exemples ci-dessous.

• Principaux avantages de React Query
• Window focus refetching – lorsqu’un utilisateur quitte l’onglet de votre application, React Query marque les données comme « périmées » et les récupère lorsque cette personne revient.
• Request retry – vous pouvez définir un nombre de tentatives pour toute requête afin de lutter contre les erreurs aléatoires.
• Prefetching – si votre application a besoin de données fraîches après une demande de mise à jour, vous pouvez précharger la requête avec une clé spécifique, et React Query la mettra à jour en arrière-plan.
• Optimistic Updates – lorsque vous modifiez ou supprimez un élément dans une liste, vous pouvez effectuer une mise à jour optimiste de la liste.

Démarrage avec React Query

Voici la configuration de base.

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

const queryClient = new QueryClient()

<QueryClientProvider client={queryClient}>
  <App />
</QueryClientProvider>

Supposons que nous ayons une fonction axios de base qui renvoie les données de nos articles.

async function createFetchArticles() {
  const { data } = await axios.get('/api/articles')
  return data
}

La récupération des données à l’aide de React Query est très simple.

import React from 'react'
import { useQuery } from 'react-query'

export const Articles = () => {
  const { data, error, isError, isLoading } = useQuery(['articles'], createFetchArticles)

  if (isLoading) {
    return <span>Loading...</span>
  }

  if (isError) {
    return <span>Error: {error.message}</span>
  }

  return (
    <ul>
      {data.map(article => (
        <li key={article.id}>{article.title}</li>
      ))}
    </ul>
  )
}

La récupération de données est maintenant meilleure

Pourquoi est-ce mieux que de récupérer des données avec le pattern useEffect ? Lorsque vous utilisez cette requête avec la même clé de projet, React Query renvoie d’abord les données précédemment récupérées, puis les récupère à nouveau.

Lorsque le deuxième ensemble de données est le même que le premier, React Query conserve les deux comme référence sans forcer un rechargement. C’est une amélioration considérable du travail de l’UX.

Comment fonctionnent les crochets de mise à jour

Vous savez donc comment récupérer des données plus facilement. Voyons maintenant comment les mettre à jour.

async function createPostArticle(id) {
  await axios.post(`/api/article/${id}`)
}

export const AddArticle = () => {
  const [title, setTitle] = React.useState('')
  const {isLoading, isError, error, mutate} = useMutation(createPostArticle)

  return (
    <div>
      <input
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        disabled={isLoading}
      />
      <button
        onClick={() => {
          mutate({ title })
        }}
        disabled={isLoading || !title}
      >
        Add Article
      </button>
      <div>
        {isLoading
          ? "Saving..."
          : isError
          ? error.message
          : "Saved!"}
      </div>
    </div>
  )
}

React Query dispose du hook useMutation que vous pouvez utiliser pour mettre à jour/créer/supprimer des données. useMutation vous donne accès à la fonction mutate à laquelle nous pouvons passer les arguments nécessaires. elle renvoie ensuite des informations sur le statut de notre appel API. L’état peut être :

• idle pour un état d’inactivité ou de fraîcheur/réinitialisation
• loading pour une mutation en cours d’exécution
• error lorsque nous en avons rencontré une
• success lorsque tout s’est bien passé et que nos données sont disponibles.

Commencez immédiatement avec un gabarit

À des fins d’exemple, j’ai créé un repos Github pour présenter plus en détail le concept React vs React + React Query. Ainsi, il sera plus simple de faire la démonstration des éléments. Dans mon exemple, on simule une API qui retourne du json par exemple GraphQL ou tout autre REST API que vous pourriez construire.

J’ai tout simplement créé une application React de base avec npx create-react-app my-app

Ensuite, j’ai ajouté les différents paquets requis pour vous montrer avec une base simple l’utilisation de React-Query. J’ai également, ajouté quelques éléments pour vous démontrer les mutations et la gestion avec l’API (json-server)

Une gestion des données plus intelligente

React Query nous aide vraiment à résoudre les problèmes liés à la gestion asynchrone des données. La vie était autrefois plus difficile. Les développeurs avaient besoin d’un tas d’autres bibliothèques, et ils finissaient par mettre les données du serveur dans un magasin global. Ce n’était pas une bonne idée. Pourquoi ? Comme je l’ai mentionné précédemment, le fait de conserver les données du serveur asynchrone dans un magasin global ajoute une complexité inutile à notre code.

Mais ce n’est pas tout. La requête permet également de réduire la quantité de code passe-partout (comme le fait de conserver chaque récupération dans le hook useEffect). Lorsqu’elle est utilisée à bon escient, la requête peut améliorer l’expérience utilisateur, mais elle peut aussi la briser. Soyez donc prudent et essayez d’abord d’apprendre à connaître cette bibliothèque.

Conclusion

React Query résout une grande partie des problèmes rencontrés par les développeurs React avec une approche « opinionated-first », c’est-à-dire moins de texte passe-partout, mais avec suffisamment d’échappatoires pour une personnalisation profonde.

J’insiste sur le mot « développeur React » car une partie de ce qui rend React Query si spécial est l’ensemble étroit de problèmes qu’il cherche à résoudre.