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 Chrome DevTools 是一个和 Redux 开发工具类似的工具, 用户Apollo客户端的调试.

GraphiQL 控制台

可以在GraphiQL控制台中, 输入各种查询, 并执行查询, 获取结果

GraphiQL控制台分为三列,

• 第一列包含两栏, 第一栏是GraphQL查询, 第二栏是查询变量, 查询变量是一个JSON对象

• 第二列为查询结果, 也是一个JSON对象.

• 第三栏默认不显示, 是可以展开的, 其中显示了GraphQL的模式结构和文档说明.

可视化的存储查看器

可视化的存储查看器, 可以帮助你查看客户端缓存的状态, 以及搜索其中的键和值. 我们把GraphQL的数据存储看做一棵树.

查询监视器

查询监视器可以查看所有特定页面上被监视的查询, 包括其加载状态, 正在使用什么变了, 还有如果使用React, 以及查看那些React组件附加到查询之上.

这个功能对开发大型的, 由多个查询构成的单个页面是非常有用的. 它能帮助精确的理解应用程序正在执行哪些查询, 以及他们如何和UI组件进行关联的. 一个最好用的功能是Run in GraphiQL按钮, 它能够复制查询和变量到GraphiQL之中, 并且获取查询结果.

安装和配置

安装连接在这里: Chrome Webstore, 需要爬梯子.

当你的应用处于开发模式的时候, Devtools 的 "Apollo" 标签会出现在Chrome Inspector中. 如果想在产品环境中也打开Apollo调试工具, 可以传递选项 connectToDevTools: true 给 ApolloClient 构造函数. 如传递 connectToDevTools: false 可以手动禁止调试工具.

注: 修改了connectToDevTools 之后需要重新打开 Devtools 开发工具

参考资料

• Apollo Client Developer Tools

• GraphQL Devtools: Easier Developing for Happier Product Devs - Danielle Man

• Apollo Client Developer Tools 源码仓库