我将使用GraphQL Pokemon来学习GraphQL。

GraphQL是什么？

GraphQL是由Facebook发布的用于Web API的查询语言。

与REST API相比，
1. 只需要一个终端点（如/user、/post/:id等）。
2. 可在客户端自主选择获取的数据。
3. 可以定义请求和响应的数据类型。
等等，有诸多优点。

让我们尝试使用GraphQL。

为了从GraphQL Pokemon控制台获取数据，发送查询。

GraphQL有三种类型的查询：
– query（获取数据）使用GET请求
– mutation（更新数据）使用POST/PUT/DELETE等请求
– subscription（从服务器端接收事件通知）通过Websocket实现

比如要获取皮卡丘的名字，可以使用query。

query {
  pokemon(name: "pikachu") {
    name
  }
}

将这个查询复制到GraphQL Pokemon控制台上，然后点击[▶]按钮……

屏幕会变成这样吗？ huì ma?)

在右侧显示对查询的响应，我们可以看到只能获取到皮卡丘的名字。

---

---

那么，让我们尝试将GraphQL集成到项目中。

创建Nuxt项目

出于个人原因，我将在Nuxt.js中使用GraphQL。

$ npx create-nuxt-app poke-gql

create-nuxt-app v3.4.0
✨  Generating Nuxt.js project in poke-gql
? Project name: poke-gql
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: None
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert se
lection)
? Linting tools: ESLint, Prettier
? Testing framework: None
? Rendering mode: Single Page App
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert 
selection)
? Continuous integration: None
? Version control system: Git

阿波罗客户端

为了在客户端使用GraphQL，需要使用一个叫做 Apollo Client 的库。

可以安装@nuxtjs/apollo模块，它可以使Nuxt.js更加易于使用Apollo Client。

$ yarn add @nuxtjs/apollo

---

完成引入依赖后，您需要在nuxt.config.js文件中添加配置。

在“~/plugins/apollo-auth.js”文件中添加clientOptions的定义。请手动创建。

modules: ['@nuxtjs/apollo'],
  apollo: {
    clientConfigs: {
      default: '~/plugins/apollo-auth.js',
    },
  },

点击插件/apollo-auth.js

export default () => {
  return {
    httpEndpoint: 'https://graphql-pokemon2.vercel.app/',
  }
}

这个URL是GraphQL Pokemon控制台的网址。

写查询

将查询内容写入到~/apollo/queries/getPokemons.gql文件中。

创建一个名为apollo的文件夹
创建一个名为apollo/queries的文件夹
在apollo/queries中创建一个名为getPokemons.gql的文件

query GetPokes{
  pokemons(first: 151){
    number
    image
  }
}

查询中的GetPokes是指什么？

在查询中，您可以指定操作类型和操作名称。

操作类型

表示执行的操作类型（查询、修改、订阅）
基本必需。

操作名称

明确指示查询执行的操作的名称
可选，但推荐使用，便于调试和服务器端日志收集。

---

这次的查询从pokemon变成了pokemons。
参数也从name变成了first，并且现在接受数字作为输入。

可以在GraphiQL页面右侧的Doc（文档资源浏览器）中查看可用的查询选项。

---

将字段与相对应的类型放入模式中，这种描述被称为模式。

通过遵循GraphQL API规范的定义，可以执行查询以获取数据。

---

让我们将回应显示在模板中。

<template>
  <div>
    <div v-for="poke in pokemons" :key="poke.id">
      {{ poke.number }}
      <img width="100" height="100" :src="poke.image" />
    </div>
  </div>
</template>

<script>
import getPokes from '~/apollo/queries/getPokemons.gql' // ・・・①

export default {
  data() {
    return {
      pokemons: [], // ・・・③
    }
  },
  apollo: {
    pokemons: {
      query: getPokes, // ・・・②
    },
  },
}
</script>

将所述查询导入。
添加apollo对象，并在其中定义属性。
在data属性中设置初始值。初始值的定义应与查询的字段匹配。

---

好的，这次的查询是用来获取指定数量的宝可梦以及这些宝可梦的数据。
数据包括数字和图片。

我会确认表达方式。

小精靈們正在展示中！

大家一起捉迷藏宝可梦吧！

赠品

使用变量

您可以在apollo对象的variables属性中传递变量给查询。

apollo: {
    pokemons: {
      query: getPokes,
      variables: {
        num: 1,
      },
    },
  },

query GetPokes($num: Int!){
  pokemons(first: $num){
    number
    image
  }
}

---

将变量设为响应式

通过将变量转换为函数，使其具有响应性。

apollo: {
    pokemons: {
      query: getPokes,
      variables() {
        return {
          num: this.num,
        }
      },
    },
  },

---

这是我使用的$apollo。

我之前通过apollo对象访问apollo-client实例来进行操作，这种方法被称为Smart Query。

这次我们将尝试使用this.$apollo来访问apollo-client实例。

async created() {
    this.pokemons = await this.$apollo.query({
      query: getPokes2,
      variables: {
        num: this.num,
      },
    })
  },

这个 this.$apollo.query 返回一个 Promise。

---

加载中

你可以通过使用 this.$apollo.loading 来检测加载状态。

<div v-if="$apollo.loading">ちょっと まってね</div>