1

I recently started using react-query and have encountered the issue that always stale data is returned and no call to server is made. here is the react query related code:

export function useGetAccount(id: number){
    return useQuery([`account${id}`, id], async (args) => {
        const [key, accountId] = args.queryKey

       

        const [acc, teams, modules] = await Promise.all([
            getAccount(),
            getTeams(),
            getModules()])

        let account: AccountDetail = {
            accountId: acc.accountId,
            userId: acc.userId,
            companyId: acc.companyId,
            login: acc.login,
            email: acc.email,
            description: acc.description,
            isActive: acc.isActive,
            providers: acc.providers,
            teams: teams,
            modules: modules
        }

        return account

        async function getAccount() {
            const api = createApi()  // <= axios wrapper
            const { data } = await api.get(`accounts/${accountId}`, undefined, undefined)
            return data as AccountModel
        }

        async function getTeams() {
            const api = createApi()
            const { data } = await api.get(`accounts/${accountId}/teams`, undefined, undefined)
            const { collection } = data as ResponseCollectionType<AccountTeam>
            return collection
        }

        async function getModules() {
            const api = createApi()
            const { data } = await api.get(`accounts/${accountId}/resources`, undefined, undefined)
            const { collection } = data as ResponseCollectionType<ModuleAccessModel>
            return collection
        }
    })
}

I even reduced the cache time but still to no avail. I do not see any calls made to server side except after a long delay or if I open the browser in incognito mode then first time the data is fetched and then no call is made.

this is used in a component which shows the details and is passed the id as a prop. everything is working fine except that the data is the one which was retrieved first time and even a refresh (F5) returns the stale data.

what changes do I need to make in this case?

[observation]: Ok, it does make a call but only after exact 5 minutes.

Simple Fellow
  • 4,315
  • 2
  • 31
  • 44

1 Answers1

0

well the problem is not in react-query but in axios, described here Using JavaScript Axios/Fetch. Can you disable browser cache?

I used the same solution i.e. appending timestamp to the requests made by axios and everything worked fine.

Simple Fellow
  • 4,315
  • 2
  • 31
  • 44
  • this seems like the correct answer. if caches persist after a browser refresh, react-query is not involved because the cache is in-memory only. you should still see the request in the browser devtools, and it should show you that the response comes from the browser cache. Generally, that is a good thing! If you use the github public api for example, it will give you cached results for 60 seconds as well. – TkDodo Jan 03 '22 at 12:15
  • not working.... – Trần Quốc Vũ May 25 '22 at 04:21
  • then it's a different problem – Simple Fellow May 26 '22 at 07:16