全局捕获401错误时如何清除React Query查询缓存？

在全局onError回调中，你可以通过query参数的queryClient属性获取到当前的QueryClient实例，进而调用removeQueries()方法清除所有查询缓存。

修改后的代码如下：

const queryClient = useMemo(
    () =>
      new QueryClient({
        queryCache: new QueryCache({
          onError: (error, query) => {
            handleToastErrorMessage(error);

            // 加可选链避免error无response时报错
            if (error.response?.status === 401) {
              // 通过query实例获取queryClient并清除所有缓存
              query.queryClient.removeQueries();
            }
          },
        }),
      }),
    []
);

补充说明 #

• query参数是Query实例，自带queryClient引用，无需额外传递或全局存储QueryClient。
• removeQueries()不带参数时会清除所有查询缓存；如果需要精准清除特定缓存，可以传入queryKey等筛选条件，比如query.queryClient.removeQueries({ queryKey: ['user'] })。
• 使用error.response?.status的可选链操作符，避免请求失败未返回response时出现Cannot read properties of undefined的报错。

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