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

可以看出返回的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: Stringcurrency: Stringlanguages: [Language!]!emoji: String!emojiU: String!states: [State!]!
}
type Language {code: ID!name: Stringnative: Stringrtl: 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);})

在这里插入图片描述