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控制台中, 输入各种查询, 并执行查询, 获取结果
clipboard.png

GraphiQL控制台分为三列,

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

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

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

可视化的存储查看器

clipboard.png

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

查询监视器

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

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

clipboard.png

安装和配置

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

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

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

参考资料

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值