react-native+apollo调教手册

随着前端的快速产品迭代，过去我们常用的REST API就显得太不灵活了，无法满足前端快速变化的需求。 GraphQL的诞生就是为了满足更高灵活性和效率的需求，解决了REST API的许多缺点和低效问题！它支持声明性数据提取，可以与React完美地结合构建用户界面。

Apollo Client是使用GraphQL构建客户端应用程序的最佳方式。可以快速构建使用GraphQL获取数据的UI，并且可以与任何JavaScript的前端框架一起使用。

跳过服务端和依赖项，我们需要先创建客户端，让我们可以从服务端获取数据。然后将Apollo Client连接到React-Native，用ApolloProvider包装APP并将客户端放在上下文中，让我们可以在组件树中的任何位置访问它。

App与服务端的通信无非就是取数据(query)和写数据(mutate)，进入正题，我们直接来聊聊react-native如何与Apollo结合来构建UI。

先介绍graphql最具特色的graphql查询字符串模板。

开头声明操作类型，接着自定义操作名称(参数名:数据类型)，!号为必传参数。

是不是很像数据库的关系表，这下前端也可以写SQL语句啦。只要熟悉数据表的结构就可以要什么拿什么，为所欲为。

调用方式:

1.使用graphql()函数包装组件。

如果传入的graphql文档是query，那么prop将被命名data。如果传递了一个mutation，prop将被命名mutate。

graphql()函数的第一个参数是gql``模板，第二个参数是可选配置（比如更改name，传递variables）。

使用compose函数，可以使用具有相同组件的多个query或mutation。为了避免默认名称发生​​冲突，可以使用config.name来为每个query或mutation提供一个新名称。

2.通过client主动调用

有些时候需要我们手动调用query来查询数据，这时候可以通过Apollo的client来发起请求。

可以用withApollo包装组件，从props中获取client。

3.使用Query/Mutation组件包装视图，这是我们最常用的方法。

Query组件：

简单到只需传递一个gql查询字符串，并提供一个this.props.children函数来呈现的内容。

它有许多props，这里列举一些特殊的。

pollInterva：是以指定时间反复从服务端查询 

fetchPolicy：指定组件与Apollo缓存交互方式。默认为“cache-first”。当我们想要避免缓存，可以传递network-only让他每次都是通过重新请求服务端返回结果。

Mutation组件:

使用方法和Query组件基本一样，区别较大的地方是props.children函数。

函数的第一个参数是mutate函数， 需要主动调用它来触发mutation({options})，接收variables，optimisticResponse，refetchQueries，和update等参数; 也可以作为props传递给Mutation组件。

variables是触发mutation需要传递的参数。

optimisticResponse是用来做乐观更新的自定义data。  

refetchQueries用来触发指定的query，常用来更新其它关联的UI。 

update是在mutation结束后所做的操作，常用来更新指定的客户端cache。

具体用法详见：React Apollo mutation tips（2）

第二个参数是mutate后的结果以及状态。

apollo的使用介绍到此为止啦，写的不是很好，有疑问欢迎留言，不对的地方也请不吝赐教。