【Nuxt.js】microCMSで複数のAPIからコンテンツを取得する方法

Question

Nuxt × microCMSでポートフォリオサイトを構築しているんですが、Indexページで複数のAPIからコンテンツを取得する方法が分からず困っています。(NewsやProductといった複数のAPIからそれぞれコンテンツをIndexページに表示したいです)

APIが1つの場合(Productだけ or Newsだけ)は問題なく表示されるのですが、Product・News両方からコンテンツ取得しようとするとエラーで出来なくなってしまいます。async asyncData()を2回そのまま書いているのが問題なのかなと思っています。初歩的な質問かもしれませんが、お知恵を貸して頂けると助かります！よろしくお願いします。

<template>
　<div>

　　<swiper :options="swiperOption">                
     <swiper-slide v-for="item in items" :key="item.id">
       <a :href="`${item.link}`" target="_blank">
         <img :src="item.thumbnail.url">
         <h3>{{ item.creator }}</h3>
         <h4>{{ item.category }}</h4>
      　</a>
     </swiper-slide>
　　</swiper>

　　<swiper :options="swiperOption">                
     <swiper-slide v-for="blog in blogs" :key="blog.id">
       <a :href="`${blog.link}`" target="_blank">
         <img :src="blog.thumbnail.url">
         <h1>{{ blog.title }}</h1>
       </a>
     </swiper-slide>
　　</swiper>

　</div>
</template>

<script>
import axios from 'axios'
export default {
  async asyncData() {
    const { data } = await axios.get(
      'https://your-service-id.microcms.io/api/v1/item',
      { headers: { 'X-API-KEY': 'your-api-key' }}
    )
    return { items: data.contents }
  },
  async asyncData() {
    const { data } = await axios.get(
      'https://your-service-id.microcms.io/api/v1/blog',
      { headers: { 'X-API-KEY': 'your-api-key' }}
    )
    return { blogs: data.contents }
  }
}
</script>
        

Answer 1

動作確認していませんがこんな感じだといかがでしょうか。

import axios from 'axios'
export default {
  async asyncData() {
    const res = await Promise.all([
      axios.get(
        'https://your-service-id.microcms.io/api/v1/item',
        { headers: { 'X-API-KEY': 'your-api-key' }}
      ),
      axios.get(
        'https://your-service-id.microcms.io/api/v1/blog',
        { headers: { 'X-API-KEY': 'your-api-key' }}
      )
    ])

    return {
      items: res[0].data.contents,
      blogs: res[1].data.contents
    }
  }
}

Comments

[takumiisobe_]

正常に動作しました！ありがとうございます！