首先

我认为在Vue和Nuxt中处理GraphQL与Apollo时，经常使用的是vue-apollo。
vue-apollo是一个非常强大的库，可以使用缓存和通过gql识别查询，非常方便。但另一方面，对于初次使用的人来说可能会觉得门槛高。
特别是如果不理解缓存，可能会出现数据更新了但不会反映出来的情况。

所以，我想在使用Nuxt尝试GraphQL的过程中，寻找比vue-apollo更容易上手的选择，我觉得prisam/graphql-request可能更适合。

看到这样的描述，我感觉正好合适。

所以，這次我們試著使用prisam/graphql-request來實現一個處理GraphQL的例子。

实物结果

这次实施的样本已经放在这里了。

前提 tí)

引入graphql-request

只需要使用npm / yarn进行安装即可。

yarn add graphql-request

添加一个处理GraphQL的示例页面

<template>
-<v-app dark>
+<v-app>
.
.
.
</template>
<script>
  export default {
    data() {
      return {
        clipped: false,
        drawer: true,
        fixed: false,
        items: [
          { icon: 'apps', title: 'Welcome', to: '/' },
          { icon: 'bubble_chart', title: 'Inspire', to: '/inspire' },
+         { icon: 'fiber_new', title: 'GraphQL', to: '/graphql' }
        ],
        miniVariant: false,
        right: true,
        rightDrawer: false,
        title: 'Vuetify.js'
      }
    }
  }
</script>

<template>
  <v-layout>
    <v-flex text-xs-center>
      <h1>GraphQLサンプルページ</h1>
    </v-flex>
  </v-layout>
</template>

试用一下

试着执行查询

我会参考使用方法来进行实现。由于篇幅原因省略了模板和样式，请参阅示例存储库。

<script>
import { request, GraphQLClient } from 'graphql-request'

export default {
  data() {
    return {
      client: 0,
      endPoint: 'http://127.0.0.1:8000/graphql',
      users: []
    }
  },
  created() {
    this.clientInitialize()
  },
  methods: {
    clientInitialize() {
      this.client = new GraphQLClient(this.endPoint, { headers: {} })
    },
    getUsers() {
      const query = `
        query users($count: Int!) {
          users(count: $count) {
            data {
              id
              name
              email
            }
          }
        }
      `
      const variables = { count: 10 }

      this.client.request(query, variables).then(data => (this.users = data.users.data))
    }
  }
}
</script>

我們試著進行突變試驗

由于变异不会改变查询的描述，因此我们将直接按原样写入。

<script>
import { GraphQLClient } from 'graphql-request'

export default {
  data() {
    return {
      client: 0,
      endPoint: 'http://127.0.0.1:8000/graphql',
      users: [],
      editId: null,
      editName: null,
      editEmail: null
    }
  },
  created() {
    this.clientInitialize()
  },
  methods: {
    clientInitialize() {
      this.client = new GraphQLClient(this.endPoint, { headers: {} })
    },
    getUsers() {
      const query = `
        query users($count: Int!) {
          users(count: $count) {
            data {
              id
              name
              email
            }
          }
        }
      `
      const variables = { count: 10 }

      this.client.request(query, variables).then(data => (this.users = data.users.data))
    },
    updateUser() {
      const query = `
        mutation updateUser(
          $id: ID
          $name: String
          $email: String
        ) {
          updateUser(
            id: $id
            name: $name
            email: $email
          ) {
            id
            name
            email
          }
        }
      `
      const variables = { id: this.editId, name: this.editName, email: this.editEmail }

      this.client.request(query, variables).then(data => {
        // dataのusersを更新してあげたほうが無駄な通信は発生しませんが、
        // 今回は味見目的なので更新後はまるっと読み込み直しています
        this.getUsers()
      })

      this.resetEditValues()
    },
    setEditValues(user) {
      this.editId = user.id
      this.editName = user.name
      this.editEmail = user.email
    },
    resetEditValues() {
      this.editId = null
      this.editName = null
      this.editEmail = null
    }
  }
}
</script>

最后

我本来想要给出更多实用的例子来结束，但只停留在了查询和变更操作。
由于这篇文章的内容，只要看 README 就足够了，所以我打算在适当的时候添加有关实际使用中的模块化示例。