前面已经写了一篇文章描述
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
中包含了多个至关重要的软件包
apollo-client
: 客户端功能的灵魂。apollo-cache-inmemory
: 一个强大的缓存管理包【前面几篇关于缓存管理的都和他有关】apollo-link-http
: 用于获取远程数据的apollo
链接apollo-link-error
: 用于错误处理的apollo
链接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的一些功能。
<ApolloProvider client={client}>
<RootComponent />
</ApolloProvider>,
接下来就可以使用react-apollo
中的组件了,很方便的和GraphQL
进行数据交互。这些功能的实现依托于Query和Mutation组件,具体的实现,耐心的看一下官网。
三:最后的话
Apollo Client
确实是非常的强大,有些复杂的功能已经封装好了。官方文档很重要,我只是看了冰山一角,堪堪入门。要耐心,细心,用心。