RTK-Query自动重获取功能失效问题求助

首先你搞反了providesTags和invalidatesTags的用法：invalidatesTags是给mutation用的，用来标记哪些标签对应的数据需要失效；而query需要用providesTags来声明自己提供了哪些标签的数据。你现在在query里写invalidatesTags完全起不到作用，先把这个错误修正：

第一步：修正API配置里的标签声明 #

修改FollowingUsersPostApi.js，把query的invalidatesTags换成providesTags：

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

export const followingUsersPostApi = createApi({
  reducerPath: 'followingUsersPostApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  tagTypes: ['Post'],
  endpoints: (builder) => ({
    followingUsersPost: builder.query({
      query: () => `/followingUsersPost`,
      // 声明这个query提供Post标签的数据
      providesTags: ['Post'],
    }),
  }),
});

export const { useFollowingUsersPostQuery } = followingUsersPostApi;

第二步：解决无法感知外部更新的问题 #

因为你没办法控制关注用户发布新帖的mutation，没法通过调用自己的mutation来触发invalidatesTags，所以有几个可行方案：

方案1：开启轮询自动刷新 #

RTK-Query的useQuery钩子支持pollingInterval配置，可以定时自动重新请求数据。比如每30秒刷新一次：

// HomePage.jsx
import { useFollowingUsersPostQuery } from '../../Store/FollowingUsersPost';

const HomePage = () => {
  // 配置pollingInterval，单位毫秒
  const { data, isLoading, error, refetch } = useFollowingUsersPostQuery(
    undefined,
    { pollingInterval: 30000 }
  );

  return (
    <div>
      {/* 你的页面内容 */}
    </div>
  );
};

方案2：手动触发刷新 #

给页面加个刷新按钮，手动调用refetch函数获取最新数据：

// HomePage.jsx
import { useFollowingUsersPostQuery } from '../../Store/FollowingUsersPost';

const HomePage = () => {
  const { data, isLoading, error, refetch } = useFollowingUsersPostQuery();

  return (
    <div>
      <button onClick={() => refetch()}>刷新帖子</button>
      {/* 你的帖子列表渲染 */}
    </div>
  );
};

方案3：通过推送事件触发刷新（如果后端支持） #

如果后端提供WebSocket或者Server-Sent Events（SSE）推送新帖通知，你可以在前端监听推送事件，手动触发标签失效，让RTK-Query自动重新获取数据：

// HomePage.jsx
import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { useFollowingUsersPostQuery } from '../../Store/FollowingUsersPost';
import { followingUsersPostApi } from '../../Store/FollowingUsersPost';

const HomePage = () => {
  const dispatch = useDispatch();
  const { data, isLoading, error } = useFollowingUsersPostQuery();

  useEffect(() => {
    const socket = new WebSocket('ws://你的推送服务地址');
    socket.onmessage = (event) => {
      // 收到新帖推送时，触发Post标签失效
      dispatch(followingUsersPostApi.util.invalidateTags(['Post']));
    };

    return () => socket.close();
  }, [dispatch]);

  return (
    <div>
      {/* 你的页面内容 */}
    </div>
  );
};

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