GraphQL 入门: Apollo Client - 开发调试工具

最新推荐文章于 2024-05-13 09:44:59 发布
最新推荐文章于 2024-05-13 09:44:59 发布
阅读量979 收藏 2
点赞数
文章标签： 开发工具 javascript ui ViewUI
原文链接：https://segmentfault.com/a/1190000008754734
版权

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: true 给 ApolloClient 构造函数. 如传递 connectToDevTools: false 可以手动禁止调试工具.

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

参考资料

weixin_33953249
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
graphql查询开发实践(调试)
m0_51334054的博客
08-23 277
graphql查询开发实践 在api中打开bash，输入python manage.py runserver 打开发现有2个入口 在url后接上admin,进入管理界面 接上api/graphql,进入调试界面 query: 不带参数： 注意id需解码 带参数：
GraphQL开发工具「GraphQL developer tools」-crx插件
03-09
GraphQL开发的Devtools面板。 在Chrome开发者工具中添加新标签，并允许检查GraphQL查询和响应。 支持语言:English
探索强大的GraphQL客户端：Urql
gitblog_00058的博客
05-11 297
探索强大的GraphQL客户端：Urql 项目地址:https://gitcode.com/urql-graphql/urql Urql是一个高度可定制和灵活的GraphQL客户端，它为React、Preact、Vue和Svelte等框架提供了一站式的解决方案。这个小巧但功能齐全的库以其简单的API和强大的特性赢得了开发者们的青睐。 项目介绍 Urql的核心在于其“exchanges”机制，允许你...
apollo-client-devtools, Chrome 客户端开发者工具的扩展.zip
10-09
apollo-client-devtools, Chrome 客户端开发者工具的扩展 阿波罗客户端 Devtools下载下载 Chrome | 下载 Firefox 。这里存储库包含用于 Chrome & Firefox的Apollo DevTools扩展。如果你运行的是rpg客户端 2.0，那么开发工具至少需
graphql-test-tool:GraphQL测试工具，用于针对GraphQL服务器运行测试用例
05-18
GraphQL-测试工具 GraphQL测试工具，用于针对GraphQL服务器运行测试用例。 这是什么 GraphQL测试工具（gtt）帮助测试GraphQL服务器。 测试称为用例，每个用例均在JSON文件中定义。 gtt的一些功能包括： GET和POST HTTP请求都可以进行。 POST内容可以是JSON（应用程序/ json）或GraphQL（应用程序/ graphql）。 变量和操作名称可以在URL或JSON内容中指定， 可以记住值，并在后续步骤中将其重用。 各种显示选项。 可以作为应用程序运行，也可以在单元测试中使用gtt包。 用法 GraphQL测试工具可以作为应用程序运行： go run main.go -s http://localhost:6464 -i 2 -v ../examples/top.json gtt包也可以用于单元测试。 创建用例文件​​并
Apollo Client Devtools-crx插件
04-02
语言:English (United States) 用于Apollo客户端的GraphQL调试工具。 Apollo客户端Devtools是Chrome扩展，适用于开源GraphQL客户端Apollo客户端。 该扩展具有4个主要功能：1.内置GraphiQL控制台，可让您直接使用应用程序的网络接口对GraphQL服务器进行查询（无需进行配置）。 2.查询观察器，向您显示当前页面正在监视哪些查询，何时加载这些查询以及这些查询正在使用哪些变量。 3.变异检查器，显示对Apollo Client应用程序数据进行的变异。 4.缓存检查器，显示您的Apollo客户端缓存数据。 您可以通过树状界面浏览缓存，并搜索特定的字段键和值。 可以在以下位置找到此扩展的代码：https://github.com/apollographql/apollo-client-devtools要了解有关Apollo的更多信息，请参见：https://www.apollographql.com
graphql-babel-boilerplate:具有模块化架构的Apollo Server 2入门套件
05-08
**GraphQL-Babel-Boilerplate：模块化架构的Apollo Server 2入门套件** 这个项目是一个专门为初学者和开发者设计的GraphQL服务器启动模板，它基于Apollo Server 2，利用Babel进行代码转换，并且拥有模块化的架构。...
graphql-978-1-7895-3393-4：开始GraphQL [eLearning]
02-14
**GraphQL入门：开启高效API开发之旅** 在当前的Web开发领域，GraphQL作为一种强大的查询语言，已经逐渐成为构建高效、灵活的API的重要工具。本资源，"graphql-978-1-7895-3393-4：开始GraphQL [eLearning]"，旨在...
Lyrical-GraphQL:Udemy.com上GraphQL课程的入门项目
05-09
8. **测试和调试**：掌握编写和执行测试的方法，以及使用工具如GraphiQL进行GraphQL查询调试。 通过这个项目，你不仅可以深入理解GraphQL的工作原理，还能将这些知识应用到实际的JavaScript开发中，提升你的全栈...
lyrical-graphQL：服务器端graphQL项目
02-13
完成这个项目后，你可以深入学习如何将GraphQL与各种数据库（如MongoDB、PostgreSQL）集成，以及如何在React或Vue等前端框架中使用Apollo Client来消费GraphQL API。此外，了解状态管理库如Redux，以及如何实现...
一个简单易用的GraphQL教程可以做为入门GraphQL
08-10
- Apollo Client：学习如何在JavaScript前端项目中集成Apollo Client，用于发送GraphQL查询和突变，管理缓存。 - 使用Query和Mutation：编写GraphQL查询和突变，并在JavaScript中调用它们。 - 数据订阅：了解...
graphql-toolkit：一组用于快速开发GraphQL工具的工具
02-04
graphql-toolkit：一组用于快速开发GraphQL工具的工具
:laptop:明智的GraphQL测试工具-在本地和云中测试GraphQL模式-JavaScript开发
05-26
明智的GraphQL测试工具。 用法$ npm install -g graphicli＃（很抱歉，软件包名称！）然后发送带有gest的查询（发音为guest [/ɡest/]）。 $ gest [选项] [quotedQuery | pathToF明智的GraphQL测试工具。 用法$ npm install -g graphicli＃（很抱歉，软件包名称！）然后发送带有gest的查询（发音为guest [/ɡest/]）。 $ gest [选项] [quotedQuery | pathToFileWithQuery]示例$ gest'{test}'或$ gest test.graphql＃和带有包含{test}或多个$ gest test.graphql'{test}'intestspection的`test.graphql` introspection.graphql＃将运行所有三个查询！ REPL $ gest查询：{测试} {数据：{测试：“成功！” HTTP
GraphQLeditorGraphQL的可视化节点编辑器
08-10
GraphQL editor - GraphQL的可视化节点编辑器
apollo-client-devtools：Apollo客户端浏览器开发人员工具
02-04
Apollo客户端浏览器开发工具 | 该存储库包含适用于Chrome和Firefox的Apollo客户端浏览器Devtools扩展。 产品特点 Apollo客户端浏览器开发工具在您的Web浏览器检查器中显示为“ Apollo”选项卡，与其他选项卡（如“元素”和“控制台”）一起显示。 目前，devtools具有四个主要功能： GraphiQL：通过配置了Web应用程序的Apollo Client实例向服务器发送查询，或查询Apollo Client缓存以查看加载了哪些数据。 受监视的查询检查器：查看活动查询，变量，缓存的结果，然后重新运行单个查询。 突变检查器：查看触发的突变，变量，
Gest一个明智的GraphQL测试CLI和工具
08-07
一个明智的GraphQL测试CLI和工具，用于测试你的本地和云端GraphQL模式
GraphQL实战-第一篇-GraphQL介绍
xplan5的博客
09-21 7202
GraphQL实战-GraphQL介绍 GraphQL的前世今生 Facebook的业务线有移动端，PC端和其它端，不同的场景下对一个资源所需要的信息是不同的。如移动端需要User的a、b、c三个字段，PC端需要b、c、d三个字段；对于此场景，要么开多个定制化API接口,会造成代码冗余，要么一个全信息API接口,有接口信息冗余。 造成了不止以下三个痛点 移动端需要高效的数据加载，被接口冗余字段拖累 多端产品下，API维护困难 前端新产品快速开发困难，需要大量的后端配合写业务定制化API 解决以上问题，2
graphql测试工具_如何大规模运行GraphQL指令驱动的容量测试
weixin_26752759的博客
09-14 464
graphql测试工具 Expedia Group Technology —软件 (EXPEDIA GROUP TECHNOLOGY — SOFTWARE) Vrbo使用Apollo Server和hapi插件支持测试其站点的框架 (Vrbo’s framework for testing its site using Apollo Server and hapi plugin support...
推荐项目：GraphQL Inspector - 您的智能GraphQL版本管理助手
最新发布
gitblog_00035的博客
05-13 332
推荐项目：GraphQL Inspector - 您的智能GraphQL版本管理助手 项目地址:https://gitcode.com/kamilkisiela/graphql-inspector 项目介绍 GraphQL Inspector是一款强大的工具，它能够帮助您精准地检测两个GraphQL模式之间的变化，提供详细的变更解释，并将其标记为破坏性、非破坏性或潜在危险的更新。这个工具不仅可以验...
Apollo无人驾控技术入门：开发者视角与关键模块
首先，Apollo的开放技术涵盖了多个关键领域，包括软件开发、地图构建、实时相对地图、调试工具以及新型计算单元和平台。GitHub是Apollo项目的主要代码托管平台，开发者可以从https://github.com/ApolloAuto/apollo...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值