📲

【Nuxt】APIで呼び出す方法いろいろ

2023/05/09に公開

はじめに

NuxtからAPIコールする方法を整理したかったので自分用に学習の記録です。

axios (~Nuxt2)

$axiosは、Nuxt.jsによって提供されるaxiosのインスタンスで、標準のaxiosと同じように使えます。
https://axios.nuxtjs.org/

使用例

<template>
  <div>
    <h1>Posts</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios }) {
    const response = await $axios.get('https://jsonplaceholder.typicode.com/posts')
    return { posts: response.data }
  }
}
</script>

このコードは、https://jsonplaceholder.typicode.com/posts からJSON形式の投稿データを取得し、その投稿のタイトルを表示します。asyncData関数は、サーバーサイドで実行され、ページをレンダリングする前に実行されます。上記の例では、$axios.get()を使用してAPIからデータを取得し、応答はresponse.dataで取得できます。取得したデータを、returnで返すことで、テンプレートから参照できるようになります。

Fetch API

fetchメソッドは、ES6から導入された標準的なJavaScriptの機能で、非同期処理を実行し、HTTPリクエストを送信してレスポンスを取得することができます。
https://develop365.gitlab.io/nuxtjs-2.8.X-doc/ja/api/pages-fetch/

使用例

<template>
  <div>
    <h1>Posts</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      posts: []
    }
  },
  async fetch() {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts')
    const data = await response.json()
    this.posts = data
  }
}
</script>

このコードは、https://jsonplaceholder.typicode.com/posts からJSON形式の投稿データを取得し、その投稿のタイトルを表示します。fetchメソッドは、サーバーサイドまたはクライアントサイドで実行され、ページをレンダリングする前に実行されます。

上記の例では、fetch()を使用してAPIからデータを取得しています。応答は、response.json()で取得できます。取得したデータは、Vueコンポーネントのdataプロパティに代入され、テンプレートから参照できるようになります。

useFetch (Composition API)

useFetchフックは、Vue.jsのComposition APIの一部であり、Vue.js 3.xで導入されました。これは、Vue.jsコンポーネント内で非同期処理を簡単に実行するために使用されます。このフックを使用すると、コンポーネントのデータとエラーメッセージを自動的に更新できます。また、useFetchフックは、リアクティブなデータとして取得したデータを扱うことができます。useFetchフックは、APIコールを非同期で実行し、結果を自動的に管理するために使用されます。
https://nuxt.com/docs/getting-started/data-fetching/#usefetch

使用例

<template>
  <div>
    <ul>
      <li v-for="post in posts" :key="post.id">
        {{ post.title }}
      </li>
    </ul>
  </div>
</template>

<script>
import { useFetch } from '@nuxtjs/composition-api'

export default {
  setup() {
    const { data, error } = useFetch('https://jsonplaceholder.typicode.com/posts')

    if (error.value) {
      console.error(error.value)
    }

    return { posts: data.value }
  }
}
</script>

このコードは、JSONPlaceholder APIから投稿データを取得し、その投稿のタイトルを表示します。useFetchフックを使用して、APIエンドポイントのURLを渡し、取得したデータをVueコンポーネントのdataプロパティに代入しています。

dataプロパティには、APIから取得したデータが含まれています。errorプロパティには、APIコール中に発生したエラーが含まれています。この例では、useFetchフックを使用してAPIコールを実行し、取得したデータをVueコンポーネントのdataプロパティに代入しています。APIコール中にエラーが発生した場合は、エラーをコンソールに出力しています。

Apollo

@nuxtjs/apolloのインストールやconfigのApolloクライアント設定は省きます🙇
https://apollo.nuxtjs.org/

使用例

<script>
import { ApolloClient, InMemoryCache, gql } from '@apollo/client'

export default {
  data() {
    return {
      posts: []
    }
  },
  async asyncData({ $apollo }) {
    const { data } = await $apollo.query({
      query: gql`
        query {
          posts {
            id
            title
          }
        }
      `
    })
    return { posts: data.posts }
  }
}
</script>

このコードは、GraphQL APIから投稿データを取得し、その投稿のタイトルを表示します。asyncDataメソッドを使用して$apolloインスタンスを介してGraphQLクエリを実行し、その結果をVueコンポーネントのdataプロパティに代入しています。

gql関数は、GraphQLクエリをパースするために使用されます。queryフィールドの下に、実際のGraphQLクエリを記述することができます。(実際は直接記述することは少なそう💦)

この例では、Apollo Clientが自動的にGraphQL APIにリクエストを送信し、取得したデータをVueコンポーネントのdataプロパティに代入しています。(asyncDataメソッドは、サーバーサイドで実行されますが、クライアントでも使用できます)

参考資料

https://www.memory-lovers.blog/entry/2022/06/02/170000
https://takumon.com/nuxt-apollo-with-graphpack/
https://b1san-blog.com/post/nuxtjs/nuxt-axios/

Discussion