Distinguishing between different refetches

[vezaynk]

Let's say I have a few queries. One to query a person basic details, and the rest for additional information. I want to display it all in a single page, and have it implemented like this:

const usePerson = (id) => useQuery(["people", id], ...);
const useExtraInfo1 = (id) => useQuery(["people", id, "extraInfo1"], ...);
const useExtraInfo2 = (id) => useQuery(["people", id, "extraInfo2"], ...);

At the top of my page, I have a "refresh" button, which shows a spinner while it's refreshing. I have it implemented it like this:

const isFetching = useIsFetching(["people", id]) > 0;
<Button showSpinner={isFetching} disabled={isFetching} onClick={doRefresh}>Refresh</Button>

My doRefresh works by invalidating all of the data in its data domain:

const doRefresh = () => invalidateQueries(["people", "id]);

This works well.

However, the data returned from useExtraInfo1 changes frequently. Much more so than the rest. So I make it refresh by itself automatically:

const useExtraInfo1 = (id) => useQuery(["people", id, "extraInfo1"], ..., {
   staleTime: 5_000 // invalidate & refresh every 5 seconds
});

This works. However, anytime it refetches, it shows the spinner and disables the refresh button which suggests that the whole person refreshes, which is not the case.

What can I do to distinguish automatically scheduled refetches from user-requested refetches?

One idea could be to match ["people", id] exactly and nothing else when checking for isFetching. However, this may become misleading if the query associated with ["people", id] takes significantly faster to complete than the rest, causing the appearance of a desynchronized UI. It's not the worst option, but I'd love to hear if anyone has any better ideas.

PS: I wrote all the code in the GitHub editor, sorry for any syntax errors.

[TkDodo]

What can I do to distinguish automatically scheduled refetches from user-requested refetches?

There is no way to do that currently. A fetch is a fetch and there is no indicator of who or what triggered it.

You can omit fetches for extraInfo1 by excluding it with a predicate function though:

useIsFetching({
  queryKey: ["people", id],
  predicate: (query) => query.queryKey[2] !== 'extraInfo1'
}) > 0;