T
TanStack•3y ago
fascinating-indigo

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

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
4 Replies
absent-sapphire
absent-sapphire•3y ago
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
fascinating-indigo
fascinating-indigoOP•3y ago
Great! @MrMentor , 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>
}
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
    },
  },
})

function App() {
  return <QueryClientProvider client={queryClient}>...</QueryClientProvider>
}
absent-sapphire
absent-sapphire•3y ago
const vueQueryPluginOptions: VueQueryPluginOptions = {
  queryClientConfig: {
    defaultOptions: { queries: { staleTime: 3600 } },
  },
};
app.use(VueQueryPlugin, vueQueryPluginOptions);
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
fascinating-indigo
fascinating-indigoOP•3y ago
Got it, thank you @MrMentor

Did you find this page helpful?