Afficher instantanément des données serveur avec Vue Query
Comment améliorer l’affichage de données serveur dans une app Vue.js en utilisant le cache ?
La librairie Vue Query (version de TanStack Query pour Vue.js) permet de mettre en cache facilement des données serveur et de les afficher instantanément.
Le résultat est un affichage instantané lors de la visite d'une page et pendant une mutation de données.
On utilise souvent une librairie de gestion d’état comme Pinia ou Vuex, efficace pour les données client, un peu moins pour les données serveur asynchrones.
La librairie TanStack propose les composables useQueryClient, useQuery et useMutation permettant ainsi d’afficher (à partir de la deuxième visite) et de mettre à jour les données serveur sur l’interface de façon très fluide.
useQuery : lire et mettre en cache
Dans useQuery :
queryKeyest un tableau qui permet d’identifier les résultats mis en cache pour cette query.staleTimeindique pendant combien de temps (60 sec par ex.) les données sont considérées comme « fraîches », et donc pendant combien de temps ce cache est utilisé pour l’affichage des données.refetchIntervalpermet de relancer automatiquement la même query à intervalle régulier.
useMutation : mettre à jour et invalider
useMutation permet de gérer les mutations des données serveur avec invalidateQueries, qui déclenche un re-fetch des données.
L’optimistic update
useMutation permet aussi un « optimistic update » : lors d'un update, on anticipe la nouvelle valeur des données serveur en éditant le cache immédiatement et en l'affichant. La query mettra à jour les données en arrière-plan une fois résolue.
Pour cela, on utilise la fonction setQueryData dans le callback onMutate.
