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

const { data: product_data, isLoading: loading_product_data } = useOne({
        resource: "products",
        id: router.query.id as string,
    });

const { data: product_data, isLoading: loading_product_data } = useOne({
        resource: "products",
        id: router.query.id as string,
    });

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

kapa.ai•15mo ago

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).

const { refetch } = useOne({
    resource: "products",
    id: router.query.id as string,
});

const { refetch } = useOne({
    resource: "products",
    id: router.query.id as string,
});

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: ----------------------

kapa.ai•15mo ago

<@728962295916658689> kapa.ai is still learning and improving, please let us know how it did by reacting below

ratty-blush•15mo 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/#clientconfig

correct-apricotOP•15mo ago

Thanks alott. This really helped me and fixed the issue!

Issue in Caching using refine's hooks

Did you find this page helpful?