【Nuxt】APIで呼び出す方法いろいろ
はじめに
NuxtからAPIコールする方法を整理したかったので自分用に学習の記録です。
axios （~Nuxt2）
$axiosは、Nuxt.jsによって提供されるaxiosのインスタンスで、標準のaxiosと同じように使えます。
使用例
<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リクエストを送信してレスポンスを取得することができます。
使用例
<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コールを非同期で実行し、結果を自動的に管理するために使用されます。
使用例
<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クライアント設定は省きます🙇
使用例
<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メソッドは、サーバーサイドで実行されますが、クライアントでも使用できます）
参考資料
Discussion