axios.get not passing empty objects in params to the API when sent as plain object about axios HOT 8 OPEN

Axios v1 encodes nested objects in qs style, not as JSON string.
Unfortunately qs does not support serializing a nested object with an empty structure and there is no specification for this or well-known practice.

import qs from "qs";

const params = {
  limit: 100,
  address: { city: {} },
  details: { name: {} },
};

console.log("query:", qs.stringify(params)); // query: limit=100

However, you can use a simple interceptor to achieve your needs:

axios.interceptors.request.use((config) => {
  const { params } = config;
  if (params) {
    const _params = {};
    Object.entries(params).forEach(([key, value]) => {
      _params[key] =
        value && typeof value === "object" ? JSON.stringify(value) : value;
    });
    config.params = _params;
  }
  return config;
});

from axios.

Object-type params like address and details are not passed down to the server when sent as a plain object. However, it works fine when using URLSearchParams()
Modify the code to use URLSearchParams() for handling query parameters. This ensures proper encoding, including empty objects. Here's an example:

const params = { limit: 100, address: { city: {} }, details: { name: {} } };
const queryString = new URLSearchParams(params).toString();

axios.get(`/url?${queryString}`)
  .then(response => {
    // Handle the response
  })
  .catch(error => {
    // Handle the error
  });

from axios.

or can you share the reference to the file?
i can take a second look

from axios.

Object-type params like address and details are not passed down to the server when sent as a plain object. However, it works fine when using URLSearchParams() Modify the code to use URLSearchParams() for handling query parameters. This ensures proper encoding, including empty objects. Here's an example:

const params = { limit: 100, address: { city: {} }, details: { name: {} } };
const queryString = new URLSearchParams(params).toString();

axios.get(`/url?${queryString}`)
  .then(response => {
    // Handle the response
  })
  .catch(error => {
    // Handle the error
  });

These are working fine in 0.24.0 version, it is not working when upgraded to 1.6.0 & it is also not mentioned anything related in the docs.

from axios.

Thanks, Implemented similar.

if (config.params) {
        const configParams = config.params;
        delete config.params;
        const params = new URLSearchParams();
        Object.entries(configParams).forEach((param) => {
            const [key, value] = param;
            if (value !== null && value !== undefined) {
                const val = typeof value === 'object' ? JSON.stringify(value) : value;
                params.set(key, val);
            }
        });
        config.params = params;
    }

from axios.

@DigitalBrainJS facing the same issue, #5986

any alternative to the mentioned issue?

from axios.

I had the same problem and I didn't find any documentation on how the parameters were actually converted. Why does axios v1 not turn them into JSON anymore?

It converts {limit: 100, address: { city: "a" }, details: { name: "b" }} to limit=100&address[city]=a&details[name]=b now.

from axios.

axios.interceptors.request.use((config) => {
  const { params } = config;
  if (params) {
    const _params = {};
    Object.entries(params).forEach(([key, value]) => {
      _params[key] =
        value && typeof value === "object" ? JSON.stringify(value) : value;
    });
    config.params = _params;
  }
  return config;
});

Could you also use the paramsSerializer property in the config object? Why do you use an interceptor? It looks like paramsSerializer exists exactly for this purpose. But I'm not sure how it works exactly.

What's the purpose of this conditional expression value && typeof value === "object" ? JSON.stringify(value) : value? I think plain JSON.stringify(value) should work as well.

from axios.