如何将UI回调函数传入RTK Query端点的transformResponse

要实现从UI组件的useGetPeopleQuery钩子传递回调函数到端点的transformResponse中调用，你可以按照以下步骤操作：

1. 调整端点的参数结构 #

修改getPeople端点的配置，让它接收包含查询文档和回调函数的对象，同时在transformResponse中通过meta.originalArgs获取传入的回调：

export const api = createApi({
  baseQuery: graphqlRequestBaseQuery({
    // ... 你的baseQuery配置
  }),
  endpoints: (builder) => ({
    getPeople: builder.query({
      // 让query接收包含document和回调的参数对象
      query: ({ document, onTransform }) => ({
        document,
      }),
      transformResponse: (response, meta) => {
        // 从meta中取出调用hook时传入的原始参数
        const { onTransform } = meta.originalArgs;
        // 确认是函数后再调用，避免报错
        if (typeof onTransform === 'function') {
          onTransform(response);
        }
        // 返回响应数据（如需修改响应，可在此处处理后返回）
        return response;
      },
    }),
  }),
});

2. 在UI组件中传递回调 #

调用useGetPeopleQuery时，传入包含查询文档和回调函数的对象：

// 定义你需要在转换响应时执行的回调
const handleTransform = (response) => {
  console.log('响应已完成转换:', response);
  // 这里可以添加自定义逻辑，比如状态更新、数据预处理等
};

// 调用hook时传入参数对象
const { data: people, isLoading: isLoadingPeople } = useGetPeopleQuery({
  document: people, // 你的原查询文档参数
  onTransform: handleTransform
});

核心说明 #

• transformResponse的第二个参数meta包含originalArgs字段，存储了调用useGetPeopleQuery时传入的所有参数，通过它就能拿到UI层传递的回调函数。
• 一定要先判断回调是否为函数类型，避免出现调用非函数的运行时错误。
• 如果需要在转换后再把处理过的数据传给回调，只需要在调用onTransform时传入处理后的结果即可。

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