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

Question

我努力让 url 使用过滤器获取数据。 后端 REST api 内置.Net。 用于过滤项目的 url 具有以下格式：

BASE_URL/ENDPOINT?Technologies=some-id&Complexities=0&Complexities=1&page=1&pageSize=3

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

RTK 查询提供了一个查询 function，但它没有按照我需要的方式构建 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

RTK Query默认只使用URLSearchParams构造函数function的object签名。

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

理论上，您可以在其中传递您自己的预填充URLSearchParams object（但这不能保证将来的版本并且不会由 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 function - 例如query-string库：

import queryString from 'query-string'

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