consider useIsfetching to provide information of query as well

[dipeshwalia]

Hi

Is it possible to add more options for useIsfetching hook, especially to know the details for the requests that are currently being fetched ?

[jgettings]

I would be interested in something like this as well, I wound up making my own custom hook in my own project so that I could basically filter useIsFetching by query keys, but it's a little clunky.

For my use case, I have a loading spinner that shows for a section of the page if any of the queries inside of it are currently fetching, so I need to know if A or B are fetching, but I don't care about C.

const useIsFetchingForKeyNames = (queryKeys: Array<string>): boolean => {
const [isFetching, setIsFetching] = useState(false);
const queryCache = useQueryCache();

useEffect(() => queryCache.subscribe((cache) => {
    const relevantQueries = cache.getQueries((query) => query.queryKey
        && queryKeys.includes(query.queryKey[0] as string));

    const anyFetching = relevantQueries.some((query) => query.state.isFetching);

    setIsFetching(anyFetching);
  }), []);

  return isFetching;
};

Note, this is actually filtering by the "key name" since one of these queries has parameters and I only care if the "evaluations" query is fetching, not if "evaluations?thing=whatever" specifically is fetching, if that makes sense, that's why there's the awkward thing checking against query.queryKey[0], I only care about the first thing in the array that makes up the key. That part probably doesn't translate well to other implementations and would have to be rethought, but it works for me.

So, the subscribe method on queryCache is useful here, but it'd be interesting to see other use cases and figure out if there is a cool way to extend useIsFetching to do more stuff like you're saying.