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。但是，其中 none 个已失效。

如果我使用精确的查询键，像这样：

queryClient.invalidateQueries(queryKeyUseWidgetAdmin(currentJsonUrl))

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

我也试过设置 exact:

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

这也没有用。

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

附加信息：

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

Answer 1

模糊查询键匹配只对数组有效。所以如果你的密钥是：

['getWidgetAdmin', some, more, filters]

您可以模糊地使无效：

queryClient.invalidateQueries(['getWidgetAdmin'])

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

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

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

react-query invalidateQueries not working with prefix / URLs

react-query