CODEWITHSUNDEEP
react-query
Patrick Kenny
Patrick Kenny

Reputation: 6397

react-query invalidateQueries not working with prefix / URLs

I'm using react-query 3.30 in an Ionic React app.

I have a paged query:

export function useCardAdmin(
  currentJsonUrl: string,
): UseQueryResult<JsonDataWidgetPagerRead, Error> {
  const query = currentJsonUrl;
  const queryKey = queryKeyUseWidgetAdmin(currentJsonUrl);
  return useQuery<JsonDataWidgetPagerRead, Error>(
    queryKey,
    async () => fetchAuth(query, true),
    {
      keepPreviousData: true,
      staleTime: DAY_MILLISECONDS,
      cacheTime: DAY_MILLISECONDS,
    },
  );
}

export const queryKeyUseWidgetAdmin = (currentJsonUrl: string): string => (`getWidgetAdmin${currentJsonUrl}`);

This is working fine.

A typical query key value is getCardsAdminhttps://example.com/jsonapi/widgets?&fields[widget]=id,drupalId,part,gadget,refGroup&filter[uid.id][value]=adadfasf-f992-489c-9519-038f1728e0db&sort=-created&page[limit]=25

However, when a user updates a widget (PATCH to server), then I need to invalidate the query.

So I tried this:

queryClient.invalidateQueries('getWidgetAdmin')

I expected all queries that begin with getWidgetAdmin to be invalidated because the documentation says that the argument to invalidateQueries is treated as a prefix. However, none of them are invalidated.

If I use the exact query key, like this:

queryClient.invalidateQueries(queryKeyUseWidgetAdmin(currentJsonUrl))

then the query is invalidated. But I want to invalidate all the queries that begin with getWidgetAdmin, not just one of them.

I also tried setting exact:

queryClient.invalidateQueries('getWidgetAdmin', { exact: false })

This didn't work, either.

How can I invalidate a group of queries in react-query?

Additional info:

I was initializing QueryClient() with some custom config, but even when I initialize queryClient without any config (const queryClient = new QueryClient();), I still get the same problem.

Upvotes: 3

Views: 2127

Answers (1)

TkDodo
TkDodo

Reputation: 28733

The fuzzy query key matching only works for Arrays. So if your key is:

['getWidgetAdmin', some, more, filters]

You can fuzzily invalidate with:

queryClient.invalidateQueries(['getWidgetAdmin'])

if it really needs to be a string startsWith, you can supply a predicate function (see the QueryFilters documentation):

queryClient.invalidateQueries({
predicate: (query) => query.queryKey.startsWith('getWidgetAdmin')})

Upvotes: 4

Related Questions