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 ! 🐼