如何配置RTK-Query实现旧数据优先返回+后台静默刷新

你要实现的「先返回旧数据+后台静默刷新」的需求，核心是利用RTK-Query的staleTime配置，配合你已有的keepUnusedDataFor来达成，同时满足数据仅保留5分钟的政策要求。

当前配置的问题 #

你现在的设置里：

• keepUnusedDataFor: 60*5：数据最后一次被组件使用后，5分钟内会被保留，超时就清除。
• 全局refetchOnMountOrArgChange: 60*5：只有当数据的最后获取时间超过5分钟，组件挂载时才会触发重新获取。但如果组件5分钟没用到数据，数据已经被keepUnusedDataFor清除，这时调用钩子就会从头加载，返回undefined并显示加载状态，不符合你的需求。

正确配置方案 #

修改查询的配置，添加staleTime，调整全局的refetchOnMountOrArgChange：

const api = createApi({
  reducerPath: 'api',
  baseQuery: fakeBaseQuery(),
  endpoints: (builder) => ({
    getApi: builder.query({
      queryFn: async () => {
        ...
      },
      // 数据保留5分钟（符合政策要求，最后一次使用后5分钟清除）
      keepUnusedDataFor: 60 * 5,
      // 5分钟后数据标记为"过时"，此时组件调用钩子会先返回旧数据，后台自动刷新
      staleTime: 60 * 5,
    }),
  }),
  // 组件挂载/参数变化时，若数据已过时则后台刷新（配合staleTime使用）
  refetchOnMountOrArgChange: true,
});

关键配置说明 #

1. staleTime: 60*5：
   • 数据获取后的5分钟内，被认为是「新鲜」的，不会触发后台刷新。
   • 超过5分钟后，数据变为「过时」，但只要组件还在使用（没触发keepUnusedDataFor的清除逻辑），组件调用钩子时会立刻返回缓存里的旧数据，同时后台静默发起新的请求，请求完成后自动更新组件数据。
2. keepUnusedDataFor: 60*5：
   • 保持这个配置，确保数据在最后一次被组件使用后5分钟内清除，满足政策要求。
3. refetchOnMountOrArgChange: true：
   • 替代原来的时间配置，只要数据已过时（超过staleTime），组件挂载或者查询参数变化时，就自动触发后台刷新。

关于加载状态的处理 #

RTK-Query的钩子返回的isLoading仅在首次加载且无缓存数据时为true，当后台刷新时，只会触发isFetching: true，但isLoading仍为false。所以你只需要正常渲染data即可，不用处理isFetching的状态，用户完全看不到加载过程。

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