如何在RTK Query中设置定时自动失效指定缓存？

方法1：用RTK Query内置的refetchOnMountOrArgChange配置 #

你可以在定义getPosts查询时，通过refetchOnMountOrArgChange指定缓存过期时间。当组件重新挂载或者查询参数变化时，若缓存数据已超过设定时长，就会自动触发新请求刷新缓存。

示例代码：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const postsApi = createApi({
  reducerPath: 'postsApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/api/' }),
  tagTypes: ['Posts'],
  endpoints: (builder) => ({
    getPosts: builder.query({
      query: () => 'posts',
      providesTags: ['Posts'],
      // 设置缓存1小时（3600秒）后过期自动重取
      refetchOnMountOrArgChange: 3600,
    }),
  }),
});

export const { useGetPostsQuery } = postsApi;

方法2：手动结合useEffect实现定时轮询 #

要是需要更灵活的定时触发逻辑（比如页面打开期间持续定时刷新，不受组件挂载状态限制），可以在组件里用useEffect搭配setInterval，主动调用查询的refetch方法。

示例代码：

import { useGetPostsQuery } from './postsApi';

function PostsList() {
  const { data, refetch } = useGetPostsQuery();

  useEffect(() => {
    // 每1小时触发一次重取
    const intervalId = setInterval(() => {
      refetch();
    }, 3600 * 1000);

    // 组件卸载时清理定时器
    return () => clearInterval(intervalId);
  }, [refetch]);

  return (
    <div>
      {data?.map(post => <div key={post.id}>{post.title}</div>)}
    </div>
  );
}

额外提示 #

• 如果你已经给getPosts配置了providesTags: ['Posts']，定时刷新后的数据会自动更新缓存，所有关联Posts标签的查询也会同步更新状态。
• 注意单位区分：refetchOnMountOrArgChange接收的是秒数，setInterval用的是毫秒数，别搞混。

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