GraphQL 入门: Apollo Client 查询(Batching)合并

2019年9月18日 179次阅读 来源: developerworks

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

当打开一个客户端页面的时候, 客户端可能会触发多个请求以完成数据的加载. 有可能会超出浏览器并发连接的数目, 为了解决这个问题,我们通过Query batching一次的请求完成页面需要的所有数据.

Query batching 就是在单个请求中包含多个查询的技术, 它有几个极其显著的优点:

  • 减少请求数量

  • 当多个查询包含在一个请求中时, 可以使用 DataLoader 批量的从后端API或服务器获取数据.

使用

假设一个场景, 多个UI组件都是用了GraphQL查询从服务器获取数据. 下面两个查询可能是由两个不同的UI组件生产的, 会产生两次客户端和服务器之间的数据往返.

client.query({ query: query1 })
client.query({ query: query2 })

在Apollo Client中, 查询批处理默认是关闭的. 要打开查询批处理, 需要在初始化 Apollo Client的时候打开 shouldBatch 选项:

const client = new ApolloClient({
    // ... 其他选项
    shouldBatch: true
});

时间间隔

时间间隔标识在一个特定的时间段内(比如100ms), 如果客户端产生了多个查询, 那么Apollo Client会自动把多个查询合并为一个.

《GraphQL 入门: Apollo Client 查询(Batching)合并》

查询合并

查询合并是由 BatchedNetworkInterface 进行合并的, 下面举例说明, 现在要执行两个GraphQL查询:

query firstQuery {
   author {
    firstName
    lastName
  }
}
query secondQuery {
  fortuneCookie
}

我们想象一下合并的问题, 假设上面的两个查询会合并成如下的样子:

query ___composed {
  author {
    firstName
    lastName
  }
  fortuneCookie
}

但是, 上述合并后的查询有几个问题

  • 依据GraphQL规范, 查询字段的名称是不能相同的, 否则会产生命名冲突, 解决这个问题的办法是使用 alias(别名) 来保证可以合并任意查询同时不会让字段名字发生名称冲突.

    query ___composed {
  aliasName: author {
    firstName
    lastName
  }
}

  • 调试的时候服务器应答的字段名称和客户端的原始名称不一致, 给调试带来麻烦, 解决办法是在网络层进行查询的合并. 当前大多数GraphQL客户端实现中, 请求时以如下格式发送到服务器的:

    {
  "query": “< query string goes here >”,
  "variables": {
    <variable values go here>
  }
}

网络层的查询合并

网络层的查询合并, 只需要用createBatchingNetworkInterface 替换 createNetworkInterface 即可. 例如:

import ApolloClient, { createBatchingNetworkInterface } from 'apollo-client';
const batchingNetworkInterface = createBatchingNetworkInterface({
  uri: 'localhost:3000',
  batchInterval: 100,
  opts: {
    // Options to pass along to `fetch`
  }
});
const apolloClient = new ApolloClient({
  networkInterface: batchingNetworkInterface,
});
// These two queries happen in quick succession, possibly in totally different
// places within your UI.
apolloClient.query({ query: firstQuery });
apolloClient.query({ query: secondQuery });

结语

上述Batching查询是正对HTTP这种无状态协议的, 目的是为了减少重复建立新的TCP连接消耗的时间, 如果采用Websocket这种有状态协议, 就没有必要在使用Query Batching, 采用GraphQL Subscriptions.

参考资料

    原文作者：developerworks
    原文地址: https://segmentfault.com/a/1190000008944122
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞