RTK Query：如何跨组件访问POST mutation响应及缓存问题

核心结论 #

RTK Query的POST Mutation响应默认不会像useQuery那样自动缓存，无法直接在其他组件通过类似useQuery的方式获取。你当前用RTK Slice存储响应到全局状态的做法是可行的，但RTK Query本身提供了更贴合其缓存体系的解决方案。

推荐方案：利用updateQueryData手动缓存Mutation结果 #

由于你没有对应的GET接口，可以定义一个“虚拟”的Query端点，通过Mutation的回调将响应写入该Query的缓存中，之后其他组件就能用useQuery获取这个缓存数据。

步骤1：修改API定义，添加虚拟Query并更新Mutation #

export const testApi = createApi({
  reducerPath: 'testApi',
  baseQuery: fetchBaseQuery({ baseUrl: TEST_API_BASE_PATH }),
  tagTypes: ['Test'],
  endpoints: (builder) => ({
    createTest: builder.mutation<CreateTestResponse, CreateTestRequest>({
      query: (payload) => ({
        url: '',
        method: 'POST',
        body: payload,
      }),
      async onQueryStarted(payload, { dispatch, queryFulfilled }) {
        try {
          // 等待Mutation请求完成，获取响应数据
          const { data } = await queryFulfilled;
          // 将响应数据写入虚拟Query的缓存
          dispatch(
            testApi.util.updateQueryData(
              'getLatestCreatedTest', // 对应下面的Query端点名称
              undefined, // 该Query不需要参数，传undefined
              () => data // 更新缓存的逻辑，直接返回响应数据
            )
          );
        } catch (err) {
          // 可选：处理请求失败的情况
        }
      },
      invalidatesTags: ['Test'],
    }),
    // 定义一个虚拟Query，用于存储最新创建的Test数据
    getLatestCreatedTest: builder.query<CreateTestResponse, void>({
      // 因为没有实际的GET接口，设置skip: true避免自动发送请求
      query: () => ({ url: '__dummy__' }),
      skip: true,
    }),
  }),
});

export const { useCreateTestMutation, useGetLatestCreatedTestQuery } = testApi;

步骤2：在其他组件中获取缓存的响应 #

const AnotherComponent = () => {
  // 用useQuery获取缓存的最新创建的Test数据
  const { data: latestTest } = useGetLatestCreatedTestQuery();

  if (!latestTest) {
    return <div>No test created yet</div>;
  }

  return (
    <div>
      Latest Test: {latestTest.data.firstName} {latestTest.data.lastName}
    </div>
  );
};

纠正你代码中的异步处理问题 #

你当前调用createTest(payload)的方式没有处理异步，testResult会是一个Promise对象，需要用await获取实际响应：

const someCallback = useCallback(async () => {
    try {
        // 等待Mutation完成，解构获取响应数据
        const { data: testResult } = await createTest(payload);
        // 这里可以处理当前组件内的响应逻辑
    } catch (err) {
        // 处理请求错误
    }
}, [createTest, payload]);

关于用RTK Slice存储的说明 #

你当前用Slice存储响应的做法是有效的，但需要手动维护状态的更新逻辑。相比之下，上面的方案更贴合RTK Query的缓存机制，不需要额外维护Slice，还能利用RTK Query的缓存过期、标签失效等特性。

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