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

约定不等于承诺〃 2022-03-17 13:58 339阅读 0赞

前面已经写了一篇文章描述  
[GraphQL，Apollo Client，PostgreSQL三者的关系和区别][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`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9Eb25nTGlhbmc_size_16_color_FFFFFF_t_70]  
前面说的很清楚了，`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的一些功能。**

<ApolloProvider client={client}>
        <RootComponent />
      </ApolloProvider>,

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

[GraphQL_Apollo Client_PostgreSQL]: https://blog.csdn.net/sun_DongLiang/article/details/86985560
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9Eb25nTGlhbmc_size_16_color_FFFFFF_t_70]: /images/20220317/2f39b5341a124130bcc3ba39f29d597c.png
[Query]: https://www.apollographql.com/docs/react/essentials/queries.html
[Mutation]: https://www.apollographql.com/docs/react/essentials/mutations.html