Issue in Caching using refine's hooks
Caching isn't probably working as intended in refine's hooks. I am using the hook useOne as shown below
Firstly, there is no way to set a unique name to product_data like associating it with the product id just like in React Query.
Secondly, when I try to change to another page and then come back to this show product page, these get requests are made again. There is no caching.
Thirdly, I also wanted to suggest refine.dev's developers to make the product_data (on in general the key, to be accessible like a context just like React Query does.
4 Replies
Hi @ethix. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Refine uses TanStack Query (https://tanstack.com/query) under the hood for managing state and caching. The
useOne
hook is an extended version of TanStack Query's useQuery
that supports all of its features and adds some more. It uses the getOne
method as the query function from the dataProvider
which is passed to <Refine>
. It also uses a query key to cache the data. The query key is generated from the provided properties. You can see the query key by using the TanStack Query devtools (source (https://refine.dev/docs/core/hooks/data/use-one)).
If you're experiencing issues with caching, it might be due to how the useOne
hook is being used. When the properties passed to useOne
are changed, the hook will trigger a new request. This could be why you're seeing new GET requests when navigating back to the product page.
As for associating a unique name with product_data
, the useOne
hook doesn't directly provide a way to do this. However, you could potentially manage this in your own state or context.
Regarding your suggestion to make the product_data
accessible like a context, you might want to consider opening an issue or feature request on the Refine GitHub repository (https://github.com/pankod/refine). The developers are usually responsive to community feedback and suggestions.
If you want to manually trigger a refetch of the data, you can use the refetch
function returned by the useOne
hook as mentioned in this GitHub comment (https://github.com/refinedev/refine/issues/1737).
You can call refetch()
whenever you want to refresh the data.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@728962295916658689> kapa.ai is still learning and improving, please let us know how it did by reacting below
correct-apricot•9mo ago
Hello @ethix ,
Actually, this is the behavior of TanStack Query, not Refine.
By default, we can explain the behavior of TanStack Query simply as follows:
cahceTime: 5 minutes
, cahceTime: 0 minutes
by default.
whatever happens, useQuery sends a request, but if the cache time has not expired, it first shows the available data and then revalidates it. if the cache time has expired, it shows the result directly from the request.
If you want it not to make requests within certain intervals, you can increase the staleTime
You can set staleTime globally or individually for each hook with queryOptions
for more information about caching: https://tanstack.com/query/latest/docs/react/guides/caching
queryClient usage in Refine: https://refine.dev/docs/core/refine-component/#clientconfigforeign-sapphire•9mo ago
Thanks alott. This really helped me and fixed the issue!