Construire la vraie application avec React Query

const queryClient = new QueryClient();

ReactDOM.render(
 
   
     
       
       
     
   
 ,
 document.getElementById('root')
);

import { ReactQueryDevtools } from 'react-query/devtools' ;

ReactDOM.render(
 
   
     
       
       
       
     
   
 ,
 document.getElementById('root')
);

const UserProfile = ({} : Props) => {
 const { données : utilisateur, isLoading } = useGetProfile();

 si (estChargement) {
   retourner (
     
       
     
   );
 }

 retourner (
   
     {utilisateur ? `Utilisateur : ${user.name}` : 'Non autorisé'}
   
 );
} ;

if (resp.data.token) {
 Cookies.set('token', resp.data.token);
 history.replace(pageRoutes.main);
 queryClient.invalidateQueries();
}

 const UsersSummary = () => {
 const { données : liste, isLoading } = useGetAppointmentsList();

 si (!isLoading && !liste) {
   renvoie nul ;
 }

 retourner (
   
     
       
         
           Nombre total de rendez-vous :{' '}
           {est en cours de chargement ? (
             
           ) : (
             liste!.pages[0].count
           )}
         
       
     
   
 );
} ;

const UsersList = () => {
 const {
   données : liste,
   est en cours de chargement,
   récupérerPageSuivante,
   aPageSuivante,
   isFetchingPageSuivante,
 } = useGetAppointmentsList();

 retourner (
   <>
     
       {est en cours de chargement ? (
         
           
             
           
           
             
           
           
             
           
         
       ) : (
         
           {list!.pages.map((page) => (
             
               {page.data.map((item) => (
                 
               ))}
             
           ))}
         
       )}
     
     {aPageSuivante && (
       
          {
             récupérerPageSuivante();
           }}
           désactivé={isFetchingNextPage}
         >
           {isFetchingNextPage ? 'Chargement de plus...' : 'Charger plus d'utilisateurs'}
         
       
     )}
   
 );
};

 export const useGetAppointmentsList = () =>
 useLoadMore(apiRoutes.getUserList);

export const useLoadMore = (url : string | null, params ? : object) => {
 contexte const = useInfiniteQuery<
   GetInfinitePagesInterface,
   Erreur,
   GetInfinitePagesInterface,
   QueryKeyT
 >(
   [url!, params],
   ({ queryKey, pageParam = 1 }) => fetcher({ queryKey, pageParam }),
   {
     getPreviousPageParam : (firstPage) => firstPage.previousId ?? faux,
     getNextPageParam : (dernièrePage) => {
       retourner lastPage.nextId ?? faux;
     },
   }
 );

 contexte de retour ;
};

const UsersList = () => {
 const {
   données : liste,
   est en cours de chargement,
   récupérerPageSuivante,
   aPageSuivante,
   isFetchingPageSuivante,
 } = useGetAppointmentsList();

 retourner (
   <>
     
       {est en cours de chargement ? (
         
           
             
           
           
             
           
           
             
           
         
       ) : (
         
           {list!.pages.map((page) => (
             
               {page.data.map((item) => (
                 
               ))}
             
           ))}
         
       )}
     
     {aPageSuivante && (
       
          {
             récupérerPageSuivante();
           }}
           désactivé={isFetchingNextPage}
         >
           {isFetchingNextPage ? 'Chargement de plus...' : 'Charger plus d'utilisateurs'}
         
       
     )}
   
 );
};

const queryClient = new QueryClient({
 options par défaut : {
   requêtes : {
     refetchOnWindowFocus : faux,
   },
 },
});

if (data?.hasInsurance) {
 const { données : assurance } = useGetInsurance (
   data?.hasInsurance ? +id : nul
 );
}

Dans notre abstraction useFetchnous avons défini la propriété enabled dans la configuration sur false au cas où nous n'aurions pas de clé. Dans ce cas, React Query interrompt simplement les demandes.

Pour un rendez-vous avec id = 1nous avons hasInsurance = true. Ensuite, nous faisons une autre demande et affichons une icône de vérification à côté du nom. Cela signifie que nous avons reçu un indicateur allCovered du point de terminaison getInsurance.

Pour un rendez-vous avec id = 2 nous avons hasInsurance = falseet nous ne demandons pas les détails de l'assurance.

Mutation simple avec invalidation des données

Pour créer/mettre à jour/supprimer des données dans React Query, nous utilisons des mutations. Cela signifie que nous envoyons une requête au serveur, recevons une réponse et, sur la base d'une fonction de mise à jour définie, nous modifions notre état et le gardons à jour sans faire de requête supplémentaire.

Nous avons une abstraction génétique pour ces actions.

 const useGenericMutation = (
 func : (données : S) => Promesse<AxiosResponse>,
 URL : chaîne,
 paramètres ? : objet,
 updater ? : ((oldData : T, newData : S) => T) | indéfini
) => {
 const queryClient = useQueryClient();

 return useMutation(fonc, {
   onMutate : asynchrone (données) => {
     attendre queryClient.cancelQueries([url!, params]);

     const previousData = queryClient.getQueryData([url!, params]);

queryClient.setQueryData([url!, params](oldData) => {
 renvoyer le programme de mise à jour ? (oldData!, données) : données ;
});


     retourner les données précédentes ;
   },
   // Si la mutation échoue, utilisez le contexte renvoyé par onMutate pour revenir en arrière
   onError : (erreur, _, contexte) => {
     queryClient.setQueryData([url!, params]contexte);
   },

   onSettled : () => {
     queryClient.invalidateQueries([url!, params]);
   },
 });
} ;

Regardons plus en détail. Nous avons plusieurs méthodes de callback :

onMutate (si la requête aboutit) :

1. Annulez toutes les requêtes en cours.
2. Enregistrer les données actuelles dans une variable.[19659007]Si défini, nous utilisons une fonction updater pour faire muter notre état par une logique spécifique, sinon, remplacez simplement l'état par les nouvelles données. Dans la plupart des cas, il est logique de définir la fonction updater.
3. Renvoyer les données précédentes.

onError (si la requête a échoué) :

1. Annuler les données précédentes. .

onSettled (si la requête réussit ou échoue) :

1. Invalidez la requête pour conserver l'état frais.

Cette abstraction que nous utiliserons pour toutes les actions de mutation.

export const useDelete = (
 URL : chaîne,
 paramètres ? : objet,
 updater ? : (oldData : T, id : chaîne | nombre) => T
) => {
 return useGenericMutation(
   (id) => api.delete(`${url}/${id}`),
   URL,
   paramètres,
   mise à jour
 );
} ;

export const usePost = (
 URL : chaîne,
 paramètres ? : objet,
 updater ? : (oldData : T, newData : S) => T
) => {
 return useGenericMutation(
   (données) => api.post(url, données),
   URL,
   paramètres,
   mise à jour
 );
} ;

export const useUpdate = (
 URL : chaîne,
 paramètres ? : objet,
 updater ? : (oldData : T, newData : S) => T
) => {
 return useGenericMutation(
   (données) => api.patch(url, données),
   URL,
   paramètres,
   mise à jour
 );
};

C'est pourquoi il est très important d'avoir le même ensemble de [url!, params] (que nous utilisons comme clé) dans tous les crochets. Sans cela, la bibliothèque ne pourra pas invalider l'état et faire correspondre les requêtes.

Voyons comment cela fonctionne dans notre application : nous avons une section Historiqueen cliquant sur Enregistrer bouton, nous envoyons une requête PATCH et recevons l'ensemble de l'objet de rendez-vous mis à jour.

Tout d'abord, nous définissons une mutation. Pour l'instant, nous n'allons pas effectuer de logique complexe, renvoyant simplement le nouvel état, c'est pourquoi nous ne spécifions pas la fonction updater.

const mutation = usePatchAppointment(+id);

export const usePatchAppointment = (id: nombre) =>
 utiliserMise à jour(
   pathToUrl(apiRoutes.rendez-vous, { id })
 );

Remarque : Il utilise notre crochet générique useUpdate.

Enfin, nous appelons la méthode mutate avec les données que nous voulons corriger : mutation.mutate([data!]);.

Remarque : dans ce composant, nous utilisons un isFetching pour indiquer la mise à jour des données sur le focus de la fenêtre (consultez la section de récupération Background), ainsi, nous affichons l'état de chargement à chaque fois que la requête est en cours. C'est pourquoi, lorsque nous cliquons sur Enregistrermodifions l'état et récupérons la réponse réelle, nous affichons également l'état de chargement. Idéalement, cela ne devrait pas être affiché dans ce cas, mais je n'ai pas trouvé de moyen d'indiquer une récupération en arrière-plan, mais n'indiquez pas la récupération lors du chargement des nouvelles données.

const History = ({ id } : Props ) => {
 const { données, isFetching } = useGetAppointment(+id);
 const mutation = usePatchAppointment(+id);

 si (estFeching) {
   retourner (
     
       
         
       
       
         
       
       
         
       
     
   );
 }

 const onSubmit = () => {
   mutation.mutate(data!);
 } ;

 retourner (
   <>
     {data?.history.map((item) => (
       
         Date : {article.date} 

         Commentaire : {item.comment}
       
     ))}

     {!data?.history.length && !isFetching && (
       
         Rien trouvé
       
     )}
     
       
         Enregistrer
       
     
   
 );
} ;

Mutation avec changements optimistes

Regardons maintenant l'exemple le plus complexe : dans notre application, nous voulons avoir une liste, où nous devrions pouvoir ajouter et supprimer des éléments. De plus, nous voulons rendre l'expérience utilisateur aussi fluide que possible. Nous allons implémenter des changements optimistes pour la création/la suppression d'emplois.

Voici les actions :

1. L'utilisateur saisit le nom de l'emploi et clique sur le bouton Ajouter.
2. Nous ajoutons immédiatement cet élément à notre liste et affichez le chargeur sur le bouton Ajouter.
3. En parallèle, nous envoyons une requête à l'API.
4. Lorsque la réponse est reçue, nous masquons le chargeur, et s'il réussit, nous gardons simplement le entrée précédente, mettez à jour son identifiant dans la liste et effacez le champ de saisie.
5. Si la réponse échoue, nous affichons la notification d'erreur, supprimons cet élément de la liste et conservons le champ de saisie avec l'ancienne valeur.
6. Dans les deux cas, nous envoyons une requête GET à l'API pour nous assurer que nous avons l'état réel.

Toute notre logique est la suivante :

const { data, isLoading } = useGetJobs();

const mutationAdd = useAddJob((oldData, newData) => [...oldData, newData]);
const mutationDelete = useDeleteJob((oldData, id) =>
 oldData.filter((item) => item.id !== id)
);

const onAdd = asynchrone () => {
 essayer {
   attendre mutationAdd.mutateAsync({
     nom : nom du travail,
     identifiant de rendez-vous,
   });
   setNomJob('');
 } attrape (e) {
   pushNotification(`Impossible d'ajouter le travail : ${jobName}`);
 }
} ;

const onDelete = async (id : numéro) => {
 essayer {
   attendre mutationDelete.mutateAsync(id);
 } attrape (e) {
   pushNotification(`Impossible de supprimer le travail`);
 }
};

Dans cet exemple, nous définissons nos propres fonctions updater pour faire muter l'état par une logique personnalisée : pour nous, il s'agit simplement de créer un tableau avec le nouvel élément et de filtrer par id si nous voulons supprimer l'élément. Mais la logique peut être quelconque, cela dépend de vos tâches.

React Query s'occupe de changer d'état, de faire des requêtes et de revenir à l'état précédent en cas de problème.

Dans la console, vous pouvez voir quelles requêtes axios fait à notre API fictive. Nous avons pu voir immédiatement la liste mise à jour dans l'interface utilisateur, puis nous avons appelé POST et enfin nous avons appelé GET. Cela fonctionne parce que nous avons défini le rappel onSettled dans le hook useGenericMutationdonc après un succès ou une erreur, nous récupérons toujours les données :

onSettled : () => {
 queryClient.invalidateQueries([url!, params]);
},

Remarque : Lorsque je surligne les lignes dans les outils de développement, vous pouvez voir un grand nombre de requêtes effectuées. En effet, nous modifions le focus de la fenêtre lorsque nous cliquons sur la fenêtre Outils de développement et React Query invalide l'état.

Si le backend renvoyait l'erreur, nous annulerions les modifications optimistes et afficherions la notification. Cela fonctionne parce que nous avons défini le rappel onError dans le hook useGenericMutation. Nous définissons donc les données précédentes si une erreur s'est produite :

onError : (err, _, context) => {
 queryClient.setQueryData([url!, params]contexte);
},

Préchargement

La prélecture peut être utile si nous voulons disposer des données à l'avance et s'il existe une forte probabilité qu'un utilisateur demande ces données dans un futur proche.

Dans notre exemple, nous allons pré-extraire les détails de la voiture si l'utilisateur déplace le curseur de la souris dans la zone de section Additional.

Lorsque l'utilisateur clique sur le bouton Affichernous rendons les données immédiatement, sans appeler l'API (malgré un délai d'une seconde).

const prefetchCarDetails = usePrefetchCarDetails(+id) ;

onMouseEnter={() => {
 si (!prefetched.current) {
   prefetchCarDetails();
   prefetched.current = vrai;
 }
}}

export const usePrefetchCarDetails = (id: nombre | null) =>
 usePrefetch(
   identifiant ? pathToUrl(apiRoutes.getCarDetail, { id }) : null
 );

Nous avons notre hook d'abstraction pour la prélecture :

export const usePrefetch = (url : string | null, params ? : object) => {
 const queryClient = useQueryClient();

 retour () => {
   si (!url) {
     retourner;
   }

   queryClient.prefetchQuery(
     [url!, params],
     ({ queryKey }) => récupération({ queryKey })
   );
 } ;
} ;

Pour rendre les détails de la voiture, nous utilisons le composant CarDetailsoù nous définissons un crochet pour récupérer les données.

const CarDetails = ({ id } : Props) => {
 const { données, isLoading } = useGetCarDetail(id);

 si (estChargement) {
   retour  ;
 }

 si (!données) {
   retour Rien trouvé ;
 }

 retourner (
   
     
       Modèle : {data.model}
     

     
       Numéro : {data.number}
     
   
 ) ;
} ;

export const useGetCarDetail = (id: nombre | null) =>
 utiliserRécupérer(
   pathToUrl(apiRoutes.getCarDetail, { id }),
   indéfini,
   { staleTime : 2000 }
 );

Bon point que nous n'avons pas à transmettre d'accessoires supplémentaires à ce composant, donc dans le composant Appointment nous prélevons les données et dans le composant CarDetails nous utilisons utilisez le crochet GetCarDetail pour récupérer les données prérécupérées.

En définissant un staleTime étendu, nous permettons aux utilisateurs de passer un peu plus de temps avant de cliquer sur le bouton Afficher. Sans ce paramètre, la requête pourrait être appelée deux fois s'il faut trop de temps entre le déplacement du curseur sur la zone de préchargement et le clic sur le bouton.

Suspense

Suspense est une fonctionnalité expérimentale de React qui permet d'attendre du code. de manière déclarative. En d'autres termes, nous pourrions appeler le composant Suspense et définir le composant fallbackque nous voulons afficher pendant que nous attendons les données. Nous n'avons même pas besoin du drapeau isLoading de React Query. Pour plus d'informations, veuillez vous référer à la documentation officielle.

Supposons que nous ayons une liste de Services et que nous voulions afficher l'erreur, et Réessayez bouton si quelque chose s'est mal passé.

Pour obtenir la nouvelle expérience de développeur, utilisons ensemble Suspense, React Query et Error Boundaries. Pour le dernier, nous utiliserons react-error-boundary
Bibliothèque.

 {({ réinitialiser }) => (
    (
       
         
           
             Erreur !
           
           {error.message}
         

         
            resetErrorBoundary()}
           >
             Essayer à nouveau
           
         
       
     )}
     onReset={réinitialiser}
   >
     <Réagir.Suspense
       repli={
         
           
             
           
           
             
           
           
             
           
         
       }
     >
       
     
   
 )}

Dans le composant Suspense, nous rendons notre composant ServiceCheckoù nous appelons le point de terminaison API pour la liste de services.

const { data } = useGetServices();

In le crochet, nous définissons suspense : true et retry : 0.

export const useGetServices = () =>
 useFetch(apiRoutes.getServices, non défini, {
   suspens : vrai,
   réessayer : 0,
 });

Sur le serveur fictif, nous envoyons une réponse de 200 ou 500 codes d'état au hasard.

mock.onGet(apiRoutes.getServices).reply( (config) => {
 si (!getUser(config)) {
   retour [403] ;
 }

 const échoué = !!Math.round(Math.random());

 si (échec) {
   retour [500] ;
 }

 retour [200, services] ;
});

Ainsi, si nous recevons une erreur de l'API et que nous ne la gérons pas, nous affichons la notification rouge avec le message du réponse. En cliquant sur le bouton Réessayernous appelons la méthode resetErrorBoundary()qui essaie d'appeler à nouveau la requête. Dans React Suspense fallback, nous avons notre composant squelette de chargement, qui s'affiche lorsque nous effectuons les requêtes. et ne devrait probablement pas être utilisé en production pour le moment. Nous allons utiliser React Testing Library et Jest.

Tout d'abord, nous créons une abstraction pour les composants de rendu.

export const renderComponent = (children : React.ReactElement, history : any) => {
 const QueryClient = new QueryClient({
   options par défaut : {
     requêtes : {
       réessayer : faux,
     },
   },
 });
 options constantes = rendu(
   
     {enfants}
   
  );

 retourner {
   ...options,
   déboguer : (
     el? : HTMLElement,
     maxLength = 300000,
     opt ? : joliFormat.OptionsReceived
   ) => options.debug(el, maxLength, opt),
 } ;
} ;

Nous avons défini retry : false comme paramètre par défaut dans QueryClient et encapsulons un composant avec QueryClientProvider.

Maintenant, testons notre Composant de rendez-vous.

Nous commençons par le plus simple : il suffit de vérifier que le composant s'affiche correctement.

test('devrait rendre la page principale', async () => {
 const moqué = mockAxiosGetRequests({
   '/api/rendez-vous/1' : {
     identifiant : 1,
     nom : 'Hector McKeown',
     date_rendez-vous : '2021-08-25T17:52:48.132Z',
     services : [1, 2],
     adresse : 'Londres',
     véhicule : 'FR14ERF',
     commentaire : 'La voiture ne fonctionne pas correctement',
     histoire : [],
     hasInsurance : vrai,
   },
   '/api/travail' : [],
   '/api/getServices' : [
     {
       id: 1,
       name: 'Replace a cambelt',
     },
     {
       id: 2,
       name: 'Replace oil and filter',
     },
     {
       id: 3,
       name: 'Replace front brake pads and discs',
     },
     {
       id: 4,
       name: 'Replace rare brake pads and discs',
     },
   ],
   '/api/getInsurance/1' : {
     allCovered : vrai,
   },
 });
 const history = createMemoryHistory();
 const { getByText, queryByTestId } = renderComponent(
   ,
   l'histoire
 );

 expect(queryByTestId('rendement-squelette')).toBeInTheDocument();

 attendre waitFor(() => {
   expect(queryByTestId('appointment-skeleton')).not.toBeInTheDocument();
 });

 expect(getByText('Hector Mckeown')).toBeInTheDocument();
 expect(getByText('Replace a cambelt')).toBeInTheDocument();
 expect(getByText('Replace oil and filter')).toBeInTheDocument();
 expect(getByText('Remplacer les plaquettes et disques de frein avant')).toBeInTheDocument();
 expect(queryByTestId('DoneAllIcon')).toBeInTheDocument();
 attendre(
   mocked.mock.calls.some((item) => item[0] === '/api/getInsurance/1')
 ).toBeTruthy();
});

Nous avons préparé des assistants pour simuler les requêtes Axios. Dans les tests, nous avons pu spécifier l'URL et les données fictives.

const getMockedData = (
 URL d'origine : chaîne,
 mockData : { [url: string] : tout },
 type : chaîne
) => {
 const foundUrl = Object.keys(mockData).find((url) =>
   originalUrl.match(new RegExp(`${url}$`))
 );

 si (!urltrouvée) {
   return Promise.reject(
     new Error(`Called unmocked api ${type} ${originalUrl}`)
   );
 }

 si (erreur mockData[foundUrl] instanceof) {
   return Promise.reject(mockData[foundUrl]);
 }

 return Promise.resolve({ data: mockData[foundUrl] });
} ;

export const mockAxiosGetRequests = (mockData : {

}) : fonction fictive => {
 // @ts-ignore
 return axios.get.mockImplementation((originalUrl) =>
   getMockedData(originalUrl, mockData, 'GET')
 );
};

Ensuite, nous vérifions qu'il y a un état de chargement et ensuite, attendons le démontage du composant de chargement.

expect(queryByTestId('appointment-skeleton')).toBeInTheDocument();

 attendre waitFor(() => {
   expect(queryByTestId('appointment-skeleton')).not.toBeInTheDocument();
 });

Ensuite, nous vérifions qu'il y a des textes nécessaires dans le composant rendu, et enfin vérifions que la requête API pour les détails de l'assurance a été appelée.

attendez-vous(
   mocked.mock.calls.some((item) => item[0] === '/api/getInsurance/1')
 ).toBeTruthy();

Il vérifie que le chargement des indicateurs, la récupération des données et l'appel des points de terminaison fonctionnent correctement.

Dans le texte suivant, nous vérifions que nous n'appelons pas la demande de détails d'assurance si nous n'en avons pas besoin (remember in the component we have a condition, that if in the response from appointment endpoint there is a flag hasInsurance: true we should call the insurance endpoint, otherwise we shouldn't).

test( 'should not call and render Insurance flag', async () => {
 const mocked = mockAxiosGetRequests({
   '/api/appointment/1': {
     id: 1,
     name: 'Hector Mckeown',
     appointment_date: '2021-08-25T17:52:48.132Z',
     services: [1, 2],
     address: 'London',
     vehicle: 'FR14ERF',
     comment: 'Car does not work correctly',
     history: [],
     hasInsurance: false,
   },
   '/api/getServices': [],
   '/api/job': [],
 });
 const history = createMemoryHistory();
 const { queryByTestId } = renderComponent(history);

 await waitFor(() => {
   expect(queryByTestId('appointment-skeleton')).not.toBeInTheDocument();
 });

 expect(queryByTestId('DoneAllIcon')).not.toBeInTheDocument();

 expect(
   mocked.mock.calls.some((item) => item[0] === '/api/getInsurance/1')
 ).toBeFalsy();
});

This test checks that if we have hasInsurance: false in the response, we will not call the insurance endpoint and render the icon.

Last, we are going to test mutations in our Jobs component. The whole test case:

test('should be able to add and remove elements', async () => {
 const mockedPost = mockAxiosPostRequests({
   '/api/job': {
     name: 'First item',
     appointmentId: 1,
   },
 });

 const mockedDelete = mockAxiosDeleteRequests({
   '/api/job/1': {},
 });

 const history = createMemoryHistory();
 const { queryByTestId, queryByText } = renderComponent(
   ,
   history
 );

 await waitFor(() => {
   expect(queryByTestId('loading-skeleton')).not.toBeInTheDocument();
 });

 await changeTextFieldByTestId('input', 'First item');

 await clickByTestId('add');

 mockAxiosGetRequests({
   '/api/job': [
     {
       id: 1,
       name: 'First item',
       appointmentId: 1,
     },
   ],
 });

 await waitFor(() => {
   expect(queryByText('First item')).toBeInTheDocument();
 });

 expect(
   mockedPost.mock.calls.some((item) => item[0] === '/api/job')
 ).toBeTruthy();

 await clickByTestId('delete-1');

 mockAxiosGetRequests({
   '/api/job': [],
 });

 await waitFor(() => {
   expect(queryByText('First item')).not.toBeInTheDocument();
 });

 expect(
   mockedDelete.mock.calls.some((item) => item[0] === '/api/job/1')
 ).toBeTruthy();
});

Let’s see what is happening here.

1. We mock requests for POST and DELETE.
2. Input some text in the field and press the button.
3. Mock GET endpoint again, because we assume that POST request has been made, and the real server should send us the updated data; in our case, it’s a list with 1 item.
4. Wait for the updated text in the rendered component.
5. Check that the POST request to api/job has been called.
6. Click the Delete button.
7. Mock GET endpoint again with an empty list (like in the previous case we assume the server sent us the updated data after deleting).
8. Check that deleted item doesn’t exist in the document.
9. Check that the DELETE request to api/job/1 has been called.

Important Note: We need to clear all mocks after each test to avoid mixing them up.

afterEach(() => {
 jest.clearAllMocks();
});

Conclusion

With the help of this real-life application, we went through all of the most common React Query features: how to fetch data, manage states, share between components, make it easier to implement optimistic changes and infinite lists, and learned how to make the app stable with tests.

I hope I could interest you in trying out this new approach in your current or upcoming projects.

Resources

(vf, yk, il)