Organiser efficacement ses requêtes React-Query

Organiser efficacement ses requêtes React-Query

Alexandre P. dans Dev - Le 14-03-2024

Tous les projets React ne sont pas égaux en matière d'organisation des requêtes. J'aime bien que les dossiers ne soient pas un labyrinthe et que l'on sache exactement quoi faire pour répliquer l'existant sans créer de doublons. Voici comment je procède.

Qu'est-ce que React-Query

React-Query est une librairie pour gérer les requêtes en React.js qui s'utilise aussi bien avec du Rest API ou du GraphQL.

L'utilisation de react-query demande la mise en place d'un higher order component qui viendra wrapper les composants dans lesquels on déclenche les requêtes.

React-Query est :

  • Simple à mettre en place
  • Gère le cache de réponses nativement
  • Rend très simple les Render conditionnels, Refetching etc...

En fait l'outil n'ayant quasiment que des pour et peu de contre, je ne peux que le recommander chaudement.

Un hook pour utiliser une requête

React-Query est lui même un hook, donc vous vous demanderez probablement, pourquoi un hook ?

Etant donné, qu'il n'est pas rare d'avoir plusieurs composants ou pages qui utilisent les mêmes requêtes, voir les requêtes comme des hooks permet de réduire la duplication de code.

hooks/posts.tsx :

import React from "react";
import { useQuery } from "react-query";

export const useGetPost = () => {
  const { isFetching, error, data } = useQuery({
    queryKey: ["posts"],
    queryFn: () =>
      fetch("https://jsonplaceholder.typicode.com/posts").then((res) =>
        res.json()
      ),
  });

  return {
    isFetching,
    error,
    data,
  };
};

☝️ Il est possible de factoriser encore plus la partie requête en créant une librairie api, utiliser des variables d'environnement pour l'URL, etc...

Enfin dans la page qui déclenche la requête, vous pouvez tout simplement faire :

function App() {
  const { isFetching, data: posts } = useGetPost();

  return (
    <div className="App flex justify-center flex-wrap">
      {isFetching && "Getting posts..."}
      {!isFetching &&
        posts?.map((post: Post) => {
          return <PostCard key={post.id} post={post} />;
        })}
    </div>
  );
}

Cette méthodo permet de factoriser et d'organiser sainement vos requêtes pour la réutilisation.

Cela donne une arborescence comme suit :

├── src
│   ├── App.css
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── components
│   │   └── post.tsx
│   ├── custom-types
│   │   └── post.ts
│   ├── hoc
│   │   └── queries.tsx
│   ├── hooks
│   │   └── posts.tsx
│   ├── index.css
│   ├── index.tsx

En tout cas je vous recommande cette organisation, du moins, éviter au maximum de faire des appels direct à react-query dans les composants et recréer systématiquement des copies de vos requêtes. Car le jour où l'API évoluera et les endpoints changeront de forme, cela vous évitera de repasser partout pour faire des correctifs.

Voici le repository .

Soyez efficacement paresseux ! 🐼

#react#react-query#hook

user picture
Alexandre P.

Développeur passionné depuis plus de 20 ans, j'ai une appétence particulière pour les défis techniques et changer de technologie ne me fait pas froid aux yeux.


Nous utilisons des cookies sur ce site pour améliorer votre expérience d'utilisateur.