如何在这种格式的 RTK 查询中构建带有过滤器参数的 url？

Question

我很难制作 URL 来使用过滤器获取数据。后端 REST api 是在 .Net 中构建的。过滤项目的 url 格式如下：

BASE_URL/ENDPOINT？技术=some-id&Complexities=0&Complexities=1&page=1&pageSize=3

技术和复杂性可以使用不同的值重复 x 次。

RTK Query 提供了查询功能，但它没有按照我需要的方式构建 url。

export const apiService = createApi({
  reducerPath: 'apiService',
  baseQuery: fetchBaseQuery({ baseUrl: BASE_URL }),
  endpoints: (build) => ({
    getAllQuizzes: build.query<ApiResponse, QueryProps>({
      query: ({ Technologies, Complexities, page, pageSize }) => {
        return ({
          url: ENDPOINT,
          params: {
            Technologies,
            Complexities,
            page,
            pageSize, 
          }
        })
      },
    }),
  }),
});

我使用 mui 异步自动完成组件来选择多个过滤器。有任何想法吗？

Answer 1

URLSearchParamsRTK 查询默认仅使用构造函数的对象签名。

对你来说，那是行不通的。

理论上，您可以在其中传递您自己的预先填充的URLSearchParams对象（但这不能保证未来的版本，并且 TypeScript 类型也没有指示），或者可以完全省略该params步骤，自己构建完整的 url：

   getAllQuizzes: build.query<ApiResponse, QueryProps>({
      query: ({ Technologies, Complexities, page, pageSize }) => {
        const params = new URLSearchParams({ page, pageSize })
        for (const tech of Technologies) {
          params.append('Technologies', tech)
        }
        for (const comp of Complexities) {
          params.append('Complexities', comp )
        }
        return ({
          url: ENDPOINT+'?'+params.toString(),
        })
      },
    }),

或者，您也可以保留现有代码并指定自定义paramsSerializer函数 - 例如query-string库：

import queryString from 'query-string'

//...
const baseQuery = fetchBaseQuery({
    baseUrl,
    paramsSerializer: (params: Record<string, unknown>) =>
        queryString.stringify(params, { arrayFormat: 'none' }),
})