React Apollo：Apollo Client在React中的实现方式

前面已经写了一篇文章描述
GraphQL，Apollo Client，PostgreSQL三者的关系和区别，已经说明GraphQL是一个标准，被称为是一个革命性的API工具。他和REST有着相当大的区别与优势。GraphQL可以让你在客户端的请求中指定希望获取到的数据。也就是你想要什么数据就去请求什么数据，可以随时变更。
而传统的REST只能先在服务器中进行预先定义，前端人员再调用接口去进行数据的请求和接收。这样前后端人员的协作就会受到很大的影响。
在GraphQL的官网中有这么个描述：Apollo Client是一个强大的 JavaScript GraphQL 客户端。被设计用于与React，React Native，Angular2，或者是原生JavaScript一起进行工作。
因此 Apollo Client这种GraphQL客户端在面对不同的前端开发环境时他会有相应的集成包进行工作。而React Apollo 就是Apollo Client在React环境下的集成包之一。
本篇文章就是Apollo Client 在React环境下的集成包----React Apollo

前面说的很清楚了，apollo-client是GraphQL的JavaScript客户端工具。因此只要当你存在GraphQL服务器时，你都可以在你的react项目中使用react-apollo构建一个组件用于从GraphQL服务器中获取数据。

一：创建Client
使用apollo-client就一定要有一个实例去具体的实现各个功能，因此我们需要创建一个客户端实例：client
在创建client之前，首先要npm一个包 apollo-boost
在apollo boost中包含了多个至关重要的软件包

1. apollo-client： 客户端功能的灵魂。
2. apollo-cache-inmemory： 一个强大的缓存管理包【前面几篇关于缓存管理的都和他有关】
3. apollo-link-http： 用于获取远程数据的apollo链接
4. apollo-link-error： 用于错误处理的apollo链接
5. apollo-link-state ： 用于本地状态管理的apollo链接
   此时我们已经引入了这个包了。开始创建客户端实例client了。

import ApolloClient from "apollo-boost"

使用引入的ApolloClient创建一个客户端对象

const client = new ApolloClient({
  uri: "//GraphQL服务器地址"
})

这个uri是不可缺少的。因为ApolloClient是GraphQL的客户端工具，因此uri地址也必须是GraphQL服务器地址。
此时我们创建了ApolloClient的客户端实例，就可以使用apollo-client的方法去和GraphQL服务器进行交互。这里因为主要说react-apollo就不再过多描述，之后我会写一篇博客描述使用apollo-client的原生方法，在组件的外部调用query和mutate去进行交互。

二：ApolloProvider
react和react-native有着分不清的关系，下面的描述中就以react统称。
在react项目中使用apollo-client的前提条件就是能够提供一个apollo-client实例。但是如果apollo-client的实例在react-native中直接使用方便的话，那还要react-apollo干什么？？因此他就要依靠react-apollo中的ApolloProvider组件将apollo-client创建出来的的client实例传递给react组件树。这样在react项目中才能够使用apollo-client。
因此，我将react-apollo比喻成中国式英语。

import { ApolloProvider } from 'react-apollo'

接下来client会依靠这个组件，全面覆盖影响到整个react组件树
注意：ApolloProvider必须是在根组件之上，否则会影响到apollo的一些功能。

 
    
  ,

接下来就可以使用react-apollo中的组件了，很方便的和GraphQL进行数据交互。这些功能的实现依托于Query和Mutation组件，具体的实现，耐心的看一下官网。
三：最后的话
Apollo Client确实是非常的强大，有些复杂的功能已经封装好了。官方文档很重要，我只是看了冰山一角，堪堪入门。要耐心，细心，用心。