RTK Query设置query parameter参数拼接错误如何修复

• 你错误地把固定查询参数key直接拼接在了baseUrl末尾，同时endpoint的query函数返回了手动拼接的参数字符串，RTK Query在拼接路径时会自动用/连接路径片段，才导致参数分隔符变成了/而不是预期的&
• RTK Query内置了查询参数自动序列化能力，不需要手动拼接任何查询参数字符串

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

export const api = createApi({
  reducerPath: "api",
  baseQuery: fetchBaseQuery({
    // baseUrl只填基础接口路径，不要带任何查询参数
    baseUrl: `https://pixabay.com/api/`,
    // 固定的公共查询参数放到params里，会自动拼到所有请求上
    params: {
      key: process.env.REACT_APP_API_KEY
    }
  }),
  endpoints: builder => ({
    getPhotos: builder.query({
      query: (limit = 10) => ({
        // 不需要额外指定路径的话url留空即可，当前接口的动态查询参数放到params里
        url: '',
        params: {
          per_page: limit
        }
      }),
    }),
  }),
});

export const { useGetPhotosQuery } = api;

• 所有固定的全局查询参数都可以放在fetchBaseQuery的params配置项中，会自动追加到每一个请求的查询参数里
• 每个接口独有的动态参数放在对应endpoint的query返回对象的params字段中，RTK Query会自动合并全局参数和接口独有参数，用&正确拼接，同时自动处理参数编码
• 不要手动拼接任何查询参数字符串到baseUrl或者返回的url字段中，避免拼接错误和编码问题

内容的提问来源于stack exchange，提问作者selby