Organiser efficacement ses requêtes React-Query

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.

Mise en place du wrapper

Nous allons commencer par mettre en place un hoc (higher-order component) afin de wrapper le contenu. Cela permettra à React-Query de bénéficier d'un contexte sur lequel il va dispatcher des événements pour vos composants. De même cela vous permettra de bénéficier du caching intégré à React-Query pour accélérer vos pages.

Je crée un fichier dans /hoc/queries.tsx:

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

export const queryClient = new QueryClient();

type QueriesArgs = {
  children: React.ReactNode;
};

export const Queries = ({ children }: QueriesArgs) => {
  return (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  );
};

Comme vous pouvez le voir, il contient mon QueryClient que je vais directement importer dans mon index.tsx de Next.js ensuite:

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { Queries } from "./hoc/queries";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <Queries>
      <App />
    </Queries>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

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