时间戳

首页 > 解决方案 > react-query invalidateQueries 不适用于前缀/ URL

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

问题描述

我react-query在 Ionic React 应用程序中使用 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无效，因为文档说 invalidateQueries 的参数被视为前缀。但是，没有一个是无效的。

如果我使用确切的查询键，如下所示：

queryClient.invalidateQueries(queryKeyUseWidgetAdmin(currentJsonUrl))

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

我也试过设置exact：

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

这也不起作用。

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

附加信息：

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

标签： react-query

解决方案

模糊查询键匹配仅适用于数组。因此，如果您的密钥是：

['getWidgetAdmin', some, more, filters]

您可以使用以下方法模糊无效：

queryClient.invalidateQueries(['getWidgetAdmin'])

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

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

推荐阅读