hook for Background Fetching Loading States similar to useIsFetching

[FranciscoGileno]

Thanks for the awesome crazy lib.

I noticed there is a hook called useIsFetching which gives you the number of requests being fetched.

I wonder if there is a way to have a simular hook only with the requests that are running in backend(Displaying Background Fetching Loading States).

I just had a look at the useIsFetching code, and it is pretty straight forward... I mean something like this:

import React from 'react'

import { useQueryCache } from './ReactQueryCacheProvider'
import { useIsMounted } from './utils'

export function useIsBackgroundFetching(): number {
  const isMounted = useIsMounted()
  const queryCache = useQueryCache()
  const [isBackgroundFetching, setIsBackgroundFetching] = React.useState(queryCache.isFetching && !queryCache.isLoading)

  React.useEffect(
    () =>
      queryCache.subscribe(() => {
        if (isMounted()) {
          setIsBackgroundFetching(queryCache.isFetching && !queryCache.isLoading)
        }
      }),
    [queryCache, setIsBackgroundFetching, isMounted]
  )

  return isBackgroundFetching
}

I can't do this on my project since react-query does not export useIsMounted.

[StasSemak]

I run into similar issue, using react-query v5, so I created a workaround based on original useIsFetching code to track only background fetching. Here it is:

import { QueryClient, QueryFilters, notifyManager, useQueryClient } from "@tanstack/react-query";
import React from "react";

export function useIsBgFetching(
  filters?: QueryFilters,
  queryClient?: QueryClient,
): number {
  const client = useQueryClient(queryClient)
  const queryCache = client.getQueryCache()

  return React.useSyncExternalStore(
    React.useCallback(
      (onStoreChange) =>
        queryCache.subscribe(notifyManager.batchCalls(onStoreChange)),
      [queryCache],
    ),
    () => client.getQueryState(filters?.queryKey ?? [""])?.status !== "pending" ? client.isFetching(filters) : 0,
    () => client.getQueryState(filters?.queryKey ?? [""])?.status !== "pending" ? client.isFetching(filters) : 0,
  )
}

Might be not the best or the most optimal solution, but works fine in my case, and may be useful for somebody.
Also, worth mentioning that this approach is focused on tracking only one query and not useful if you need info about all queries in your app.

[TkDodo]

FYI, useIsFetching already takes filters, and you can narrow this to status: 'pending':

useIsFetching({
  // if we have data and are fetching, it means a background refetch
  predicate: (query) => query.state.data !== undefined
})

[StasSemak]

Oh, thanks, this would be so much better solution!