Chaining an axios.get call to use the response for an axios.all multiple request

Question

I'm having difficulties to understand how Shall I handle this type of calls. I need an initial axios.get call and loop through to make an axios.all call. This is my code:

export async function getServerSideProps(context) {
  const axios = require("axios");

  const options = {
    method: 'GET',
    url: 'xxxxx',
    params: { id_user: 'xxxxx' },
    headers: {
      'X-RapidAPI-Host': 'xxxxxxx',
      'X-RapidAPI-Key': 'xxxxxxx'
    }
  };



  const res = axios.request(options).then(function (response) {

    axios.all(response.data.users.map(user => {
      axios.get('xxxxxxx', {
        params: { response_type: 'short', ig: user.username, corsEnabled: 'true' },
        headers: {
          'X-RapidAPI-Host': 'xxxxx',
          'X-RapidAPI-Key': 'xxxxxxx'
        }
      })
    })).then(res => {
      return res.data
    })

  })

  const payload = await res;

I have an error on the page when I try to console log the payload. What's going worng with my call?

Answer 1

Looks like you need a return inside your map.

The below code worked for me and the unique params were updated on each request. Once you prepare your series of endpoints or whatever is unique for each request (user data per your sample code) you map over the relevant data and make all your get requests. The result returned will be an array of the responses you get back from each request once all of the requests have finished.

Regarding chaining together requests, you can use any number of .then() to kick off other actions. You mention needing an id from an initial get request, so here is a solution based on that example.

Hope you find it helpful.

const users = [{ username: '1' }, { username: '2' }, { username: '3' }];
axios
    .get('https://jsonplaceholder.typicode.com/posts')
    .then((res) => {
      console.log(res);
      // simulating getting some id you need...
      const id = res.data[4].id;
      console.log(id);

      return id;
    })
    .then((id) => {
      axios
        .all(
          users.map((user) => {
            return axios.get('https://jsonplaceholder.typicode.com/posts', {
              params: {
                response_type: 'short',
                // just an example of using id...
                importantId: id,
                ig: user.username,
                corsEnabled: 'true',
              },
              headers: {
                'X-RapidAPI-Host': 'xxxxxxx',
                'X-RapidAPI-Key': 'xxxxxxx',
              },
            });
          })
        )
        .then((res) => {
          console.log(res);
        });
    });