Tanstack query not refreshing/fetching data unless I use a different browser

[plush fern]

So I'm creating an app where it fetches data from the backend using some sort of rest api. However, it seems strange that the deleted data from the database still exist from my web app.

Here are some steps I've tried:

• Invalidating query using the query client from code itself
• Tried the following methods by manually invalidating, refetching, resetting, and even removing the query key from the devtools
• Already checked the backend part of my app and confirmed that there are no existing data being fetched in the database (as in zero data) or logs in my backend app that pertains a fetching happens.

Data still exist even after doing all of these steps

This problem gets solved when I use a different browser to which the data doesn't exist anymore. However, the old browser still fetches non existent stale data like it still exist. I wonder if there are any possible causes as to why it does that

[potent onyx]

Certainly doesn't sounds like a query issue. You'd have to make a minimal reproduction in stackblitz/codesandbox

Maybe you're using a persister that's causing issues?

[plush fern]

hmm. I can't recall using persister as do not use it in as far as I can remember

is it something I should toggle off manually?

[potent onyx]

No. You have to implement a persister yourself, it's not built in

I mean, they have persisters but they aren't enabled by default

[plush fern]

yeah. I did not use it. its very hard to trace the errors as I cannot reproduce the error at all. I just use different browser to fix the issue

I mean, there is no error at all

it just persist

[potent onyx]

Sounds like an issue within your code. You'll have to reproduce a minimal reproduction to get help

[plush fern]

as for the code, here is the instance where it fetches data

export default function Leases() {
    const queryClient = useQueryClient();
    queryClient.invalidateQueries({queryKey: ['leaseList']});
    const {data, isError} = useQuery({
      queryKey: ['leaseList'],
      gcTime: 10,
      queryFn: getLeaseList});
    //code omitted...
}

however, I cannot reproduce it as it fixes when I use a different browser

[potent onyx]

That's not a reproduction. invalidateQueries should be awaited but I really don't know what you're showing in such a small snippet. This just looks like a misuse of RQ

[plush fern]

oh yeah, forgot to remove it as I tried to invalidate queries by code instead of using devtools

yeah, already tried awaiting invalidateQueries and the problem still persist

is there a way to clear tanstack query cache inside the browser? tried clearing localstorage and session storage it doesn't solve the issue

[potent onyx]

https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientclear

But it sounds like you have other problems

[plush fern]

already tried this, problem still persist on my old browser. I'm starting to think this might be a browser issue as I do not encounter this sort of problem on my other browser and on other instance of container in firefox

[potent onyx]

Doubtfully it's a browser issue or countless others would've reported it. Make a reproduction

[calm flint]

It sounds like your browser caches things based on http response headers. Check your network tab in the devtools

[plush fern]

I use firefox, upon reading the network tab. I see some of my api functions marked as cached. although tbh, I really can't tell if my browser caches things based on http response headers as I rarely use network tab

this screenshot for instance. it says my api call getleaselist is cached. I apologize but I don't know if this one is the culprit as I'm still new to web dev.

[calm flint]

If the browser devtools show it as cached it is because of http response headers. This has nothing to do with react query

[plush fern]

I see. it finally works after deleting my browser cache thank you very much!!

I just wanted to ask if there is some sort of workaround to prevent this kind of issue as I wanted my web app to work across all browsers

[calm flint]

the backend sets the http headers