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)合并

Apollo client 有一个可插拔的网络接口层,它让你能够配置查询如何通过HTTP进行发送,或者通过Websocket,或者使用客户端模拟数据.

配置网络接口

要创建一个网络接口使用 createNetworkInterface

下面的示例用自定义端点初始化一个新的Client:

import ApolloClient,{ createNetworkInterface } from 'apollo-client';

const networkInterface = createNetworkInterface({ uri: 'https://example.com/graphql' });

const client = new ApolloClient({
  networkInterface,});

如果需要,还可以传递额外的选项给fetch:

import ApolloClient,{ createNetworkInterface } from 'apollo-client';

const networkInterface = createNetworkInterface({ 
  uri: 'https://example.com/graphql',opts: {
    // Additional fetch options like `credentials` or `headers`
    credentials: 'same-origin',}
});

const client = new ApolloClient({
  networkInterface,});

中间件(Middleware)

注: 中间件的概念和Windows编程中的钩子概念类似.

createNetworkInterface创建的网络接口还可以和中间件一起使用,中间件用于在请求发送到服务器之前修改请求. 要使用中间件,需要传递一个对象数组给 networkInterface 的 use 函数,每个对象必须包含有如下参数的 applyMiddleware方法:

req: object
```
由中间件处理的HTTP请求对象.
```
next: function
```
该函数把请求对象往下传递(传递到下一个中间件,如果有多个中间件).
```
下面的例子,显示了如何传递一个身份验证Token给HTTP请求的Header.

import ApolloClient,{ createNetworkInterface } from 'apollo-client';

const networkInterface = createNetworkInterface({ uri: '/graphql' });

networkInterface.use([{
  applyMiddleware(req,next) {
    if (!req.options.headers) {
      req.options.headers = {};  // 如果需要,创建 header 对象.
    }
    req.options.headers['authorization'] = localStorage.getItem('token') ? localStorage.getItem('token') : null;
    next();
  }
}]);

const client = new ApolloClient({
  networkInterface,});

下面的例子显示如何使用多个中间件:

import ApolloClient,{ createNetworkInterface } from 'apollo-client';

const networkInterface = createNetworkInterface({ uri: '/graphql' });
# 用于请求GraphQL服务器的身份标识
const token = 'first-token-value';
const token2 = 'second-token-value';

# 第一个中间件
const exampleWare1 = {
  applyMiddleware(req,next) {
    if (!req.options.headers) {
      req.options.headers = {};  // Create the headers object if needed.
    }
    req.options.headers['authorization'] = token;
    next();
  }
}

# 第二个中间件
const exampleWare2 = {
  applyMiddleware(req,next) {
    if (!req.options.headers) {
      req.options.headers = {};  // Create the headers object if needed.
    }
    req.options.headers['authorization'] = token2;
    next();
  }
}

# 以对象数组的方式传递
networkInterface.use([exampleWare1,exampleWare2]);

# 初始化客户端
const client = new ApolloClient({
  networkInterface,});

Afterware

Afterware 用户请求发送后,并且HTTP响应从服务器返回的时候,一般用于处理HTTP请求的响应. 与中间件不同的是,applyAfterware 方法的参数不同:

{ response }: object
```
一个HTTP响应对象.
```

next: function

传递HTTP响应到下一个 `afterware`.

注: 这个我觉得应该叫做 ResponseHandlers 好像更容易理解. 同理之前的中间件可以称作 RequestHandlers

下面是一个 Afterware 的例子:

import ApolloClient,{ createNetworkInterface } from 'apollo-client';
import {logout} from './logout';

const networkInterface = createNetworkInterface({ uri: '/graphql' });

# 这里使用的是 useAfter
networkInterface.useAfter([{
  applyAfterware({ response },next) {
    if (response.status === 401) {
      logout();
    }
    next();
  }
}]);

const client = new ApolloClient({
  networkInterface,});

多个Afterware的例子:

import ApolloClient,{ createNetworkInterface } from 'apollo-client';
import {redirectTo} from './redirect';

const networkInterface = createNetworkInterface({ uri: '/graphql' });

const exampleWare1 = {
  applyAfterware({ response },next) {
    if (response.status === 500) {
      console.error('Server returned an error');
    }
    next();
  }
}

const exampleWare2 = {
  applyAfterware({ response },next) {
    if (response.status === 200) {
      redirectTo('/');
    }
    next();
  }
}

networkInterface.useAfter([exampleWare1,exampleWare2]);

const client = new ApolloClient({
  networkInterface,});

Chaining (链起来)

networkInterface.use([exampleWare1])
  .use([exampleWare2])
  .useAfter([exampleWare3])
  .useAfter([exampleWare4])
  .use([exampleWare5]);

自定义网络接口

可以自定义以不同的方式向GraphQL服务器发送查询或数据更新请求,这样做有几个原因:

替换传输层,比如用Websocket替换默认的HTTP,降低Web应用的延迟. 增强Web应用的流程度,提升用户体验等.
请求发送前需要修改查询和变量
开发阶段的纯客户端模式,模拟服务器的响应

Query batching

Query batching 是这样一个概念,当多个请求在一个特定的时间间隔内产生时(比如: 100毫秒内),Apollo 会把多个查询组合成一个请求,比如在渲染一个包含导航条,边栏,内容等带有GraphQL查询的组件时,Query batching 要求服务支持 Query batching(比如 graphql-server).

使用Query batching,要传递BatchedNetworkInterface给ApolloClient构造函数,例如:

import ApolloClient,{ createBatchingNetworkInterface } from 'apollo-client';

const batchingNetworkInterface = createBatchingNetworkInterface({
  uri: 'localhost:3000',batchInterval: 10,opts: {
    // 传递给`fetch`的选项
  }
});

const apolloClient = new ApolloClient({
  networkInterface: batchingNetworkInterface,});

apolloClient.query({ query: firstQuery });
apolloClient.query({ query: secondQuery });

Query batching 是怎么工作的

Query batching 是传输层机制,需要服务器的支持(比如 graphql-server,如果服务器不支持,请求会失败. 如果服务器打开了 Query batching,多个请求会组合到一个数组中:

[{
   query: `query Query1 { someField }`,variables: {},operationName: 'Query1',},{
   query: `query Query2 ($num: Int){ plusOne(num: $num) }`,variables: { num: 3 },operationName: 'Query2',}]

查询 去除重复(Query deduplication)

查询去重可以减少发送到服务器的查询数量,默认关闭,可通过queryDeduplication选项传递给ApolloClient构造函数开启,查询去重发送在请求到达网络层之前.

const apolloClient = new ApolloClient({
  networkInterface: batchingNetworkInterface,queryDeduplication: true,});

查询去重在多个组件显示相同数据的时候非常有用. 避免从服务器多次获取相同的数据.

接口

这里有几个和网络请求相关的接口,通过这些接口,你可以自定义如何处理网络请求和响应

http://dev.apollodata.com/cor...

GraphQL 入门: Apollo Client - 网络层