How to tell if it's the first time a query is fetching data?

[aryzing]

How to tell when a query has switched to fetchStatus === 'fetching' for the first time?

The idea here is to display a spinner only on the first time the query attempts to fetch data. Regardless of whether it fails or succeeds, the UI should remain unchanged when the query fetches again. This seems to be tricky if the query fails and its status is set to error on its first try, as subsequent fetches will set the status back to loading.

I tried isInitialLoading, which sounded promising, but turns out that if the first request fails and data isn't loaded, subsequent requests will again set isInitialLoading to true.

So, how to tell when a query is fetching for the first time?

I've noticed there's a failureCount prop: would we need to do something like isInitialLoading && failureCount === 0 to detect when a query is fetching for the first time?

[TkDodo]

I tried isInitialLoading, which sounded promising, but turns out that if the first request fails and data isn't loaded, subsequent requests will again set isInitialLoading to true.

that is the expected behaviour. When the query errors, it has no data. The next time you try to use the query, it will be in loading state because it has no data to show.

would you like to keep showing the error while the query is loading?

[aryzing]

would you like to keep showing the error while the query is loading?

So the objective is to show the most up to date data possible, or the "empty" state if no data is available. However, only the first loading/fetching of data should trigger the loading spinner. Subsequent requests should not alter the UI while fetching (eg, no spinners are shown after the first successful fetch), only when new data is received. Errors should be displayed from the moment they occur to the moment the next successful fetch completes

[TkDodo]

so failureCount is not the right prop to listen to, because it will be incremented with every retry, and then go back to zero when there is a successful fetch. errorUpdateCount is what you likely want to check. We also have an internal dataUpdateCount that we are currently not exposing, but might do in the future.