react-query invalidateQueries 不适用于前缀/URL

Question

我在 Ionic React 应用程序中使用 react-query 3.30。

我有一个分页查询:

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}`);

这工作正常。

典型的查询键值为 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

但是，当用户更新小部件(PATCH 到服务器)时，我需要使查询无效。

所以我尝试了这个:

queryClient.invalidateQueries('getWidgetAdmin')

我希望所有以 getWidgetAdmin 开头的查询都无效 because the documentation says that the argument to invalidateQueries is treated as a prefix .但是，它们都没有失效。

如果我使用确切的查询键，像这样:

queryClient.invalidateQueries(queryKeyUseWidgetAdmin(currentJsonUrl))

则查询无效。但我想使所有以 getWidgetAdmin 开头的查询无效，而不仅仅是其中一个。

我也试过设置exact:

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

这也没有用。

如何使 react-query 中的一组查询无效？

附加信息:

我正在使用一些自定义配置初始化 QueryClient()，但即使我在没有任何配置的情况下初始化 queryClient (const queryClient = new QueryClient();)，我仍然遇到同样的问题。

Answer 1

模糊查询键匹配只对数组有效。因此，如果您的 key 是:

['getWidgetAdmin', some, more, filters]

您可以模糊地使无效:

queryClient.invalidateQueries(['getWidgetAdmin'])

如果它确实需要是一个字符串 startsWith，您可以提供一个谓词函数(参见 QueryFilters documentation):

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