react-query 3.30调用invalidateQueries前缀匹配URL类查询失效如何解决

问题原因 #

React Query v3 的invalidateQueries前缀匹配规则仅对数组格式的queryKey生效，你当前将前缀和动态参数拼接为了单个字符串类型的queryKey，此时匹配逻辑默认是全等判断，不会对单字符串做前缀模糊匹配，所以传入前缀字符串无法命中目标查询。

解决方案 #

方案1：修改queryKey为数组格式（推荐，符合React Query最佳实践） #

React Query官方推荐使用数组格式定义queryKey，将固定前缀作为数组第一个元素，动态参数放在后续元素，天然支持前缀匹配：

1. 修改queryKey生成逻辑：

export const queryKeyUseWidgetAdmin = (currentJsonUrl: string): [string, string] => (['getWidgetAdmin', currentJsonUrl]);

2. 原有useCardAdmin逻辑无需其他修改，直接使用返回的数组作为queryKey即可。
3. 批量失效时直接传入前缀部分即可命中所有对应查询：

// 默认exact为false，自动匹配所有第一个元素为'getWidgetAdmin'的数组类型queryKey
queryClient.invalidateQueries(['getWidgetAdmin']);

方案2：使用predicate自定义匹配（无需修改现有代码） #

如果你不想改动现有queryKey的拼接逻辑，可以通过自定义匹配函数遍历所有缓存查询，手动匹配前缀：

queryClient.invalidateQueries({
  predicate: (query) => {
    const queryKey = query.queryKey as string;
    return queryKey.startsWith('getWidgetAdmin');
  }
});

这个方法会遍历所有缓存中的查询，只要queryKey以指定前缀开头就会被标记为失效。

内容的提问来源于stack exchange，提问作者Patrick Kenny