RTK 查询地图请求正文和参数答案

【问题标题】：RTK Query map request body and paramsRTK 查询地图请求正文和参数
【发布时间】：2022-08-20 02:11:50
【问题描述】：

我已经实现了像这样转换 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。我想我必须在基本查询中实现它，但我不知道我该怎么做。

标签： reactjs rtk-query

【解决方案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: {}) => {
    const newArgs = typeof fetchArgs == 'string'
      ? fetchArgs
      : { ...fetchArgs, params: snakecaseKeys(fetchArgs.params || {}, { deep: true }) }  // << magic bit is here
    const { data, meta, error } = await bq(newArgs, api, extraOptions)
    return { data: camelcaseKeys(data as any[] | Record<string, any>, { deep: true }), meta, error } as QueryReturnValue<unknown, unknown, {}>
  }) as typeof bq
  return ret
}

（我正在使用打字稿 - 愿意接受有关如何更好地处理类型的任何建议！）

然后你可以用这个函数代替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
        }
      })
    }),
    ...

【讨论】：