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(
,
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();
}
}]);