Slides de ma conférence sur TanStack Query / React Query au JUG SummerCamp de La Rochelle le 9 septembre 2022.

1. Le server state facile avec
React TanStack Query

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

5. Démo !

6. Query Client Provider

7. Hook « useQuery »

8. Custom Hook + staleTime

9. Clés composées

10. Hook « useMutation »

11. Hook « useQueryClient » et invalidation de cache

12. Autres
fonctionnalités
de TanStack
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
• Persistence
• Devtools dédiés (React Query Devtools)

13. Bilan de
TanStack
Query
• DX : une librairie simple à appréhender et à
utiliser pour les développeurs
• UX : des gains en performances ressenties et
en confort d’utilisation
• Tout est configurable !
• Ne fonctionne que sur React / React Native
(pour l’instant !) et qu’avec des hooks
• TanStack Query ne remplace pas une
librairie de global state pour certains besoins

14. Alternatives à
TanStack
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

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

16. Merci !
Des questions ?