如何在RTK Query中传递数组参数生成带[]的URL查询串？

尝试向RTK Query的查询接口传递数组作为参数时，参数对象无法正确处理数组，生成的URL查询串不符合需求：

• 传入的数组参数：

filterArguments = [1,2]

• 当前RTK Query代码：

getFood: builder.query({
  query: (filterArguments) => ({
    url:'/user/food/',
    params: {
      ...filterArguments
    }
  }),
  providesTags:['Food']
}),

当前问题：要么报错，要么生成的URL忽略数组的其他项，比如：

test:8000/api/?filter=1 

期望的URL格式：

test:8000/api/?filter[]=1&filter[]=2

请问该需求在RTK Query中是否可实现？如何实现？

解决方案 #

这个需求完全可以实现，核心是修正参数传递方式并自定义参数序列化逻辑：

1. 修正参数传递逻辑 #

首先要明确：你需要把数组赋值给指定的参数名（比如filter），而不是直接展开数组到params中。修改后的query函数如下：

getFood: builder.query({
  query: (filterArguments) => ({
    url:'/user/food/',
    // 将数组赋值给对应参数名
    params: { filter: filterArguments }
  }),
  providesTags:['Food']
}),

2. 自定义参数序列化器 #

RTK Query默认的参数序列化不会给数组参数添加[]后缀，需要在fetchBaseQuery中配置paramsSerializer来实现预期格式：

方式一：使用qs库推荐

qs是专门处理URL查询参数的库，能轻松实现数组的brackets格式序列化：

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

export const foodApi = createApi({
  baseQuery: fetchBaseQuery({
    baseUrl: '/api',
    // 配置参数序列化，指定数组格式为brackets
    paramsSerializer: (params) => qs.stringify(params, { arrayFormat: 'brackets' })
  }),
  endpoints: (builder) => ({
    getFood: builder.query({
      query: (filterArguments) => ({
        url:'/user/food/',
        params: { filter: filterArguments }
      }),
      providesTags:['Food']
    })
  })
});

方式二：手动实现序列化逻辑无需额外依赖

如果不想引入第三方库，可以自己编写简单的序列化函数：

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

export const foodApi = createApi({
  baseQuery: fetchBaseQuery({
    baseUrl: '/api',
    paramsSerializer: (params) => {
      const paramParts = [];
      Object.entries(params).forEach(([key, value]) => {
        if (Array.isArray(value)) {
          // 对数组项生成key[]=value的格式
          value.forEach(item => {
            paramParts.push(`${encodeURIComponent(key)}[]=${encodeURIComponent(item)}`);
          });
        } else {
          // 普通参数直接处理
          paramParts.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`);
        }
      });
      return paramParts.join('&');
    }
  }),
  endpoints: (builder) => ({
    getFood: builder.query({
      query: (filterArguments) => ({
        url:'/user/food/',
        params: { filter: filterArguments }
      }),
      providesTags:['Food']
    })
  })
});

为什么之前的代码会出错？ #

之前直接展开数组到params中，相当于把数组的索引作为参数键（比如{0:1, 1:2}），这既不符合接口的参数要求，也会导致序列化异常，所以必须将数组赋值给明确的参数名后再处理。

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