deckardger/tanstack-query-best-practices

Que fait tanstack-query-best-practices ?

Meilleures pratiques de TanStack Query (React Query) pour la récupération de données, la mise en cache, les mutations et la gestion d'état serveur. S'active lors de la création d'applications React axées sur les données avec un état serveur.

Requêtes

• Utilisez useQuery pour les opérations de lecture de données.
• Définissez des clés de requête (queryKey) de manière cohérente (par exemple, ['posts', postId]).
• Configurez les paramètres de cache (staleTime, cacheTime) en fonction de la fréquence de mise à jour des données.

Mutations

• Utilisez useMutation pour les opérations d'écriture (création, mise à jour, suppression).
• Invalidez les requêtes associées avec invalidateQueries après une mutation réussie pour rafraîchir l'interface.
• Implémentez des mises à jour optimistes pour une meilleure expérience utilisateur.

Gestion des erreurs

• Gérez les erreurs de requête et de mutation avec les propriétés isError et error.
• Utilisez le hook onError pour des actions personnalisées en cas d'échec.

Configuration avancée

• Personnalisez le QueryClient pour des options globales comme retry et refetchOnWindowFocus.
• Utilisez des sélecteurs (select) pour transformer les données extraites.
• Employez des requêtes parallèles et dépendantes pour des cas d'utilisation complexes.

Ressources

• Documentation officielle : TanStack Query
• Exemples de React Query : React Query Examples