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

最新推荐文章于 2024-05-11 09:32:03 发布
最新推荐文章于 2024-05-11 09:32:03 发布
阅读量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
    评论
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 的前后端协作方案
LuckyWinty的博客
11-18 1245
作者简介: 薛扬波，来自抖音直播平台前端团队，团队负责主播工会等行业产品研发，以及运营平台、数据策略平台建设一、背景&目标1、当前问题：接口无法复用：当前业务接口设计初为面向特定页面特定功能的，接口与页面一一绑定，接口字段缺失、冗余的情况造成已有接口无法轻松复用到其他页面。缺少领域模型：随着业务的迭代，难免会出现一些数据聚合、数据过滤的接口需求，目前这种情况都需要server服务端同学...
探索强大的GraphQL客户端：Urql
最新发布
gitblog_00058的博客
05-11 297
探索强大的GraphQL客户端：Urql 项目地址:https://gitcode.com/urql-graphql/urql Urql是一个高度可定制和灵活的GraphQL客户端，它为React、Preact、Vue和Svelte等框架提供了一站式的解决方案。这个小巧但功能齐全的库以其简单的API和强大的特性赢得了开发者们的青睐。 项目介绍 Urql的核心在于其“exchanges”机制，允许你...
graphql查询开发实践(调试)
m0_51334054的博客
08-23 277
graphql查询开发实践 在api中打开bash，输入python manage.py runserver 打开发现有2个入口 在url后接上admin,进入管理界面 接上api/graphql,进入调试界面 query: 不带参数： 注意id需解码 带参数：
GraphQL 进阶: Apollo Client 之 GraphQL Subscription 和 graphql容器
weixin_33747129的博客
05-28 577
概述 下面是一个视频和一个GIF动画, 感受一下基于Websocket, 通过GraphQL实现的即时聊天应用是个什么鬼. 视频连接: https://v.qq.com/x/page/x0508... GIF动画 graphql() 函数是一个给组件增加数据逻辑(查询, 修改, 删除)的一个高阶函数, 存在于 react-apollo ...
从零开始学习 GraphQL：入门指南和教程
04-17 337
前段时间，出现并掀起了一阵热潮。但是 GraphQL 跟 REST 是两种不同的东西，所以也需要一定的学习成本，导致大部分人都没有选择去学习它，今天就带大家简单过一遍 GraphQL 吧，希望大家能有所收获。在上面的例子里，一个首页就得请求三个以上的接口了，浏览器并发数太多的话，会大大影响用户的使用体验。那如果使用 GraphQL 去查询呢，就只需要一个接口就完事了，也就是一个请求就可以查询很多个请求所需要的数据，那自然减少了并发数。
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中调用它们。 - 数据订阅：了解...
apollo-client-devtools, Chrome 客户端开发者工具的扩展.zip
10-09
apollo-client-devtools, Chrome 客户端开发者工具的扩展 阿波罗客户端 Devtools下载下载 Chrome | 下载 Firefox 。这里存储库包含用于 Chrome & Firefox的Apollo DevTools扩展。如果你运行的是rpg客户端 2.0，那么开发工具至少需
apollo-client-devtools：Apollo客户端浏览器开发人员工具
02-04
Apollo客户端浏览器开发工具 | 该存储库包含适用于Chrome和Firefox的Apollo客户端浏览器Devtools扩展。 产品特点 Apollo客户端浏览器开发工具在您的Web浏览器检查器中显示为“ Apollo”选项卡，与其他选项卡（如“元素”和“控制台”）一起显示。 目前，devtools具有四个主要功能： GraphiQL：通过配置了Web应用程序的Apollo Client实例向服务器发送查询，或查询Apollo Client缓存以查看加载了哪些数据。 受监视的查询检查器：查看活动查询，变量，缓存的结果，然后重新运行单个查询。 突变检查器：查看触发的突变，变量，
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包也可以用于单元测试。 创建用例文件​​并
graphql-toolkit：一组用于快速开发GraphQL工具的工具
02-04
graphql-toolkit：一组用于快速开发GraphQL工具的工具
chrome-graphiql:用于在本地运行GraphiQL工具的Chrome扩展程序
04-30
Chrome Graphiql扩展 该存储库处于开发模式，目前不应期望稳定的构建。 请参考目录，以获取最新的解压缩版本，该版本可能会在开发模式下的Chrome扩展程序页面上加载。 关于 一个简单的chrome扩展程序，其中包括工具，并向其中添加了几个功能，这使得在本地使用此惊人的工具更加容易。 特征 针对不同的GraphQL服务器 您可以为要测试的GraphQL服务器配置目标URL。 请参阅扩展选项。 选项中还提供了设置自定义身份验证Cookie的功能。 与文档集成 您可能想要对您的graphql服务器进行一组示例查询。 这可以通过准备一个简单HTML文件（带有以graphiql://协议开头的链接）来实现： < a href =' graphiql://?query=query topUsers($count: Int) { allUsers(count: $co
GraphQL实战-第一篇-GraphQL介绍
xplan5的博客
09-21 7202
GraphQL实战-GraphQL介绍 GraphQL的前世今生 Facebook的业务线有移动端，PC端和其它端，不同的场景下对一个资源所需要的信息是不同的。如移动端需要User的a、b、c三个字段，PC端需要b、c、d三个字段；对于此场景，要么开多个定制化API接口,会造成代码冗余，要么一个全信息API接口,有接口信息冗余。 造成了不止以下三个痛点 移动端需要高效的数据加载，被接口冗余字段拖累 多端产品下，API维护困难 前端新产品快速开发困难，需要大量的后端配合写业务定制化API 解决以上问题，2
Apollo的Portal界面操作
抱愚守拙，持之以恒；不问结果，相信过程.
04-03 1709
上一讲主要讲了Apollo配置中心如何通过client与之交互，演示了java如何接入的方式，接下来介绍的是Apollo界面的一些常规操作。
apollo学习之---Cyber中Service&Client的创建
qq_41593516的博客
09-23 534
#include "cyber/examples/proto/examples.pb.h" #include "cyber/cyber.h" using apollo::cyber::examples::proto::Driver; int main(int argc, char* argv[]) { apollo::cyber::Init(argv[0]); std::shared_ptr<apollo::cyber::Node> node( apollo::cybe

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值