Advice about how to fetch many times

[fabienheureux]

Hi,

Sorry if there are already several open/closed issues on this exact topic (#192 this one for example), but I want to achieve something, and I have some difficulties to figure out either if it is a react or next.js issue.

Here is the thing:

1. I call an API to fetch some data, in pages/index.js, inside getInitialProps()
2. From the api result, I need to call a second time, in order to re-fetch some data (based on the first call result), and inject these into a component.

Ideally, I would have fetch one time, and pass the resulting data to a child component, in which I would have fetched a second time inside componentWillMount().

As it should be isomorphic in nextjs, it won't work, and I really don't know where should I call the api the second time.

Without nextjs version: (the digests props is passed as a prop to a child component)

static async getInitialProps () {
  const page = await fetch(`${baseURL}/pages/640/`)
  const homepage = await page.json()
  
  return {
    digests: homepage.homepage_digests,
  }
}

With next.js, what I tried to do, without success:

static async getInitialProps () {
    const page = await fetch(`${baseURL}/pages/640/`)
    const homepage = await page.json()
    const digestsList = await homepage.homepage_digests.map(async (digest, index) => {
      const res = await fetch(`${baseURL}/pages/${digest.digestId}/`)
      const data = await res.json()
      return data
    });

    return {
      digests: digestsList
    }
  }

Sorry if this question is dumb or already answered, as I said, I found many related issues, but really can't figure how it could be used in my specific case....

Thanks a lot in advance 👍

[jonaswindey]

I think that array.map() and array.forEach() are executed async when you combine them with async/await. That's why your function probably returns before execution is complete.

Could you try to replace the .map() with

for (let digest of homepage.homepage_digests) {
  // fill your data object here
}

That should do it.

Another idea is to use Promise.all()

See here: http://stackoverflow.com/questions/37576685/using-async-await-with-a-foreach-loop

[timneutkens]

@jonaswindey you're totally right 🙌

[fabienheureux]

Well, that did the trick.
Thanks so much @jonaswindey, it was definitely not a nextjs issue, neither a react one but a js one...you saved me some big headaches 😉