How to add custom data/config/state to a request?

[ACoolmanBigHealth]

ℹ️ Code below is basically pseudocode, as I'm only vaguely familiar with API

Problem

We would like to show a global loader for some requests, and not for others.

Ideally, we would like to decide at the invocation of the request

Then later we can somehow determin if anything that was marked as "show loader"

const GlobalLoader = () => {
   const fetchesThatShowLoader = useFetchesThatShowLoader()
   return fetchesThatShowLoader.length ? <Loader /> : null
}

Conceptually, we are adding more UI state to the request config

Option 1: add information to the queryKey

We could add isHideLoader "param" to queryKey (which is scrubbed by queryKeyHashFn)

userQuery({
  ...requestConfig,
  queryKey: queryKey => 'get_users?isLoader=${isLoader}`
  queryKeyHashFn: queryKey => queryKey.split('?')[0] // ignore params
});

So later we could do

  const fetchingCount = useIsFetching({
    predicate: queryMeta => {
      const { queryKey } = queryMeta;
      return getParam(queryKey, 'isLoader');
    },
  });
  

This seems elegant, but perhaps there is some fragility I'm missing

Question: Is this "overloading" the concept of queryKeys in a non-idiomatic way?

Option 2: Maintain new state, using onSettled

Or alternatively, we could wrap useQuery and use its handlers

import useQuery from 'react-query';
import store from './store';

export const useQuery = (request, params) =>  {
   const { isLoader } = params;
   if (isLoader) {
      store.add(request.queryKey);
   }

   return useQuery({
    ...request,
    onSettled: (...args) => {
       request.onSettled(...args);
       if (isLoader) {
           store.remove(key => request.queryKey);
       }
    },
  });
}

Question: Is either of these the "best"? or is there some other option I'm missing?

[TkDodo]

I think using the queryKey is an okay approach because useIsFetching can nicely filter by it. But maybe there are better indications instead of adding a flag to it? I'm sure there are some business requirements behind which query should show a loader and which not. Having these requirements in the queryKey and then filtering for it sounds better, like: I want all my profile related queries to show a loading spinner, but all my todoList related queries should not. If you mark it with a flag, you need to look into each query to see which one has the flag and which one doesn't, which makes the useIsFetching harder to reason about.