Graphql学习-02

安装

要在React中使用Apollo，需要按照apollo-client，以及react-apollo集成包，以及graphql-tag库用于构造查询文档

npm install react-apollo --save

如果你在一个没有全局fetch实现的环境中(浏览器不支持Fetch API), 请确保安装 whatwg-fetch 。Fetch API用于代替XML HttpRequest 

Fetch API 请参考 https://github.github.io/fetch/

初始化

要在React中使用Apollo，需要创建一个ApolloClient 和一个ApolloProvider。

ApolloClient用户管理作为缓存的查询存储，以及分发查询结果，APolloProvider用于关联ApolloClient到react组件。

创建一个客户端

创建一个客户端示例，并且指向graphql服务器。

import {ApolloClient} from 'react-apollo'

const client = new ApolloClient();//默认情况下，客户端会发送到相同主机名（域名）下的graphql端点。

客户端可以携带各种选项, 在特殊情况下, 如果你想修改GraphQL服务器的URL, 可以创建一个自定义的NetworkInterface:

import{ ApolloClient, createNetworkInterface }from'react-apollo';constclient =newApolloClient({networkInterface: createNetworkInterface({uri:'http://my-api.graphql.com'}),});

ApolloClient 还有一些控制客户端行为的选项, 在 Use GraphQL with React 文档中可以找到.

创建一个Provider

要连接客户端实例到React组件树, 需要用到ApolloProvider组件. 你需要确保ApolloProvider作为一个容器去包裹其他的需要访问GraphQL服务器数据的React组件.

# 导入需要的模块

import{ ApolloClient, ApolloProvider }from'react-apollo';

# 实例化

 ApolloClientconstclient =newApolloClient({ networkInterface: createNetworkInterface({ uri:'http://my-api.graphql.com'}),});

# 挂载组件

ReactDOM.render( <ApolloProvider client={client}><MyRootComponent></ApolloProvider>,document.getElementById('App'))