Nuxt でストアから GraphQL を扱う方法

概要

この記事ではVuexストア内からGraphQLを扱う方法を解説します。

Vueコンポーネントから扱う方法や、NuxtプロジェクトにGraphQLを導入する方法自体は、Nuxt.jsでGraphQLを扱う方法に詳しく解説されています。

※以下ではApolloクライアントの導入および設定はできているものとします。

クエリの発行

Vuexストア内ではthis.app.apolloProvider.defaultClient でApolloクライアントにアクセスできます。

store/index.js

import fetchUser from '~/apollo/queries/fetchUser'

export const actions = {
  async fetchUser(context) {
    const response = await this.app.apolloProvider.defaultClient.query({
      query: fetchUser,
    })

    console.log(response)
  }
}

apollo/queries/fetchUser.graphql

{
  user {
    id
  }
}

また、以下のようにクエリをベタ書きすることもできます。
（graphql-tagパッケージのインストール＆インポートが必要です）

store/index.js

import gql from 'graphql-tag'

export const actions = {
  async fetchUser(context) {
    const response = await this.app.apolloProvider.defaultClient.query({
      query: gql`
        {
          user {
            id
          }
        }
      `,
    })

    // ユーザーIDをセットする
    context.commit('setUser', response.data.user.id)
  }
}

ミューテーションの発行（変数なし）

ミューテーションの場合はmutate()関数を使用します。

store/index.js

import updateUser from '~/apollo/mutations/updateUser'

export const actions = {
  async updateUser(context) {
    const response = await this.app.apolloProvider.defaultClient.mutate(
      {
        mutation: updateUser,
      }
    )
  }
}

apollo/mutations/updateUser.graphql

{
  updateUser(
    user: { id: 1, nickname: 'nick' }
  )
}

ミューテーションの発行（変数あり）

ミューテーションを使う場合、送る内容はつど変わるのが普通だと思います。
そういう場合は変数をmutate()のvariablesに格納します。

store/index.js

import updateUser from '~/apollo/mutations/updateUser'

const user = {
  id: 1,
  nickname: 'nick',
}

export const actions = {
  async updateUser(context) {
    const response = await this.app.apolloProvider.defaultClient.mutate(
      {
        mutation: updateUser,
        variables: {
          user: user,
        }
      }
    )
  }
}

apollo/mutations/updateUser.graphql

mutation updateUser(
  $user: UserInput
) {
  updateUser(
    user: $user
  )
}

上記の2番目の$userに、mutate()のvariablesに指定したuserの値が入る形になります。

感想

NuxtもGraphQLも情報がまだ少なくつらみがありますが、慣れると便利でよいですね。