Nuxt.js と @nuxtjs/apollo 構成で @vue/apollo-composable を使えるようにする

apollo-composable を使えるようにしたい！

みなさん、こんにちは。どんぶラッコです。

Nuxt.js に Apollo を導入して GraphQL形式の情報を取得するために @nuxtjs/apollo パッケージを使ってセットアップをしています。

しかし、時代は Composition API の時代。 Vue3文法でも apolloを使えるようにしたい！

Vue Apollo ( @nuxtjs/apollo の基になってるやつ ) ではそんな時は apollo-composable を使いな〜！とアナウンスしてくれています。

よっしゃ！ nuxt.jsでもやったろ…と思うと、「どうやったらいいんだ？」となってしまい、結構情報を探しました。

下記の issueをベースに連携させることができたので、その設定方法と何をやっているのかの解説を書いておこうと思います！

手順

plugins/provideApolloClient.ts を作成する

import { provide, onGlobalSetup } from '@nuxtjs/composition-api'
import { DefaultApolloClient } from '@vue/apollo-composable'
import { Context } from '@nuxt/types'

export default ({ app }: Context) => {
  onGlobalSetup(() => {
    const apolloClient = app.apolloProvider.defaultClient
    provide(DefaultApolloClient, apolloClient)
  })
}

Context の形宣言部分を削除してもらえれば JavaScriptとしても動きますね。

nuxt.config.js に追記する

export default {
  plugins: [
    '~/plugins/provideApolloClient.ts' // 追記
  ],

  modules: [
    '@nuxtjs/apollo' // @nuxtjs/apolloは設定ずみという前提です
  ],
}

これで完了です！

解説

改めてプラグインの内容を見ていきましょう。

import { provide, onGlobalSetup } from '@nuxtjs/composition-api'
import { DefaultApolloClient } from '@vue/apollo-composable'
import { Context } from '@nuxt/types'

export default ({ app }: Context) => {
  onGlobalSetup(() => {
    const apolloClient = app.apolloProvider.defaultClient
    provide(DefaultApolloClient, apolloClient)
  })
}

そもそも、pluginでは export default (context, inject) => { } の形式で2つの引数を利用することができます。

今回は context オブジェクトの app を利用しているんですね。

app は vue インスタンスです。なので、vueインスタンス内のプロパティを取得できるわけです。

そして、vue-apollo を導入すると apolloProvider という形式で apolloに関する情報を取得できます。

new Vue({
  el: '#app',
  apolloProvider,
  render: h => h(App),
})

このようにinjectされるようです。

そして、 apolloProvider 内 の defaultClient を取得することで、apolloClient のインスタンスを取得できます！

最後にそれを onGlobalSetup を使って Nuxtのグローバル setup() で呼び出します。

この記事のまとめ

皆さん、うまく設定できたでしょうか？ pluginの性質を理解できればいけますね！