简而言之

本文将介绍如何在Vuex存储中处理GraphQL的方法。

在Nuxt.js中，有详细的说明来介绍如何从Vue组件中处理GraphQL以及如何在Nuxt项目中引入GraphQL的方法。

假设Apollo客户端的安装和设置已经完成。

查询的发出

在Vuex存储中，可以通过this.app.apolloProvider.defaultClient来访问Apollo客户端。

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)
  }
}

{
  user {
    id
  }
}

另外，还可以将查询内容直接写在代码中，如下所示。
（需要安装和导入graphql-tag软件包）

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()函数。

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

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

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

变量的发行（有突变）

当使用变异时，我认为发送的内容通常是不断变化的。在这种情况下，将变量存储在mutate()函数的变量中。

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,
        }
      }
    )
  }
}

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

在上述的第二个$user中，将会使用mutate()函数中指定的变量$user的值。

心得
印象
看法

不论是Nuxt还是GraphQL，目前关于它们的信息还比较有限，可能会有一些困扰，但一旦熟悉了，就会变得非常方便和好用。