GraphQL 入门: 简介
GraphQL 入门: Apollo Client - 简介
GraphQL 入门: Apollo Client - 安装和配置选项
GraphQL 入门: Apollo Client - 连接到数据
GraphQL 入门: Apollo Client - 网络层
GraphQL 入门: Apollo Client - 开发调试工具
GraphQL 入门: Apollo Client - 持久化GraphQL查询概要
GraphQL 入门: Apollo Client - 存储API
GraphQL 入门: Apollo Client - 查询(Batching)合并

安装

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

npm install react-apollo --save

如果你在一个没有全局fetch实现的环境中(浏览器不支持Fetch API),请确保安装 whatwg-fetch 或则

Polyfill是一个英国产品,在美国称之为Spackling Paste(译者注:刮墙的,在中国称为腻子).记住这一点就行:把旧的浏览器想象成为一面有了裂缝的墙.这些[polyfills]会帮助我们把这面墙的裂缝抹平,还我们一个更好的光滑的墙壁(浏览器)

Fetch API 用于代替 XMLHttpRequest
Fetch API 请参考 https://github.github.io/fetch/

初始化

要在React中使用Apollo,需要创建一个 ApolloClient和一个ApolloProvider.

ApolloClient 用户管理作为缓存的查询存储,以及分发查询结果. ApolloProvider 用于关联ApolloClient到React组件.

创建一个客户端

创建一个客户端示例,并且指向GraphQL服务器:

import { ApolloClient } from 'react-apollo';
// 默认情况客户端会发送到相同主机名(域名)下的/graphql端点
const client = new ApolloClient();

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

import { ApolloClient,createNetworkInterface } from 'react-apollo';
const client = new ApolloClient({
  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';

# 实例化 ApolloClient

const client = new ApolloClient({
  networkInterface: createNetworkInterface({ uri: 'http://my-api.graphql.com' }),});

# 挂载组件

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

身份验证

对于身份验证,采用JWT,把 Token 存储在浏览器的 LocalStorage 里面,可以通过下面的方法,设置 Authorization 请求头.

# Middleware,顾名思义,中间件,常用的一种修改软件行为的模式. 
# Windows 编程叫钩子(Hooks),起拦截器的作用,这里主要是在请求发出之前,修改,增加HTTP请求头.

networkInterface.use([{
  applyMiddleware(req,next) {
    if (!req.options.headers) {
      req.options.headers = {};  // 如果需要,创建 header 对象.
    }
    
    # 设置 JWT TOKEN
    
    if(localStorage.getItem('token')){
      req.options.headers['Authorization'] = 'Login ' + localStorage.getItem('token')
    }
    
    # 注意,中间件是一个链,如果还需要把请求传递给下一个中间件,这个函数是必须的. 
    # 也可以用于逻辑判断,瞒住条件,网下走,不满足条件中断流程.
    # if (condition == true) {
    #   next();
    # }
    # else {
    #   console.error("Error: could not meet the condition");
    # }
    next();
  }
}]);

参考资料

• http://dev.apollodata.com/rea...

• Apollo的交互式学习项目