Slides de ma conférence React Query au Camping des Speakers (9 juin 2022)

1. Le server state facile pour React
Camping des Speakers – 9 juin 2022

2. Olivier THIERRY
Expert technique chez ASI
OThierryBzh
www.asi.fr
ASI_Informatic

3. C’est quoi le
server state ?
• Synchroniser des données (REST, GraphQL,
…) entre le front et le back
• Connaître l’état de ces requêtes
• Mettre en cache les données récupérées
• Rafraîchir ces données
• Mettre à jour les données sur le serveur
• Jusqu’ici souvent implémenté par des
librairies de « global state » comme Redux

4. React Query : des hooks pour gérer le server state

5. Query Client Provider

6. Hook « useQuery »

7. Custom Hook + staleTime

8. Clés composées

9. Hook « useMutation »

10. Hook « useQueryClient » et invalidation de cache

11. Autres
fonctionnalités
de React
Query
• Requêtes paginées, « load more » et
« infinite scroll queries »
• Requêtes en parallèle et requêtes
dépendantes
• Annulations de requêtes
• Refetch automatique (en tâche de fond) /
Refetch on window focus
• Optimistic Updates
• Scroll Restoration
• Devtools dédiés (React Query Devtools)

12. Bilan de
React Query
• Une librairie simple à appréhender et à
utiliser
• Une expérience utilisateur au top !
• Tout est configurable !
• Mais ça ne fonctionne que sur React / React
Native et qu’avec des hooks
• React Query ne remplace pas une librairie de
global state pour certains besoins

13. Alternatives à
React Query
• SWR : https://swr.vercel.app/
• Apollo Client :
https://www.apollographql.com/apollo-client
• Relay : https://relay.dev/
• RTK Query : https://redux-toolkit.js.org/rtk-
query/overview

14. Ressources
• https://react-query.tanstack.com/
• https://tkdodo.eu/blog/practical-react-
query
• https://github.com/chawax/react-query-
demo

15. Merci !
Des questions ?