Web / TanStack Interview Questions
How do you set up TanStack Query in a Vue application?
Create a QueryClient once in main.ts and register it via VueQueryPlugin. The client holds the cache and default options, and is accessible in any component via useQueryClient().
// main.ts import { createApp } from "vue" import { VueQueryPlugin, QueryClient } from "@tanstack/vue-query" import App from "./App.vue" const queryClient = new QueryClient({ defaultOptions: { queries: { staleTime: 1000*60*5, // 5 min fresh gcTime: 1000*60*10, // 10 min in cache after unmount retry: 2, refetchOnWindowFocus: true, }, }, }) createApp(App).use(VueQueryPlugin,{queryClient}).mount("#app") // Any component import { useQueryClient } from "@tanstack/vue-query" const qc = useQueryClient() async function save(){ await saveUser(form) await qc.invalidateQueries({ queryKey:["users"] }) }
More Related questions...