graphQL在前端vue中使用过程

通过工具来探索graphQL

GraphQL 为文档和测试查询提供了丰富的开发工具。GraphiQL 是一个出色的工具，可以生成查询及其模式的文档。它还提供了一个查询编辑器，用于在构建查询时测试 GraphQL API 和智能代码完成功能。国内资料很少，我就摸石头过河了。
前端开放学习手动感知graphQL，网址：https://countries.trevorblades.com/

• 如图：这样的页面根据后端实现graphQL的支持就行，两个部分，帮助你理解。如何去查询。

根据页面的智能提示，帮助你定位能请求和符合请求的数据

暂时有了这个工具，那就很nice了。那先不考虑一些复杂的权限或者上传之类的，只要你的数据请求的对，就会返回数据。（等我后面 在研究）

感知graphQL

前端vue需要这样的几个插件来启动一个graphQL请求

• 安装Apollo客户端

vue-apollo可以帮助你在应用中使用GraphQL的一套工具。
你可以使用Apollo Boost或 直接使用 Apollo Client(需要更多配置工作)。
我这里用Apollo Boost就可以了，如果你想要更细粒度的控制，可以去看Vue Apollo的文档。

Apollo Boost 是一种零配置开始使用 Apollo Client 的方式。它包含一些实用的默认值，例如我们推荐的InMemoryCache 和 HttpLink，它非常适合用于快速启动开发。

将它与 vue-apollo 和 graphql 一起安装：

npm install --save vue-apollo graphql apollo-boost

注释：vue-apollo：可以帮助你在应用中使用GraphQL的一套工具。
注释：apollo-boost：快速的配置你的请求地址等，也有自己的默认配置。
注释：graphql：安装的时候本身就有一个graphql-tag来提供gql方法。

创建一个ApolloClient 实例

/src/utils/graphql.js

import ApolloClient from 'apollo-boost';

const apolloClient = new ApolloClient({
  // 你需要在这里使用绝对路径
  uri: 'https://countries.trevorblades.com/'
})

export default apolloClient;

添加GraphQL的操作实例

/src/utils/article.js

import gql from 'graphql-tag'
import apolloClient from './graphql'

export function getCityList(){
  return apolloClient.query({
    query:gql`query{
              countries{
                name,
                code,
                native,
                languages {
                  name,
                  rtl
                },
                
              }
          }`
    })
}

这里的网络请求返回还是一个Promise，只需要会Promise实例就能拿到数据。这种方法也不需要再app.js和main.js或者ts中做额外的注入配置等。

测试——REST风格（函数式）

/src/views/test.vue

<template>
  <div>
    <ul>
      <li v-for=" (item,index) in List" :key="index">{{ item.name }}😁{{ item.code }}😁{{ item.native }}</li>
    </ul>
  </div>
</template>

<script lang="ts">

import { Component, Vue ,Watch} from 'vue-property-decorator';
import {getCityList} from '@/utils/article'
@Component({
  components: {
   
  },
})
export default class HomeView extends Vue {
    List:any[] = [];
    mounted(){
      getCityList().then(res=>{
        console.log(res);
        this.List = res.data.countries
      });
      
    }
}

</script>

<style lang="less" scoped>

</style>

可以看出返回的res对象有四个属性，

• 主要的数据对象「data」
• 「loading」，加载的状态
• 「networkStatus」，网络状态码
• 「stale」，是否过期
  
  GraphQL 查询有助于顺利检索关联的业务对象，而典型的 REST API 需要使用多个 URL 进行加载。GraphQL API 在单个请求中获取应用程序所需的所有数据。即使在缓慢的移动网络连接上，使用 GraphQL 的应用程序也可以很快。（来自网络）

统一一些概念

对象类型和字段（Object Types and Fields）
一个 GraphQL schema 中的最基本的组件是对象类型，它就表示你可以从服务上获取到什么类型的对象，以及这个对象有什么字段。使用 GraphQL schema language，我们可以这样表示它：
有模型类型啥的，我们去如何理解他呢？假如有以下的数据模型

type Country {
  code: ID!
  name: String!
  native: String!
  phone: String!
  continent: Continent!
  capital: String
  currency: String
  languages: [Language!]!
  emoji: String!
  emojiU: String!
  states: [State!]!
}
type Language {
  code: ID!
  name: String
  native: String
  rtl: Boolean!
}
//Query里面的就是查询的模型，上面两个type是模型的字段定义，可以嵌套定时type。
type Query {
	①country(code: ID!): Country
	②continents(filter: ContinentFilterInput): [Continent!]!
  	③language(code: ID!): Language
}

有以上的这样一个查询模型：

虽然这语言可读性相当好，但我们还是一起看看其用语，以便我们可以有些共通的词汇：

• Language 是一个 GraphQL 对象类型，表示其是一个拥有一些字段的类型。你的 schema 中的大多数类型都会是对象类型。
• code 和 name 还有后面的字段是 Language 类型上的字段。这意味着在一个操作 Language 类型的 GraphQL 查询中的任何部分，都只能出现 name 和 code 和剩下那些被定义的字段。
• String 是内置的标量类型之一 —— 标量类型是解析到单个标量对象的类型，无法在查询中对它进行次级选择。后面我们将细述标量类型。
• String! 表示这个字段是非空的，GraphQL 服务保证当你查询这个字段后总会给你返回一个值。在类型语言里面，我们用一个感叹号来表示这个特性。
• [Continent!]!表示一个Continent 数组。因为它也是非空的，所以当你查询 Continent 字段的时候，你也总能得到一个数组（零个或者多个元素）。且由于 Continent! 也是非空的，你总是可以预期到数组中的每个项目都是一个 Continent 对象。
• 每一个 GraphQL 服务都有一个 query 类型，可能有一个 mutation 类型。这两个类型和常规对象类型无差，但是它们之所以特殊，是因为它们定义了每一个 GraphQL 查询的入口。例如①②③号查询模型。
• 对于①③查询接口，那就是意思是查询必须带上这个非空类型的唯一标识ID，不然会提醒你。
  现在你知道一个 GraphQL 对象类型看上去是怎样，也知道如何阅读基础的 GraphQL 类型语言了。

Query查询

后端是如何去定义这个模型，暂时不关注，我们只关注，这个模型上的数据我该如何去取？以及有条件的取？
GraphQL 操作可以是读取或写入操作。

• GraphQL Query（查询）用于读取或获取值
• Mutation （改变）用于写入或发布值。
  先来一下字段解析：

import gql from 'graphql-tag' //通过gql构造一个查询信息
import apolloClient from './graphql' //graphql实例

export function getCityList(){
  return apolloClient.query({  //实例有个query方法，传入参数为一个对象
    query:gql`query{ //这里的query可以取掉。query 关键字是可选的。这里就是查询体。
              countries{ 
                name,
                code,
                native,
                languages {
                  name,
                  rtl
                }
              }
          }`
    })
}

query 关键字是可选的。这里就是查询体

Query有条件的查询，或者叫传入参数式的查询

当你请求某个模型的时候，他就会有智能提示出现。需要传递什么参数，是否为可选，参数的类型是什么，以及这个查询的功能是否提供，都会有智能的提示。

可以在代码中这样写。
相当于写死了这个查询

export function getLanguage(){
  return apolloClient.query({
    query:gql`{
              language(code:"am"){
                name,
                code 
              }
          }`
    })
}

getLanguage().then(res=>{
	console.log(res);
}).catch(err=>{
	console.log("错误捕获",err);
})

有办法能写成入参的形式，但是这样的操作不行

export function getLanguage(value){
  return apolloClient.query({
    query:gql`{
              language(code:value){
                name,
                code 
              }
          }`
    })
}
getLanguage("am").then(res=>{
        console.log(res);
      }).catch(err=>{
        console.log("错误捕获",err);
        
      })