摸索graphQL在前端vue中使用过程（一）
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
- {{ item.name }}😁{{ item.code }}😁{{ item.native }}
可以看出返回的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);})
