如何使RTK Query的onCacheEntryAdded为useGetUsersQuery填充error

updateCachedData 仅支持修改查询成功后的缓存数据，没有暴露错误状态的操作入口，无法直接通过它给useGetUsersQuery返回的error字段赋值。官方从RTK Query v1.9版本开始提供了专门的setQueryError工具方法，用来手动给指定查询条目设置错误状态，完全适配当前场景，实现步骤如下：

• 在onCacheEntryAdded的生命周期入参中额外取出dispatch方法，结合当前查询的入参arg定位要修改的缓存条目
• 监听到socket推送的server-error事件时，通过dispatch调用api.util.setQueryError，传入端点名称、缓存key、错误对象三个参数即可
• 记得在缓存条目销毁时移除socket事件监听、断开连接，避免内存泄漏

修改后的api.ts代码如下：

// api.ts
...
export const api = createApi({
  ...
  endpoints: (build) => ({
    ...
    getUsers: build.query({
      async onCacheEntryAdded(
        arg, 
        { updateCachedData, cacheDataLoaded, cacheEntryRemoved, dispatch }
      ) {
        const socket = await getSocket(arg)
        try {
          await cacheDataLoaded

          const handleServerError = (message: string) => {
            dispatch(
              api.util.setQueryError(
                'getUsers', // 对应端点名称，和定义的查询key保持一致
                arg, // 查询缓存key，即调用接口时的入参，无参查询传undefined
                new Error(message) // 要设置的错误对象，和普通请求错误格式兼容
              )
            )
          }
          socket.on("server-error", handleServerError)

          // 缓存条目销毁时做资源清理
          await cacheEntryRemoved
          socket.off("server-error", handleServerError)
          socket.disconnect()
        } catch (e) {
          console.warn(e)
        }
        ...
      }
    })
  })
})

原有App.tsx的代码不需要做任何修改，useGetUsersQuery返回的error字段会同步socket推送的错误，你写的useEffect监听逻辑可以正常触发打印。

注意：如果后续socket推送了正常的列表更新数据，依然可以正常调用updateCachedData更新缓存，新数据写入成功后会自动覆盖之前设置的错误状态，和普通接口请求成功后清除错误的行为完全一致。

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