RTK查询映射请求主体和参数

Question

我已经实现了rtq查询响应的转换:

const api = createApi({
reducerPath: 'API',
baseQuery: async (...args) => {
const { data, meta, error } = await baseQuery(...args)
const { status } = meta?.response || {}
return { data: camelize(data), meta, error } as QueryReturnValue
},
endpoints: () => ({}),
})

现在我想转换请求体和参数，从camelCase改为snake_case。我想我必须在基本查询中实现它，但我不知道如何做到这一点。

Answer 1

在我的例子中，我想用几个不同的api做您想做的事情，所以我创建了这个函数。我使用了一个不同的库来完成驼峰式和蛇形式，但除此之外，这应该可以为您工作:

import { fetchBaseQuery, FetchArgs } from "@reduxjs/toolkit/dist/query"
import { BaseQueryApi, QueryReturnValue } from "@reduxjs/toolkit/dist/query/baseQueryTypes"
import { FetchBaseQueryArgs } from "@reduxjs/toolkit/dist/query/fetchBaseQuery"
import camelcaseKeys from "camelcase-keys"
import * as snakecaseKeys from "snakecase-keys"

export const fetchCasingBaseQuery = (args: FetchBaseQueryArgs) => {
const bq = fetchBaseQuery(args)
const ret = (async (fetchArgs: FetchArgs | string, api: BaseQueryApi, extraOptions: {}) => {
console.log(fetchArgs, api, extraOptions)
if (typeof fetchArgs != 'string') {
if (fetchArgs.params) {
fetchArgs.params = snakecaseKeys(fetchArgs.params, { deep: true })
}
if (fetchArgs.body) {
fetchArgs.body = snakecaseKeys(fetchArgs.body, { deep: true })
}
}
const { data, meta, error } = await bq(fetchArgs, api, extraOptions)
return { data: camelcaseKeys(data as any[] | Record<string, any>, { deep: true }), meta, error } as QueryReturnValue<unknown, unknown, {}>
}) as typeof bq
return ret
}

(我使用的是typescript——欢迎任何关于如何更好地处理类型的建议!)

则可以用此函数代入fetchBaseQuery

export const reportsApi = createApi({
reducerPath: 'reports',
baseQuery: fetchCasingBaseQuery({ baseUrl: 'http://localhost:3000/api/reports' }),
endpoints: (builder) => ({
getReportById: builder.query<Report, string>({
query: (id) => `/${id}`
}),
getReportsByPage: builder.query<Report[], ListRequest<Report>>({
query: ({ page, pageSize, orderBy, orderAsc }) => ({
url: 'list',
params: {
page,
pageSize,
orderBy,
orderAsc: orderAsc && 1 || 0
}
})
}),
...