Vue Academy · レッスン

Vue 3でのApollo Client設定

ApolloClient、InMemoryCache、provideApolloClient()、@vue/apollo-composableの設定

「Vue 3でのApollo Client設定」はCoddyKit上の無料Vue Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

VueでGraphQLを使う

GraphQLを使うと、クライアントは必要なデータだけを1回のリクエストで要求できます。Apollo Clientは最も広く使われているGraphQLクライアントで、@vue/apollo-composableはVue 3のComposition APIと統合します。

パッケージのインストール

Apolloのコア、GraphQLパーサー、Vue用のコンポーザブル層が必要です。

npm install @apollo/client graphql @vue/apollo-composable

クライアントの作成

Apolloクライアントには、サーバーのuriとキャッシュが必要です。InMemoryCacheはクエリ結果を保存するため、繰り返しの読み取りを瞬時に行えます。

import { ApolloClient, InMemoryCache } from '@apollo/client/core'

const apolloClient = new ApolloClient({
  uri: 'https://api.example.com/graphql',
  cache: new InMemoryCache()
})

キャッシュの役割

InMemoryCacheはエンティティIDに基づいてレスポンスを正規化します。2つのクエリが同じオブジェクトを返す場合、キャッシュには1回だけ保存され、更新するとそれを使用するすべてのビューが更新されます。

クライアントの提供

すべてのコンポーネントでクエリを実行できるように、クライアントをアプリ全体に登録します。DefaultApolloClientのインジェクションキーによって、Composition APIに接続されます。

import { DefaultApolloClient } from '@vue/apollo-composable'
import { createApp, provide, h } from 'vue'

const app = createApp({
  setup() {
    provide(DefaultApolloClient, apolloClient)
    return () => h(App)
  }
})

複数のクライアント

複数のGraphQLエンドポイントを使用する場合は、ApolloClientsマップを提供し、それぞれのクライアントに名前を付けます。コンポーネントではclientIdオプションで使用するクライアントを選択します。

import { ApolloClients } from '@vue/apollo-composable'

provide(ApolloClients, {
  default: apolloClient,
  analytics: analyticsClient
})

provideApolloClient

コンポーネントのsetup外（たとえばコンポーザブル内）では、provideApolloClientを使ってuseQuery呼び出しでクライアントを利用できるようにします。

import { provideApolloClient } from '@vue/apollo-composable'

provideApolloClient(apolloClient)
// now useQuery works in this composable

認証ヘッダーの追加

実際のAPIには認証トークンが必要です。クライアントのオプションでheadersを設定するか、Apollo linkを使ってすべてのリクエストにトークンを付加します。

const apolloClient = new ApolloClient({
  uri: '/graphql',
  cache: new InMemoryCache(),
  headers: {
    Authorization: 'Bearer ' + token
  }
})

デフォルトオプションの設定

defaultOptionsフィールドでは、デフォルトのフェッチポリシーなどの動作を調整できます。たとえば、常に最初にキャッシュから読み取るように設定できます。

const apolloClient = new ApolloClient({
  uri: '/graphql',
  cache: new InMemoryCache(),
  defaultOptions: {
    watchQuery: { fetchPolicy: 'cache-and-network' }
  }
})

最初のクエリを書く

@apollo/client/coreのgqlテンプレートタグを使ってクエリを定義します。これによりGraphQL文字列が、Apolloが理解できるドキュメントにパースされます。

import { gql } from '@apollo/client/core'

const GET_POSTS = gql(
  'query { posts { id title } }'
)

セットアップの確認

クライアントを提供すると、どのコンポーネントからでもそのドキュメントを使ってuseQueryを呼び出せます。データが返ってくれば、クライアントとプロバイダーは正しく接続されています。

理解度チェック

Apolloのセットアップに関する理解度を確認します。

まとめ

Vue 3でApolloをセットアップしました。

uriとInMemoryCacheを指定してApolloClientを作成します。
キャッシュはエンティティIDに基づいて結果を正規化します。
DefaultApolloClient（複数の場合はApolloClients）で提供します。
コンポーザブル内ではprovideApolloClientを使用し、gqlでクエリを定義します。

よくある質問

「Vue 3でのApollo Client設定」レッスンは無料ですか？

はい。「Vue 3でのApollo Client設定」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「Vue 3でのApollo Client設定」で何を学びますか？

ApolloClient、InMemoryCache、provideApolloClient()、@vue/apollo-composableの設定ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「Vue 3でのApollo Client設定」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Vue Academyに戻る