Can't access to the cached data

[RomainoSoko]

Hi !

Maybe I missed something in the doc, but I can't seem to get the cached queries with the "find" method from queryCache

eg:

const queryCache = new QueryCache({
  onError: (error) => console.log('cache error', error),
  onSuccess: (data) => console.log('cache success', data),
});

const query = queryCache.find(['key']);

In query const, the value is always undefined.

Do you have an idea? Thanks !

[DamianOsipiuk]

First question would be, if you want to access your data from a Vue component or somewhere else?

If component is the answer, just use useQuery. You can use it in multiple components and all requests with the same queryKey will be automatically deduplicated and cached data reused.

If somewhere else is the answer, you should create QueryClient on your own, before providing it to the VueQueryPlugin

const myClient = new QueryClient(queryClientConfig);
const vueQueryPluginOptions: VueQueryPluginOptions = {
  queryClient: myClient,
};
app.use(VueQueryPlugin, vueQueryPluginOptions);

and then access your queries via myClient.getQueryData (https://tanstack.com/query/v4/docs/reference/QueryClient#queryclientgetquerydata) or access QueryCache if you really need to via myClient.getQueryCache (https://tanstack.com/query/v4/docs/reference/QueryClient#queryclientgetquerycache)

[RomainoSoko]

In fact, I was using it outside a component to access a cached data. What i was doing was to create a queryCache myself instead of using the cache from the default client (like below) --'.

Thank you very much !

[keithrz]

THIS is the code I have been searching for!!!

const myClient = new QueryClient(queryClientConfig);
const vueQueryPluginOptions: VueQueryPluginOptions = {
  queryClient: myClient,
};
app.use(VueQueryPlugin, vueQueryPluginOptions);

I don't see any documentation on what kind of options you can have for VueQueryPlugin, either in this repo's README or in the docs at the TanStack site. Would it be possible to get some documentation on VueQueryPlugin options added to TanStack docs?

Now that I know that the plugin actually has options, I've found more info in the TypeScript types for VueQueryPlugin. I can simplify that example a bit:

app.use(VueQueryPlugin, { queryClientConfig });

[DamianOsipiuk]

@keithrz I think you are looking for these pages: https://tanstack.com/query/latest/docs/vue/guides/custom-client https://tanstack.com/query/latest/docs/vue/reference/QueryClient

[keithrz]

That first link is exactly what I was looking for. Thank you very much, @DamianOsipiuk !

On Wed, Aug 30, 2023 at 3:23 PM Damian Osipiuk @.***> wrote:

@keithrz https://github.com/keithrz I think you are looking for these pages: https://tanstack.com/query/latest/docs/vue/guides/custom-client https://tanstack.com/query/latest/docs/vue/reference/QueryClient

— Reply to this email directly, view it on GitHub https://github.com/DamianOsipiuk/vue-query/issues/223#issuecomment-1699786900, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAJGKL3W3P7LKEQ6YQZ5LSLXX6OK3ANCNFSM55HSQKJQ . You are receiving this because you were mentioned.Message ID: @.***>