isFetching for one section of a page

[jamesarosen]

I'm trying to add an "is fetching" indicator to each of three separate sections of a page. The idea is that if any query within that section has isFetching: true, the indicator next to that section shows up.

Reading #3339, I know one option would be to add a predicate to isUseFetching:

function SectionOne() {
  const isFetching = useIsFetching({ predicate: query => ['foo', 'bar'].includes(query.key) });

  <section>
    <IsFetchingIndicator isFetching={isFetching} />
    <h1>Section 1</h1>
    <ThingThatFetchesFoo />
    <ThingThatFetchesBar />
  </section>
}

function SectionTwo() {
  const isFetching = useIsFetching({ predicate: query => ['bar', 'baz'].includes(query.key) });

  <section>
    <IsFetchingIndicator isFetching={isFetching} />
    <h1>Section 2</h1>
    <ThingThatFetchesBar />
    <ThingThatFetchesBaz />
  </section>
}

The downside to this is that I need to know that foo and bar are the keys used in Section One, while bar and baz are used in Section Two. It's not automatic, so it will get out of sync as the sections change.

My second idea was to use separate query-providers for each section:

function SectionOne() {
  const [queryClient] = useState(() => new QueryClient);
  
  <QueryClientProvider client={queryClient}>
    <section>
      <IsFetchingIndicator />
      <h1>Section 1</h1>
      <ThingThatFetchesFoo />
      <ThingThatFetchesBar />
    </section>
  </QueryClientProvider>
}

With this, I don't need to maintain the predicate for each section. The downside is that I've disconnected my caches. Section One and Section Two now fetch the same data independently.

I can give them the same cache object (or use nested QueryProviders), but since QueryClient implements isFetching in terms of queryCache, I'd end up with the original problem: if any query were fetching, all sections would light up.

Has anyone done something like this?

[TkDodo]

yeah, you've analyzed the trade-off pretty well. You can't have your cake and eat it, too. Choose your poison: separate caches or specifying keys :)