foreign-sapphire

How can I tell if my query cache is being used successfully?

How can I tell if my query cache is being used successfully? If I set a staleTime of 60 minutes I still see it taking 110ms to complete if I navigate to another page/route and then come back (or just refresh the page). Is it only saving me if my javascript on the same page was going to request again on some timer or does it save me on page loads like this?

const isAuthenticatedQuery = useQuery({
        queryKey: ['auth'],
        queryFn: async () => {
            const result = AuthenticationUtilities.isAuthenticated();
            return result;
        },
        staleTime: 60 * 60 * 1000, // 60 minutes
    });

const isAuthenticatedQuery = useQuery({
        queryKey: ['auth'],
        queryFn: async () => {
            const result = AuthenticationUtilities.isAuthenticated();
            return result;
        },
        staleTime: 60 * 60 * 1000, // 60 minutes
    });

15 Replies

fair-rose•2mo ago

The simplest way if your queryFn involves fetch calls or XHR is to look at your browser's network.

foreign-sapphireOP•2mo ago

So I was looking at my browser’s network in F12 console and it appears like it is always querying again. So how can I debug why it isn’t working? I was going to try and manually interact with the query cache after the first query is done to see how it is describing those. I just wish there was a way within debugging sessions to set an environment variable and tanstack query would describe what it is doing. I’ll try and debug today.

adverse-sapphire•2mo ago

You can always subscribe to the query cache and log all events

foreign-sapphireOP•2mo ago

Seems easy enough to setup. Let me try, thanks! OK, I'm not seeing the cache subscriber show any events And even when I'm following a tutorial online and it doesn't seem to utilize the cache at all And if I'm looking at the debugger immediately after it is calling my function isStale is set to true

adverse-sapphire•2mo ago

sorry this isn't helping. show a reproduction please ?

foreign-sapphireOP•2mo ago

Let me try and get a repo with a repro spun up

foreign-sapphireOP•2mo ago

https://github.com/etriebe/vite-template

GitHub

GitHub - etriebe/vite-template: Mantine + Vite template

Mantine + Vite template. Contribute to etriebe/vite-template development by creating an account on GitHub.

foreign-sapphireOP•2mo ago

OK, that template should repro

foreign-sapphireOP•2mo ago

I see the API call to github constantly when I click refresh

adverse-sapphire•2mo ago

click refresh where?

foreign-sapphireOP•2mo ago

There's a refetch button there But also I was initially curious if I click refresh on the browser does the cache persist between page loads? I'm unsure how tanstack-query is storing the cache under the hood. I'm assuming it wouldn't work between page loads but theoretically it could.

adverse-sapphire•2mo ago

The cache is in memory. Look at persisters for persistence That button calls refetch returned from useQuery which will unconditionally fetch

foreign-sapphireOP•2mo ago

So why is that, though? Because it is calling refetch? It's possible this video is incorrect, but following almost this exact sort of model it looked like having a refetch button like this wouldn't unconditionally refetch. https://youtu.be/mPaCnwpFvZY?t=501

Austin Davis

YouTube

TanStack Query - How to become a React Query God

Are you tired of wrestling with useEffect and manual data fetching in React? Writing multiple pieces of state for one query and having to follow weird practices to get your query to work correctly? In this video, I’ll show you how to leave those frustrations behind and level up your querying game using TanStack Query. We’ll dive straight in...

foreign-sapphireOP•2mo ago

Obviously not official documentation but just following along and it looks pretty close to what documentation says on tanstack's official site I'm looking into persisters, though OK, Persisters do exactly what I want I'm seeing it persist across page loads

Gaming

Programming

How can I tell if my query cache is being used successfully?

Did you find this page helpful?