Vue.js
GraphQL
Vuex
nuxt.js

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も情報がまだ少なくつらみがありますが、慣れると便利でよいですね。