Multiple .get() requests

[imi47]

I apologize if this is not the right place for this but can someone please guide me regarding sending multiple .get() requests?

I'm trying to do something like this:

context.app.$storyapi.all([requestOne, requestTwo]).then( context.app.$storyapi.spread((...responses) => { const responseOne = responses[0]; const responseTwo = responses[1];

    console.log(responseOne, responseTwo, responesThree);
  })
);

Thanks.

[Slackman2015]

Hello there, you can take a look at our FAQ entry related to this topic: https://www.storyblok.com/tp/how-to-send-multiple-requests-using-axios

[imi47]

I have seen that one but that doesn't seem like a storyblok-nuxt implementation and it isn't using the asyncData method and the "context" parameter passed to it.

I want to know if there's a way to achieve this with context.app.$storyapi.

[emanuelgsouza]

Hello!

I used the @Slackman2015 FAQ link and this is an example:

asyncData (context) {
    const options = {
      version: 'draft'
    }
    const requests = [
      context.app.$storyapi.getStories(options),
      context.app.$storyapi.get('cdn/datasources', options),
      context.app.$storyapi.get('cdn/links', options)
    ]

    // you can use the axios.get and axios.spread function (it's not recommended by axios)
    return axios
      .all(requests)
      .then(axios.spread((...responses) => {
        const storiesRes = responses[0]
        const datasourcesRes = responses[1]
        const linksRes = responses[2]

        return {
          storiesRes,
          datasourcesRes,
          linksRes
        }
      }))
      .catch(errors => {
        console.error(errors)
      })

    // or you can use the Promise.all function (recommended)
    return Promise
      .all(requests)
      .then(responses => {
        const storiesRes = responses[0]
        const datasourcesRes = responses[1]
        const linksRes = responses[2]

        return {
          storiesRes,
          datasourcesRes,
          linksRes
        }
      })
      .catch(errors => {
        console.error(errors)
      })
  }

When you use the context.app.$storyapi, remember that this function is a reference to an instance of Storyblok client.

I hope it is useful!

[imi47]

This worked. Thank you!

[imi47]

Hi @emanuelgsouza,

I have a scenario where I need to make two GET requests and I need to use the response of the first GET request in the second GET request. Can you please guide me regarding this?

[emanuelgsouza]

Hi. So, you can chain the requests. If you are using our library, you need to know that we use the axios and therefore, Promises. When we use Promises, you can chain the execution of these promises. Example from MDN documentation:

doSomething()
.then(function(result) {
  return doSomethingElse(result);
})
.then(function(newResult) {
  return doThirdThing(newResult);
})
.then(function(finalResult) {
  console.log('Got the final result: ' + finalResult);
})
.catch(failureCallback)

I get my example above and rewrite it to make a fake scenario when I need to get the stories and after, the datasources, so:

asyncData (context) {
  const options = {
    version: 'draft'
  }

  return context.app.$storyapi.getStories(options)
    .then(response => {
      // do whatever you want with response to stories
      // and return a second request, now, to get the datasources
      // when you chain the requests, you can use multiple `.then() callbacka`
      return context.app.$storyapi.get('cdn/datasources', options)
    })
    .catch(errors => {
      console.error(errors)
    })
}

I hope it is useful!

[imi47]

This worked. I didn't know the Storyblok-nuxt syntax.

Thank you so much!

[emanuelgsouza]

You're welcome!