How to send array of querystring with react and axios?

Question

I am trying to use the query string with axios to filter some data from the backend, I can do it with the backend api but I was struggling when it came to the frontend with react on how to send the array of query string to the backend. Here is my backend endpoint with array of query string params, it is working fine when I tested with postman.

localhost:3040/v2/feedback/filter/average-ratings?receiver=62c2dd106742823a69f98dac&receiver=62aec70881e46a4794b3a424

Here is my frontend code that I tried to send the request but return the error

export const filterAverageRating = async (receiver) => {
  console.log('Receiver ID', receiver); //['62c2dd106742823a69f98dac', '62aec70881e46a4794b3a424']
  const accessJWT = sessionStorage.getItem('accessJWT');
  const config = {
    headers: {
      'Content-Type': 'application/json',
      Authorization: accessJWT,
    },
  };
  const { data } = await axios.get(
    ENDPOINT_URL + 'filter/average-ratings',
    config,
    { params: { receiver } }
  );

  return data;
};

it return receiver is undefined from the backend, it means that there is something went wrong with query string in axios.

it said, No content status 204 and it seem not get the query string from the axios http://localhost:3040/v2/feedback/filter/average-ratings because it doesn't show the query string in the url endpoint. — Jonh
– Jonh, Commented Jul 17, 2022 at 23:33

rjumatov · Accepted Answer · 2022-07-17 16:47:07Z

3

You can use paramsSerializer for axios. This way your requested query param will keep appending its key e.g. ?query=one&query=two&query=three

const { data } = await axios.get(ENDPOINT_URL + "filter/average-ratings", {
  ...config,
  params: receiver,
  paramsSerializer: (params) =>
    qs.stringify(params, { arrayFormat: "repeat" }),
});

Hint: Your params are part of axios config while performing get requests.

Alternatively, if your API accepts comma separated queries as an array e.g. query=one,two,three you can simply use this without needing paramsSerializer

  ...
  params: receiver.join(","),
  ...

answered Jul 17, 2022 at 16:47

rjumatov

3,5102 gold badges20 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jonh Over a year ago

it shown this endpoint request in the backend and return status 204 No content because the endpoint with query string is not correct send from the frontend /v2/feedback/filter/average-ratings?0=62aec70881e46a4794b3a424&1=62b73809c2ca370bcbb0715b, it suppose to receive /v2/feedback/filter/average-ratings?receiver=62aec70881e46a4794b3a424&receiver=62b73809c2ca370bcbb0715b I still faced the problem... it was able to send array but with the wrong params name, receiver not 0 & 1

Jonh Over a year ago

Oh, I just made a small change in the params from params: receiver to params:{receiver: receiver} and it worked fine. Thank you so much for your explanation, have a nice day :D

Collectives™ on Stack Overflow

How to send array of querystring with react and axios?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related