如何刷新RTK Query中的过期数据？附代码问题求助

核心问题分析 #

你遇到的问题是RTK Query已发起refetch请求并获取到新数据，但组件依然拿到旧缓存数据，导致角色校验错误触发退出。主要原因可能是：

• 未正确配置缓存标签（tagTypes/providesTags），导致缓存未被正确更新
• 组件未处理refetch过程中的状态，直接使用旧缓存数据执行逻辑
• 查询参数（arg）设置冗余，可能干扰缓存更新逻辑

分步解决方案 #

1. 配置RTK Query的缓存标签 #

首先在baseApi中添加tagTypes，并为getUserDetails配置providesTags，确保RTK Query能正确识别缓存条目并更新：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { baseApiUrl } from 'configs/env-exports';

export const baseApi = createApi({
    reducerPath: 'api',
    baseQuery: fetchBaseQuery({
        baseUrl: baseApiUrl,
        prepareHeaders: (headers) => {
            const token = localStorage.getItem('userToken');
            if (token) {
                headers.set('authorization', token);
            }
            return headers; // 修正：无论是否有token都返回headers
        },
    }),
    tagTypes: ['User'], // 添加标签类型
    endpoints: (builder) => ({
        getUserDetails: builder.query({
            query: () => ({
                url: 'api/v1/account/info',
                method: 'GET',
            }),
            providesTags: ['User'], // 标记该查询提供User标签
        }),
    }),
});

export const { useGetUserDetailsQuery } = baseApi;

2. 优化组件中的查询与逻辑处理 #

• 移除冗余的查询参数'userDetails'（因为你的查询不需要参数）
• 加入isFetching状态判断，避免在refetch过程中使用旧数据触发退出逻辑
• 调整useEffect的逻辑，确保只在请求完成后处理最新数据

const ProtectedRoute = ({ redirectPath = '/', role }: IProtectedRouteProps) => {
    const exit = () => {
        dispatch(logout());
        navigate(redirectPath, { replace: true });
    };

    // 移除冗余arg，加入isFetching状态
    const { data, isError, isLoading, isFetching } = useGetUserDetailsQuery(undefined, {
        refetchOnMountOrArgChange: true,
        pollingInterval: 30000
    });

    useEffect(() => {
        // 如果正在请求新数据，暂时不处理旧数据
        if (isFetching) return;

        if (isError) {
            exit();
        } else if (data && Object.keys(data).length > 0) {
            dispatch(setCredentials(data));
            const userRole = data?.organization?.role;
            // 只有当角色明确不匹配时才退出
            if (role && userRole && userRole !== role) {
                exit();
            }
        }
    }, [data, isError, role, isFetching]); // 添加isFetching依赖

    // 加载中或请求中时可以显示加载状态
    if (isLoading || isFetching) {
        return <div>Loading...</div>;
    }

    return <div>Protected Content</div>;
};

export default ProtectedRoute;

3. 额外检查点 #

• 确认后端返回的新数据结构与IUserInfo类型完全匹配，避免因数据结构不兼容导致缓存更新失败
• 检查浏览器DevTools的Redux面板，查看api reducer中的缓存数据是否在refetch后更新，以此定位是缓存未更新还是组件未读取新数据

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