useQuery - cancel all pending queries without knowing all sub query keys

[knoefel]

I'm not 100% sure if this already possible, but couldn't find anything related in the docs or in Discussions here on GitHub.

I have a long list, which is filterable and also supports pagination. I'm querying with useQuery and as a query key i'm using both a string as a namespace for this page and also the filterInput object which is send with the request. The filterInput includes both some filter params and the pagination options.

useQuery(
    [QueryKey.Components, filterInput],
    ({ queryKey: [key, input] }: { queryKey: [QueryKey, FilterInput] }) => apiService.getComponents(input),
    {
      ...queryOptions,
      enabled: false,
      keepPreviousData: true,
    }
  );

I want to cancel all previous active queries when they are not resolved yet (still fetching) and the user already triggered a new query. E.g. when clicking multiple times on the next page button in a short period of time.

Is it possible to use queryClient.cancelQueries here and cancel all active queries with the root query key QueryKey.Components but without knowing all the different states of my filterInput object? Something like this:

queryClient.cancelQueries([QueryKey.Components], { fetching: true });

Thanks in advance for any feedback and help!

[TkDodo]

yes, this is the exact syntax that you need. cancelQueries accepts a query filter, so you can do that. But just doing queryClient.cancelQueries([QueryKey.Components]) should be enough as well, because a query that is not fetching cannot be cancelled I guess :)

[knoefel]

Sorry for the very late reply and thx for your answer!