Nuxt.js: How to deal with multiple dynamic routes nuxt generate

[lukasborawski]

Hey, in nuxt guide there is example how to deal with dynamic routes using promise and call to axios, now, how to deal with two of them?

generate: {
    routes: function (callback) {
      let posts = axios.get('https://api.com/posts', {params: {size: 10}}).then((res) => {
        return res.data.posts.map((post) => {
          return '/feed/' + post.id
        })
      })
      let users = axios.get('https://api.com/users', {params: {size: 10}}).then((res) => {
        return res.data.users.map((user) => {
          return '/user/' + user.id
        })
      })
      let route = Promise.all([posts, users]).then(values => {       
        return callback(null, route)
      })
    }
},

This is my example - trying to connect two promises but still have error.

_{This question is available on Nuxt.js community (#c884)}

[lukasborawski]

OK, this is how it should looks:

generate: {
  routes: function () {
    let posts = axios.get('https://api.com/posts', {params: {size: 10}}).then((res) => {
      return res.data.posts.map((post) => {
        return '/feed/' + post.id
      })
    })
    let users = axios.get('https://api.com/users', {params: {size: 10}}).then((res) => {
      return res.data.content.map((user) => {
        return '/user/' + user.id
      })
    })
    return Promise.all([posts, users]).then(values => {
      return values.join().split(',');
    })
  }
},

[mattwaler]

Any idea how to implement this with payloads as well?

[cupojoe]

@mattwaler you should be able to do the same thing, just return an object instead of string:

generate: {
  routes: function () {
    let posts = axios.get('https://api.com/posts', {params: {size: 10}}).then((res) => {
      return res.data.posts.map((post) => {
        return {
          route: '/feed/' + post.id,
          payload: post
        }
      })
    })
    let users = axios.get('https://api.com/users', {params: {size: 10}}).then((res) => {
      return res.data.content.map((user) => {
        return {
           route: '/user/' + user.id,
           payload: user
         }
      })
    })
    return Promise.all([posts, users]).then(values => {
      return [...values[0], ...values[1]]
    })
  }
},

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.