isLoading and isFetching from useQuery are different from useIsFetching

[hoon0422]

While I work on my project using useIsFetching, I found a weird result with useQuery and useIsFetching. It seems isLoading and isFetching from useQuery are different from isLoading and isFetching from useIsFetching. Here is codesandbox link: https://codesandbox.io/s/beautiful-volhard-5scsrv?file=/src/App.js

For your convenience, here is code snippet in the above link:

function Child() {
  const { isLoading, isFetching } = useQuery({
    queryKey: ["querykey"],
    queryFn: async () =>
      new Promise((res) => {
        console.log("start fetching");
        setTimeout(() => {
          console.log("fetched");
          res("data");
        }, 3000);
      })
  });
  const isLoadingFromHook = useIsFetching({
    queryKey: ["querykey"],
    predicate: (query) => query.state.status === "loading"
  });
  const isFetchingFromHook = useIsFetching({
    queryKey: ["querykey"]
  });

  useEffect(() => {
    console.log({
      isLoading,
      isFetching,
      isLoadingFromHook,
      isFetchingFromHook
    });
  }, [isLoading, isFetching, isLoadingFromHook, isFetchingFromHook]);

  return <div>Child</div>;
}

And the logs are:

start fetching 

{isLoading: true, isFetching: true, isLoadingFromHook: 0, isFetchingFromHook: 0}

{isLoading: true, isFetching: true, isLoadingFromHook: 0, isFetchingFromHook: 0}

{isLoading: true, isFetching: true, isLoadingFromHook: 1, isFetchingFromHook: 1}

fetched 

{isLoading: false, isFetching: false, isLoadingFromHook: 0, isFetchingFromHook: 0}

As you can see, there are some cases that isLoadingFromHook and isFetchingFromHook is 0 even if isLoading and isFetching is true. Is this expected?

[TkDodo]

useQuery "optimistically" gets you into loading / fetching state when it knows that it will trigger a fetch "soon". E.g. on the first render, we give you back fetching: true even though we haven't fetched yet, as this has to happen in an effect under the hood.

If we wouldn't do that, every place where you had useQuery would give you back a render where fetching would be false, followed by an immediate one where fetching is true.

The useIsFetching hook on the other hand cannot do that because it doesn't have that information.

isLoadingFromHook is also 0 because useIsFetching implicitly checks for fetching state :)

So it's kinda intended. Hope that explains it :)

[seiyab]

Thanks for detailed explanation. It makes sense.
Then, is there a good way to know that there is no query fetching nor waiting fetch?