NextJS API Route Returns Before Data Received?

Question

I'm not sure what's going on here. I have set up an API route in NextJS that returns before the data has been loaded. Can anyone point out any error here please?

I have this function that calls the data from makeRequest():

export async function getVendors() {
  const vendors = await makeRequest(`Vendor.json`);
  console.log({ vendors });
  return vendors;
}

Then the route: /api/vendors.js

export default async (req, res) => {
  const response = await getVendors();
  return res.json(response);
};

And this is the makeRequest function:

const makeRequest = async (url) => {
  // Get Auth Header
  const axiosConfig = await getHeader();

  // Intercept Rate Limited API Errors & Retry
  api.interceptors.response.use(
    function (response) {
      return response;
    },
    async function (error) {
      await new Promise(function (res) {
        setTimeout(function () {
          res();
        }, 2000);
      });

      const originalRequest = error.config;

      if (error.response.status === 401 && !originalRequest._retry) {
        token[n] = null;
        originalRequest._retry = true;
        const refreshedHeader = await getHeader();
        api.defaults.headers = refreshedHeader;
        originalRequest.headers = refreshedHeader;
        return Promise.resolve(api(originalRequest));
      }
      return Promise.reject(error);
    }
  );

  // Call paginated API and return number of requests needed.
  const getQueryCount = await api.get(url, axiosConfig).catch((error) => {
    throw error;
  });
  const totalItems = parseInt(getQueryCount.data['@attributes'].count);
  const queriesNeeded = Math.ceil(totalItems / 100);

  // Loop through paginated API and push data to dataToReturn
  const dataToReturn = [];

  for (let i = 0; i < queriesNeeded; i++) {
    setTimeout(async () => {
      try {
        const res = await api.get(`${url}?offset=${i * 100}`, axiosConfig);
        console.log(`adding items ${i * 100} through ${(i + 1) * 100}`);
        const { data } = res;
        const arrayName = Object.keys(data)[1];
        const selectedData = await data[arrayName];
        selectedData.map((item) => {
          dataToReturn.push(item);
        });

        if (i + 1 === queriesNeeded) {
          console.log(dataToReturn);
          return dataToReturn;
        }
      } catch (error) {
        console.error(error);
      }
    }, 3000 * i);
  }
};

The issue that I'm having is that getVendors() is returned before makeRequest() has finished getting the data.

Answer 1

Looks like your issue stems from your use of setTimeout. You're trying to return the data from inside the setTimeout call, and this won't work for a few reasons. So in this answer, I'll go over why I think it's not working as well as a potential solution for you.

setTimeout and the event loop

Take a look at this code snippet, what do you think will happen?

console.log('start')
setTimeout(() => console.log('timeout'), 1000)
console.log('end')

When you use setTimeout, the inner code is pulled out of the current event loop to run later. That's why end is logged before the timeout.

So when you use setTimeout to return the data, the function has already ended before the code inside the timeout even starts.

If you're new to the event loop, here's a really great talk: https://youtu.be/cCOL7MC4Pl0

returning inside setTimeout

However, there's another fundamental problem here. And it's that data returned inside of the setTimeout is the return value of the setTimeout function, not your parent function. Try running this, what do you think will happen?

const foo = () => {
  setTimeout(() => {
    return 'foo timeout'
  }, 1000)
}

const bar = () => {
  setTimeout(() => {
    return 'bar timeout'
  }, 1000)
  return 'bar'
}

console.log(foo())
console.log(bar())

This is a result of a) the event loop mentioned above, and b) inside of the setTimeout, you're creating a new function with a new scope.

The solution

If you really need the setTimeout at the end, use a Promise. With a Promise, you can use the resolve parameter to resolve the outer promise from within the setTimeout.

const foo = () => {
  return new Promise((resolve) => {
    setTimeout(() => resolve('foo'), 1000)
  })
}

const wrapper = async () => {
  const returnedValue = await foo()
  console.log(returnedValue)
}

wrapper()

Quick note

Since you're calling the setTimeout inside of an async function, you will likely want to move the setTimeout into it's own function. Otherwise, you are returning a nested promise.

// don't do this

const foo = async () => {
  return new Promise((resolve) => resolve(true))
}

// because then the result is a promise
const result = await foo()
const trueResult = await result()