RTK 查询：一次转换所有查询响应

Question

使用 RTK 查询，可以使用 transformResponse 转换端点的响应，如下所示：

import { apiSlice } from '../api/apiSlice'
const usersAdapter = createEntityAdapter()
const initialState = usersAdapter.getInitialState()

import { camelizeKeys } from 'humps'

export const extendedApiSlice = apiSlice.injectEndpoints({
  endpoints: builder => ({
    getUsers: builder.query({
      query: () => '/users',
      transformResponse: (response) =>  camelizeKeys(response.data),
    }),
    // … 25 other endpoints
  })
})

如果每个端点响应都需要以某种方式进行转换，例如通过 humps camelizeKeys 函数，这将很快变得非常重复。

推荐的 way/best 做法是什么（全局）为所有查询定义一个 transformResponse（理想情况下是为所有突变定义另一个）？

Answer 1

我认为定义这种全局转换的最佳位置是自定义 baseQuery:

export const baseQueryWithCamelize: BaseQueryFn<
  string | FetchArgs,
  unknown,
  FetchBaseQueryError
> = async (args, api, extraOptions = {}) => {
  const result = await baseQuery(args, api, extraOptions);
  if (result.data) {
    result.data = camelizeKeys(result.data as any);
  }
  return result;
};

那么你应该在 root 中使用它 api def:

export default createApi({
  baseQuery: baseQueryWithCamelize,
  tagTypes: TAGS,
  endpoints: (builder) => ({
      healthcheck: builder.query<void, void>({
      query: () => URLS.HEALTHCHECK,
    }),
  }),
});

RTK 查询：一次转换所有查询响应

RTK Query: Transform all query responses at once

redux

react-redux

rtk-query