从多个数据源构建 Nuxt 站点地图

Question

I'm working with Nuxt in SSR mode and want to build out a dynamic sitemap for multiple routes/ data sets.

The issue I'm facing now is that the async/ await function only allows 'data' as the variable. The same function with 'post' as the variable leads to a "map function does not exist"

This is what's in my Nuxt.config.js file

  sitemap: {
    hostname: "https://example.com",
    routes: async () => {
      let { data } = await axios.get('https://api.example.com/api/v1/locations');
      data = data.data.map((loc) => `/locations/${loc.slug}`);
      console.log(data);

      let { posts } = await axios.get('https://cms.example.com/wp-json/wp/v2/posts');
      posts = posts.map((post) => `/posts/${post.slug}`);
      console.log(posts);

      data.concat(posts);

      return data
    },
    path: '/sitemap.xml'
  }

The resulting output I'm looking for should be formatted like this:

[
  '/locations/location-one',
  '/locations/location-two',
  '/locations/location-three',
  '/posts/post-one',
  '/posts/post-two',
  '/posts/post-three',
]

The error I'm getting:

Cannot read property 'map' of undefined

and it's occuring on this line:

posts = posts.map((post) => `/posts/${post.slug}`)

so it appears to me that it's not accepting 'posts' as a valid variable for its own await function.

That call works fine when the first call is commented out and 'data' is used instead of 'posts'

Answer 1

your destructured response is wrong:

replace:

let { posts } = ...

by:

let { data: posts } = ...

Because Axios always returns a "data" attribute, so you just have to rename it as "posts".

Answer 2

Your array concatenation must be like that:

data.concat(posts);

(see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat )

---

The push() method is only to push one item, but not an array of item.

(see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push )