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
})
})

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

(全局)为所有查询定义一个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;
};

然后你应该在 rootapidef 中使用它：

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

Answer 2

这适用于不使用打字稿的任何人。

changeResponse是用于更改所有端点响应的函数，它应该返回您想要的任何内容，即数组或对象。

import {changeResponse} from "../functions/changeResponse"
const baseQueryWithChange = async (args, api, extraOptions) => {
let result = await baseQuery(args, api, extraOptions);
if (result.data) {
result.data = changeResponse(result.data.data) // function used to transform global response
}
return result
}

使用baseQueryWithChange函数包装baseQuery。

export const apiSlice = createApi({
baseQuery: baseQueryWithChange,
endpoints: builder => ({})
})

Answer 3

您可以在fetchBaseQuery中使用responseHandler

const customFetchBaseQuery = ({ ...props }:FetchBaseQueryArgs) => fetchBaseQuery({
...props,
responseHandler: (response) => {
camelizeKeys(response.data)
},
});

并在createApi中使用

export const userApi = createApi({
//...
baseQuery: customFetchBaseQuery({ baseUrl: '/' }),
///...