Refetching data takes too slow

[Whooolia]

I am fairly new to react-query so any help would be appreciated!

We have a drop-down menu that you can change the year. Let's say the default one is 2020-21 and then you changed to 2021-22 . It does fetch the data (can see loading icon, and fetching data quickly) which is good. The problem comes next. When I go back to 2020-21 which It has been loaded before, it takes too long to load the data. I checked the network tap, it says pending for a while. Same again, now if I want to go back 2021-22 for the 2nd time, it takes ages to load the data.

I use financialYearID as one of the variables, so it should know that it has been changed. what I found is when you revisit the financial year, the status goes straight to success instead of loading. Also, it seems it doesn't know the variables(financialyear) has been changed.

Again, when you select a new financial year for the first time, it is fine. then when you revisit where you have been, it takes so long to see the data so it looks like the app crashed.

1. when the financial year has been changed, sections should be updated, and this is the call for sections.

export interface SectionVariables {
  financialYearId: string
  tagIds: string[]
  sectionIds: string[]
  subSectionIds: string[]
  brandIds: string[]
}

const useSectionsData = (
  variables: SectionVariables,
  options: QueryConfig<SectionsQueryResponse>
) => {
  return useQuery<SectionsQueryResponse, Error>(
    [KEY, { ...variables }],
    async () => request(endpoint, GET_SECTIONS, variables),
    {
      ...config,
      ...options,
    }
  )
}```

[TkDodo]

what I found is when you revisit the financial year, the status goes straight to success instead of loading.

This is intended. Since you have data in the cache available, react query will show that stale data while doing a background refetch. The isFetching flag should be true, but the status is success.

I checked the network tap, it says pending for a while.

I don’t think this is anything react query has control over. It just expects something that returns a promise really. Have you checked the backend for any issues? You can also sub out your requests and just return Promise.resolve(someData) to test if the issue persists. If it does, a codesandbox example would be good to analyze it further.

[Whooolia]

Thank you again! yes, that's how I understood too, it will show the cached one and then display new data when they arrive, and that's the beauty of using cached one.

However, for me, when I select '2021-22' and go back to '2020-21' (which might be cached so I can see the status is a success right away) the website is just frozen... does anyone reported that they have this kind of experience?

I added

useEffect(() => {
  console.log(financialYearId)
}, [financialYearId])

when it revisits 2020-21 it doesn't log right away - it frozen - and a few minutes later it knows the financialYear has been changed and call. I feel like this is something relevant to variables instead network.

Thanks again!

[TkDodo]

I can only imagine the rendering the data is very expensive, but I can’t really tell. You can use the react profiler to find out what’s causing this. Again, mocking the data/network to a small sample might help narrow it down. If you can, create a codesandbox that reproduces the issue, I’m happy to take a look.

[Whooolia]

Thank you for your time again, will retry as you suggested!

[Whooolia]

@TkDodo just one last question regarding this while we are investigating. If that happens because rendering the cached data is too expensive, is there a way that I could prevent caching and just fetch the new data every time?

[TkDodo]

If you set cacheTime to 0, the data will be removed from the cache once all components that use it unmount.

But I really doubt that would make a difference. It doesn’t matter if you render data “from the cache” or if it’s the data directly from the server...