GraphQL 入门: Apollo Client - 安装和配置选项

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的交互式学习项目