how can one get all live (active) queries?

[rfmiotto]

Hi,

I am trying to get the live queries from cache, but I couldn't find a proper way to do it. The method findAll from QueryCache return an empty array. I don't see a reason for returning an empty array. Wouldn't it be better if the findAll method returns all living queries?

Attempt to get the live queries:

If one writes:

const { queries } = queryClient.getQueryCache();

console.log(queries)

it is possible to see that some queries exist, like shown in the image below:

This approach for obtaining the live queries, however, is not acceptable. According to Typescript, the property 'queries' is private and only accessible within class 'QueryCache'.

However, as mentioned before, I couldn't find a way to do that. For instance:

const queryCache = new QueryCache();

const active1 = queryCache.findAll();  // returns []
const active2 = queryCache.findAll({ active: true });  // returns []
const active3 = queryCache.getAll();  // returns []

Typical scenario when knowing the live queries is useful:

Say you have 2 different components, each containing its own query key. Then, when the user clicks a button, React fetches data from an API and these 2 queries must be invalidated. The mutation process would be something like this:

const mutation = useMutation(fetchData, {
  onMutate: () => {
    // do something
  },
  onSettled: async () => {
    await Promise.all([
      queryClient.invalidateQueries(queryKey1),
      queryClient.invalidateQueries(queryKey2),
    ]);
  },
});

Here, we wrapped the invalidation of these 2 queries into a Promise.all to prevent different parts of the UI from updating at different times. Although it works, this solution is not optimal because it creates a coupling between components. This coupling comes from the query keys, which are defined inside of their particular (different) components. Naturally, this solution would become hard to maintain because if one changes the queryKey inside of one component, this modification would also have to be done in other components as well (to perform the invalidation).

Ideally, what we want to do is to keep track of the living queries and use them in a function that lives in application scope. With that, we abstract this logic into an external function, like:

const mutation = useMutation(fetchData, {
  onMutate: () => {
    // do something (doesn't matter for the purpose of the current discussion)
  },
  onSettled: async () => {
   invalidateLiveQueriesOnScreen(); // this method lives in the app scope
  },
});

The function invalidateLiveQueries would keep track of which query is active in the screen and would perform the invalidation. The logic would be something like:

// this code goes in the App scope
let liveQueriesOnScreen = new Set();

export function invalidateLiveQueriesOnScreen() {
  // here we get the key of all live queries -- not sure how
  
  // the code below select only those that are relevant for the UI being displayed on screen
  useEffect(() => {
   // here comes the logic to get the relevant keys
   
   // then add those keys to our set:
   liveQueriesOnScreen.add(key);
   
   return () => {
     liveQueriesOnScreen.delete(key);
   }
  }, [someDependencies])

  [...liveQueriesOnScreen.values()].map((key) => mutate(key));
}

Notice that useEffect is being responsible for the selection of queries that are related to the UI being displayed. It is acting like a "filter" that selects only the queries that live in the components that are rendered on screen.

Basically that is the problem.

I know that SWR has middlewares from which one could obtain the desired live queries. React-Query, on the other hand, apparently does not support middlewares, so I guess this workaround is not feasible here.

Does anybody know how I can proceed with this problem and get the live queries?

[rfmiotto]

Ok, I guess I found the solution:

export async function revalidateLiveQueries() {
  const queryCache = queryClient.getQueryCache();

  const liveQueriesOnScreen = queryCache.findAll({ active: true });

  const queryKeys = liveQueriesOnScreen.map((query) => {
    return query.queryKey;
  });

  await Promise.all(queryKeys.map((key) => queryClient.invalidateQueries(key)));
}

Reading the documentation it is not clear to me how I should use QueryCache. The methods don't seem to be working as expected, but maybe I didn't get it right...

Anyways, I managed to obtain the queries using the queryClient.

Thank you for the attention!

[TkDodo]

if you want to revalidate all live queries, you can just do:

queryClient.invalidateQueries({ active: true })

as you don't need a key to revalidate a query - any filter can do

[rfmiotto]

Hi, @TkDodo

Great! It is way simpler than I thought.
Thank you very much for your answer!

All the best