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"] })
}