"AxiosError: options must be an object: "ERR_BAD_OPTION

I am trying to pass an array as a parameter in an axios get. This is a react application using current packages.

I have used the code per solution to other similar issues. I have tried applying two different methods/syntax forms, as can been seen from the commented code.

Here is the code:

import Qs from "qs";
import axios from "axios";

console.log(
  "ContactContainer - useEffect[currentUser] - Before check of currentUser.contactRequestsTo.length > 0 ",
  currentUser.contactRequestsTo.length
);
const userIds = JSON.stringify(currentUser.contactRequestsTo);
//const userIds = currentUser.contactRequestsTo;
console.log("ContactContainer - useEffect[currentUser] - userIds ", userIds);
if (currentUser.contactRequestsTo.length > 0) {
  (async () => {
    //const contactRequestsToDetails = await axios.get(`${getUserDetailsRoute}`,{
    //  params: {
    //    arrayOfUserIds: userIds
    //  },
    //  paramsSerializer: (params) => Qs.stringify(params, {arrayFormat: 'repeat'})
    //});

    const instance = axios.create({
      paramsSerializer(params) {
        return Qs.stringify(params, { arrayFormat: "brackets" });
      },
    });

    const contactRequestsToDetails = await instance.get(getUserDetailsRoute);

    console.log(
      "ContactContainer - useEffect[currentUser] - contactRequestsToDetails = ",
      contactRequestsToDetails
    );
  })();
}

Some of the package versions as follows:

    "axios": "^1.2.1",
    "mongoose": "^6.8.0",
    "qs": "^6.11.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",

The raw array, currentUser.contactRequestsTo, is:

ContactContainer - useEffect[] - currentUser.contactRequestsTo =  
Array(2)
0:"63b476a79c42d2b60fc39cbc"
1:"63b476ea9c42d2b60fc39ccd"
length:2
[[Prototype]]:Array(0)

I tried to use the raw array as an input that then applied, JSON.Stringify to the array to get the UserIds shown below:

userIds  ["63b476a79c42d2b60fc39cbc","63b476ea9c42d2b60fc39ccd"]

I also used the two formats, one is commented out and the other is as shown.

In all cases I received the same error.

Uncaught (in promise) 
code:"ERR_BAD_OPTION_VALUE"
message:"options must be an object"
name:"AxiosError"
stack:"AxiosError: options must be an object\n    at Object.assertOptions (http://localhost:8080/static/js/main.d2f30e44.js:2:356049)\

I see that other users have experienced the same error and have applied the changes as I interpreted the solutions.

Is there something wrong with my syntax or some other issue that would cause this error?

CodePudding user response：

The config for paramsSerializer changed in v1.0.0. It is now an object with encode, serialize and indexes properties.

If you want to add square brackets to your query parameter arrays, use the following. Also, don't serialise the array to JSON

(async () => {
  const currentUser = {
    contactRequestsTo: [
      "63b476a79c42d2b60fc39cbc",
      "63b476ea9c42d2b60fc39ccd"
    ],
  };
  const getUserDetailsRoute = "https://echo.zuplo.io/"; // just for the demo

  const contactRequestsToDetails = await axios.get(getUserDetailsRoute, {
    params: {
      arrayOfUserIds: currentUser.contactRequestsTo, // the actual array
    },
    paramsSerializer: {
      indexes: false, // empty brackets like `arrayOfUserIds[]`
    },
  });

  console.log(contactRequestsToDetails.data.url);
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.2/axios.min.js" integrity="sha512-QTnb9BQkG4fBYIt9JGvYmxPpd6TBeKp6lsUrtiVQsrJ9sb33Bn9s0wMQO9qVBFbPX3xHRAsBHvXlcsrnJjExjg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

See https://github.com/axios/axios#request-config

It's not clear why you feel you need to use paramsSerializer at all since indexes: false is the default.