I want to send array as parameters like this:

v1/product?main_category[]=3&main_category[]=4 

my params :

params.main_category = [1,2,3]

my product slice:

export const productsSlice = apiSlice.injectEndpoints({
    endpoints: (builder) => ({
        getProducts: builder.query<
            any,
            {
                title: string;
                ename: string;
                status: string;
                site_product_id: number;
                site_product_meta_id: number;
                per_page: number;
                page: number;
                parent_id: [];
                main_category: [];
                stock_category: [];
                side_category: [];
            }
        >({
            query: (arg) => {
                const {
                    title: ename,
                    status,
                    site_product_id,
                    site_product_meta_id,
                    per_page,
                    page,
                    parent_id,
                    main_category,
                    stock_category,
                    side_category,
                } = arg;
                return {
                    url: "/product",
                    params: {
                        ename,
                        status,
                        site_product_id,
                        site_product_meta_id,
                        per_page,
                        page,
                        parent_id,
                        main_category,
                        stock_category,
                        side_category,
                    },
                };
            },
        }),
        getProduct: builder.query({
            query: (id) => `/product/${id}`,
        }),
    }),
});

but it send like this:

/v1/product?main_category=3%2C4

I want to send array as parameters like this:

v1/product?main_category[]=3&main_category[]=4 

my params :

params.main_category = [1,2,3]

my product slice:

export const productsSlice = apiSlice.injectEndpoints({
    endpoints: (builder) => ({
        getProducts: builder.query<
            any,
            {
                title: string;
                ename: string;
                status: string;
                site_product_id: number;
                site_product_meta_id: number;
                per_page: number;
                page: number;
                parent_id: [];
                main_category: [];
                stock_category: [];
                side_category: [];
            }
        >({
            query: (arg) => {
                const {
                    title: ename,
                    status,
                    site_product_id,
                    site_product_meta_id,
                    per_page,
                    page,
                    parent_id,
                    main_category,
                    stock_category,
                    side_category,
                } = arg;
                return {
                    url: "/product",
                    params: {
                        ename,
                        status,
                        site_product_id,
                        site_product_meta_id,
                        per_page,
                        page,
                        parent_id,
                        main_category,
                        stock_category,
                        side_category,
                    },
                };
            },
        }),
        getProduct: builder.query({
            query: (id) => `/product/${id}`,
        }),
    }),
});

but it send like this:

/v1/product?main_category=3%2C4

• javascript
• reactjs
• rtk-query

1 Answer 1

Per default, RTK Query just uses URLSearchParms for parameter serialization, with the result you see there. But you can override this behaviour by spcifying a paramsSerializer function in fetchBaseQuery. That will allow you to write your own serialization logic or use a library like query-string to do that for you.