useQuery's isFetching vs isLoading

[gerhardsletten]

After upgrading to v3 we experience that isFetching returned true in SSR render even though the the data was prefetched, and it created react hydration error because of difference between server and client render. Also checking for data fixed it:

const {data, isFetching} = useQuery(xx)
if ( isFetching && !data) {
  return <p>loading</p>
}
return <p>{data.message}</p>

But looking in the docs, there is now also a isLoading bool, and using that worked:

const {data, isLoading} = useQuery(xx)
if ( isLoading) {
  return <p>loading</p>
}
return <p>{data.message}</p>

Would expect that isFetching and isLoading should be equal.

[TkDodo]

Would expect that isFetching and isLoading should be equal.

isLoading is one of the "states" that a query can be in (loading, idle, error, success). Loading means: there is no data yet, so I'm loading. Usually used to show a big loading spinner where you would otherwise show data.

isFetching is a boolean flag that is always true whenever any request for that query is in-flight, and it's separated from the internal state-machine. So you can be in success state, but still be fetching. This happens for background refetches for example.

Hope that explains the difference between the two flags.

[gerhardsletten]

@TkDodo Thanks, yes the use case is to display a loading-spinner when content need to be loading in client-mode, but I would expect that isFetching was false in the server-render when content was prefetched. It used to work that way in version 2.x

In the migration notes to v3 is saying:

QueryCache.isFetching has been moved to QueryClient.isFetching()

But changes in isFetching bool from useQuery is not mentioned, so I was expecting it to work as it did in version 2.x