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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sun_DongLiang/article/details/87907619

前面已经写了一篇文章描述
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 ClientReact环境下的集成包之一。
本篇文章就是Apollo ClientReact环境下的集成包----React Apollo
在这里插入图片描述
前面说的很清楚了,apollo-clientGraphQLJavaScript客户端工具。因此只要当你存在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是不可缺少的。因为ApolloClientGraphQL的客户端工具,因此uri地址也必须是GraphQL服务器地址。
此时我们创建了ApolloClient的客户端实例,就可以使用apollo-client的方法去和GraphQL服务器进行交互。这里因为主要说react-apollo就不再过多描述,之后我会写一篇博客描述使用apollo-client的原生方法,在组件的外部调用querymutate去进行交互。

二:ApolloProvider
reactreact-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进行数据交互。这些功能的实现依托于QueryMutation组件,具体的实现,耐心的看一下官网。
三:最后的话
Apollo Client确实是非常的强大,有些复杂的功能已经封装好了。官方文档很重要,我只是看了冰山一角,堪堪入门。要耐心,细心,用心。

猜你喜欢

转载自blog.csdn.net/sun_DongLiang/article/details/87907619
今日推荐