How to use QueryClientProvider in vue 3? i can't find it on the package

[dull heron]

so guys i wan't to ask how can i use QueryClientProvider in vue 3 like react.. so i can apply inside app.vue as a wrapper, thank you

[nimble crow]

Hi,
Vue has a different convention of setting up globally accessible plugins. You can check basic example to see how it works - https://github.com/TanStack/query/blob/main/examples/vue/basic/src/main.ts

[dull heron]

Great! @nimble crow , so how can i config like in react like this

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
    },
  },
})

function App() {
  return <QueryClientProvider client={queryClient}>...</QueryClientProvider>
}

[nimble crow]

const vueQueryPluginOptions: VueQueryPluginOptions = {
  queryClientConfig: {
    defaultOptions: { queries: { staleTime: 3600 } },
  },
};
app.use(VueQueryPlugin, vueQueryPluginOptions);

If you need more docs with snippets, check this page, before it's migrated to tanstack docs - https://vue-query-next.vercel.app/#/guides/custom-client