RTK Query后续请求报错时data仍保留前次数据的问题咨询

RTK Query 默认不会在请求失败时将 data 设为 undefined，尤其是当之前存在成功的缓存数据时，它会保留这些数据以维持 UI 连贯性。针对参数变化后新请求返回403错误，但仍显示旧请求数据的问题，原因和解决办法如下：

核心原因 #

RTK Query 的缓存策略以「维持 UI 可用性」为优先：即使新请求失败，只要缓存中存在同端点下的旧成功数据，就会保留该数据，避免界面突然空白。而使用 useLazyQuery 时，若新参数请求失败，组件仍显示旧数据，本质是缓存未被自动清除，且渲染逻辑未区分错误状态。

解决办法 #

1. 渲染时结合错误状态判断 #

直接修改渲染逻辑，当存在 error 时不展示旧数据：

{!error && data && <DataTable data={data} />}

这样请求报错时，会自动隐藏旧数据，只显示错误提示和重试按钮，是最快捷的解决方式。

2. 重置查询状态（针对 useLazyQuery） #

如果需要在参数变化时彻底清空旧状态，可以使用 useLazyQuery 返回的 resetState 方法，在发起新请求前重置之前的状态：

export const ResourceList: React.FC<ResourceList> = ({ componentId, resourceType }) => {
  // 解构出 resetState 方法
  const [getResources, { isFetching, error, data }, resetState] = useLazyGetResourcesWithFilterQuery();

  React.useEffect(() => {
    resetState(); // 重置旧状态，清空之前的 data 和 error
    void getResources({ componentId, resourceType });
  }, [getResources, resetState, componentId, resourceType]);

  return (
    <>
      {data && <DataTable data={data} />}
      {error && (
        <>
          <Error error={error} />
          <a onClick={() => void getResources({ componentId, resourceType })}>Try again</a>
        </>
      )}
    </>
  );
};

3. 改用 useQuery（更适配参数驱动场景） #

如果查询是依赖 componentId 和 resourceType 自动触发的，推荐直接使用 useQuery 替代 useLazyQuery，它会自动跟踪参数变化并发起新请求，状态也会正确关联最新请求：

export const ResourceList: React.FC<ResourceList> = ({ componentId, resourceType }) => {
  // 直接传入参数，无需手动 useEffect 触发
  const { isFetching, error, data, refetch } = useGetResourcesWithFilterQuery({ componentId, resourceType });

  return (
    <>
      {!error && data && <DataTable data={data} />}
      {error && (
        <>
          <Error error={error} />
          <a onClick={() => void refetch()}>Try again</a>
        </>
      )}
    </>
  );
};

补充说明 #

RTK Query 保留旧数据的设计是为了避免因临时网络问题或权限错误导致界面空白，提升用户体验。如果需要主动控制缓存生命周期，可以在端点配置中通过 keepUnusedDataFor 设置缓存过期时间（单位秒），超出时间后未被使用的缓存会自动清除：

getResourcesWithFilter: build.query<Paged<{ resources: Array<Resource> }>, GetResourcesWithFilterApiArg>({
  query: ({ componentId, resourceType }) => ({
    url: `/resources`,
    params: { componentId, resourceType },
  }),
  transformResponse: (resp: GetResourcesWithFilterApiResponse) => ({
    page: resp._embedded.page,
    resources: resp._embedded.resources,
  }),
  keepUnusedDataFor: 60, // 缓存60秒后自动清除
}),

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