如何使用updateQueryData更新RTK Query的缓存数据？

这个需求完全可以用 RTK Query 实现，你的问题出在updateQueryData的缓存修改逻辑错误，以及对接口返回数据结构的处理不当。

核心问题分析 #

1. 接口数据结构误解：StackExchange 的 /users 接口返回的是包含items数组的对象（格式类似{ items: [...用户列表], has_more: boolean }），你当前的代码直接扩展整个缓存对象并添加user属性，根本没触及实际的用户列表。
2. 缓存修改逻辑错误：你需要在用户列表中找到目标用户并替换，而非直接挂载新属性。

修正后的代码 #

修复updateUser函数 #

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

export const usersApi = createApi({
    reducerPath: 'usersApi',
    baseQuery: fetchBaseQuery({ baseUrl: 'http://api.stackexchange.com/2.2'}),
    endpoints: builder => ({
        getUsers: builder.query({
            query: () => '/users?pagesize=20&order=desc&sort=reputation&site=stackoverflow',
        })
    })
})

export const updateUser = (dispatch, updatedUser) => {
  dispatch(usersApi.util.updateQueryData("getUsers", undefined, (cachedData) => {
    // 根据用户ID找到目标用户的索引
    const targetIndex = cachedData.items.findIndex(user => user.id === updatedUser.id);
    if (targetIndex !== -1) {
      // 替换数组中的目标用户（RTK Query 内部用Immer处理不可变更新，直接修改即可）
      cachedData.items[targetIndex] = updatedUser;
    }
    return cachedData;
  }))
}

export const { useGetUsersQuery } = usersApi

优化调用代码（可选） #

const FollowUser = (user) => {
  const userWithFollowers = { 
    ...user, 
    followers: (user.followers || 0) + 1 
  };
  updateUser(dispatch, userWithFollowers);
}

关键说明 #

• RTK Query 的updateQueryData内置了 Immer 支持，你可以直接修改传入的cachedData对象，无需手动做深拷贝，内部会自动处理不可变更新。
• 必须通过唯一标识（比如用户ID）定位到要更新的用户，确保修改的是正确的条目。

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