开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

当Apollo GraphQL失败并出现错误时显示MatSnackBar消息

当Apollo GraphQL失败并出现错误时，可以使用MatSnackBar消息来显示错误信息。MatSnackBar是Angular Material库中的一个组件，用于在应用程序中显示简短的消息通知。

MatSnackBar消息可以通过以下步骤来实现：

导入MatSnackBar模块：
导入MatSnackBar模块：
在组件的构造函数中注入MatSnackBar：
在组件的构造函数中注入MatSnackBar：
在Apollo GraphQL请求失败的回调函数中，调用MatSnackBar的open方法来显示错误消息：
在Apollo GraphQL请求失败的回调函数中，调用MatSnackBar的open方法来显示错误消息：

在上述代码中，this.apollo.query是使用Apollo Client发送GraphQL请求的示例代码。在请求失败的回调函数中，this.snackBar.open方法用于打开一个SnackBar消息，显示错误信息。第一个参数是要显示的消息文本，第二个参数是可选的操作按钮文本，第三个参数是可选的配置对象，用于设置消息的持续时间等属性。

MatSnackBar消息的优势是它提供了一种简单而直观的方式来向用户显示错误信息，帮助用户了解发生了什么问题，并提供相应的解决方案。它可以在应用程序的任何部分使用，并且可以根据需要进行自定义样式和行为。

应用场景：

当Apollo GraphQL请求失败时，可以使用MatSnackBar消息来向用户显示错误信息，帮助他们了解请求失败的原因，并提供相应的解决方案。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云云开发（CloudBase）：https://cloud.tencent.com/product/tcb
腾讯云云原生应用引擎（Cloud Native Application Engine）：https://cloud.tencent.com/product/tcae
腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云数据库（TencentDB）：https://cloud.tencent.com/product/cdb
腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
腾讯云移动开发（Mobile）：https://cloud.tencent.com/product/mobile
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链（Blockchain）：https://cloud.tencent.com/product/baas
腾讯云游戏多媒体引擎（GME）：https://cloud.tencent.com/product/gme
腾讯云音视频通信（TRTC）：https://cloud.tencent.com/product/trtc
腾讯云元宇宙（Metaverse）：https://cloud.tencent.com/product/metaverse

相关搜索:当Formik出现错误时，如何显示通用消息对express-graphql的请求失败，并显示“消息”：“身份验证失败。”将服务器部署到Heroku之后腾讯云网站建设流程腾讯云网站怎么安装腾讯云网站怎么续费腾讯云网站搭建后台腾讯云网站无法访问腾讯云网站正面搭建腾讯云网站管理助手腾讯云网站访问日志

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

GraphQL到底怎么使？看看智联前端团队技术沉淀

}, updateTime: '2020-04-11' } } 预期数据会返回在 data 中，当有错误时，会出现 errors 字段并按照规范规定的格式展示错误。...省略一些如校验、合并的细节，数据获取的过程如下：执行请求：GraphQL 引擎拿到 Document 并解析并处理之后，得到一个新的结构化的 Document（当然原本的 Document 也是结构化的...Apollo Apollo 提供了完整的 GraphQL Node.js 服务框架，但是为了更直观的感受可执行 Schema 的创建过程，使用 Apollo 提供的 graphql-tools 进行可执行...当遇到问题在 apollo 生态中找一找一般都会有收获。...能力并稳定运行了一段时间。

2.3K2 0

GraphQL最突出的架构优势是什么？

它们通常以接口或抽象类的形式出现。...由于具备执行自省查询的能力，所以 GraphQL Playground 的 GraphQL 资源管理器可以显示 GraphQL 端点的所有功能在 REST 领域中，我只看到了使用 Swagger 构建的...6关注点的扩展和分离 GraphQL 原则指出， “你的公司应该有一个统一的图，而不是让各个团队创建很多图。” 随着越来越多的团队开始使用 GraphQL，公司内部会出现多个图的情况。...通过 Apollo Federation，我们可以绘制并公开由多个 GraphQL 端点组成的单个数据图在 Federation 中，你可以组成模式并解析其他服务 / 限界上下文中的字段。...Apollo 平台有一项称为模式验证的特性，可让你针对实时生产流量测试每个更改，并在建议实施重大更改时向你显示提示，让团队可以交流接下来的方案。这种感觉很顺滑！

2.2K2 0

构建带 Subscriptions 的 graphql golang 后端

现在有许多用于编写JavaScript的GraphQL客户端和服务器的库和框架，其中最着名的是Apollo和Graphcool 。...Apollo团队还开发了针对WebSockets的GraphQL协议，该协议主要用于Apollo Client和Graphcool中的Subscriptions。...或者，您可以定义一个函数来对用户进行身份验证（在建立新连接时，Apollo客户端会将初始WebSocket消息与可选的authToken一起发送;该函数允许将令牌字符串解析为用户）。...一个典型的服务器实现将监听数据库的变化，并通过识别哪些订阅需要更新，重新执行这些订阅的查询并将结果发送给相应的订阅客户端来对这些更改做出反应。以下代码示例显示了订阅管理器在任何时候如何检索订阅。...如果您正在寻找下一个项目的React或GraphQL开发方面的帮助，我们很乐意在Functional Foundry处听到您的消息。

2.7K3 0

干货 | 携程基于 GraphQL 的前端 BFF 服务开发实践

Web Framework 框架 • apollo-server-koa 适配 koa v2 的 Apollo Server • data-loader 优化 GraphQL Resolver...假设我们实现了以下 GraphQL 接口：当查询 addTodo 节点时，其 resolver 函数抛出的错误，将会出现在顶层的 errors 数组里，而 data.addTodo 则为 null。...如果前端工程师不愿意消费 GraphQL 服务，久而久之，GraphQL 项目的用户流失殆尽，项目也随之宣告失败了。...五、GraphQL 应用场景作为 BFF 服务，在解决单一接口快速接入之后，通常会回到聚合多个服务端接口这个最初的目的，下面是常见几种的串、并调用等应用场景。...与一般单测不同的是，我们选择在当前运行环境内单独起一个服务进程，并且引入“@apollo/client”来模拟客户端对服务进行查询，并校验结果。

2.6K2 0

用TS+GraphQL查询SpaceX火箭发射数据

近一两年来 GraphQL 和 TypeScript 的使用都程爆发式增长，当两者与React结合使用时，它们可以为开发人员提供理想的开发体验。...GraphQL 改变了我们对 API 的思考方式，并利用直观的键/值对匹配，客户端可以请求在网页或移动应用屏幕上显示所需的确切数据。...本文将引导你使用 React 和 Apollo 构建客户端应用程序，并调用 SpaceX 的公共 GraphQL API ，来显示有关的发射信息。...如果 REST 出现什么问题，我们需要用 console.log 配合来调试数据。 GraphQL 允许你通过访问 URL 查看完全定义的模式，并在 UI 中执行针对它的请求，从而解决了这个问题。...另外还需要添加一些 CSS 样式，它将显示我们的项目，并允许它们在列表高度不够时滚动。

3K2 0

如何在 React.js 项目中使用 GraphQL

当与 React.js 结合使用时，这个强大的 JavaScript 库为创建动态、响应式的 Web 应用程序打开了无限的可能性。...：npm install graphql @apollo/client@apollo/client 软件包是 Apollo Client，这是一个强大的库，用于在 React 应用程序中管理状态并进行...在项目的 src 文件夹中创建一个名为 client.js 的文件，并设置 Apollo Client：// src/client.jsimport { ApolloClient, InMemoryCache...} from '@apollo/client';const client = new ApolloClient({ uri: 'http://localhost:4000/graphql', cache...处理加载和错误状态，并在数据可用时显示数据。

4524 0

GraphQL在现代Web应用中的应用与优势

安装graphql-yoga并创建一个简单的GraphQL schema：npm init -ynpm install graphql yoga graphql-yoga# server.jsconst...前端设置（使用Apollo Client）接着，我们需要在前端应用中配置Apollo Client，与我们的GraphQL服务器通信：npm install apollo-boost @apollo/client...graphql# client.jsimport ApolloClient from 'apollo-boost';import { InMemoryCache } from '@apollo/client...同时，我们定义了一个ADD_MESSAGE_MUTATION变更操作，当用户点击按钮时，它将向服务器发送一个新消息。4....服务器获取数据，并渲染用户和他们的帖子信息。

981 0

GraphQL 从入门到实践

本文首先介绍了 GraphQL，再通过 MongoDB + graphql + graph-pack 的组合实战应用 GraphQL，详细阐述如何使用 GraphQL 来进行增删改查和数据订阅推送，并附有使用示例...变更：对数据进行变更，比如增加、删除、修改，CRUD 中的 CUD substription 订阅：当数据发生更改，进行消息推送这些操作类型都将在后文实际用到，比如这里进行一个查询操作 query {...graph-pack 是集成了 Webpack + Express + Prisma + Babel + Apollo-server + Websocket 的支持热更新的零配置 GraphQL 服务环境...=> Db.updateUser({ id, name, email, age })) } } Mutation 入口 updateUser 拿到参数之后首先进行一次用户查询，如果没找到则抛错，...withFilter 的作用是过滤掉不需要的订阅消息，详细用法参照订阅过滤器。首先我们发布一个订阅请求 # 请求 subscription subsUser($id: ID!)

2.5K3 1

在 redux 应用中使用 GraphQL

快速的启动一个服务端环境启动一个 redux 脚手架增加一个 GraphQL 客户端 (Apollo Client) 使用 GraphQL 获取数据获取更多的数据接下来要做的 1....现在，我们已经确认服务器运行正常，并返回正确的响应，接下来让我们开始构建客户端。 2....增加一个 GraphQL 客户端（Apollo 客户端）安装 apollo-client, react-apollo, 和 graphql-tag。...我们只需要在客户端中写一条 GraphQL 查询语句！我们已经达成了目的。不过这个查询语句还是太简单了，如果我们想要显示所有的作者应该怎么做呢？ 5....获取更多的数据为了获取并显示所有的作者信息，我们需要更新 GraphQL 查询语句以及渲染函数： import React from 'react' import { connect } from '

1.9K1 0

你还在用 REST API 吗？

两者对比的简单示例例如，我们正在显示用户的供稿，其中包含用户的帖子及其关注者的列表。在我们的例子中，我们必须显示该帖子的作者、帖子以及该用户的关注者。...此时就是 GraphQL 显示其强大功能的时候了。我们需要指定查询，然后才能获得所需的输出。...自动缓存 REST 能自动生效缓存，而 GraphQL 则没有自动缓存系统，但是可以借助 Apollo Client、Relay 等客户端实现缓存。...错误处理 REST 中的错误处理比 GraphQL 简单得多，GraphQL 通常会给我们一个 200 OK 的状态码，即使已经出现错误了。...但是，当使用 Apollo Client、Relay 等客户端时，它也能很容易处理错误。结论与 REST 相比， GraphQL 当然更具优势，但它可能并不总是最佳实践。

1.5K1 0

面对极度复杂的前后端业务场景，使用 GraphQL 正确的姿势

之后MQTT会将心跳包传递到消息队列中，然后再通过API到应用层来同步消息。最后app端或web端通过暴露给他们的GraphQLAPI来读取到设备的信息，比如设备编号、固件版本、公网内网IP等。...当用户发现设备版本和服务器版本存在差异，执行需要更新的时候，本质上是发送动态操作到GraphQL API层，然后由GraphQL API层发送消息到设备，之后消息通过SDK API到达MQTT，接着发布一系列的请求到设备...现在转换到GraphQL后，请求发起机制、数据刷新、文件上传等等都完全不同，相当于要从头开始学习新的东西。在使用Apollo的过程中我们也遇到了一些坑。...这意味着Component不再是为了请求而定义的，而是根据对象类型来定义过于依赖Fragment导致的性能问题（前端）我们在使用GraphQL 的过程中曾出现过一次非常大的性能问题。...第一，虽然后端已经做了一些优化，但是还是没有完全实现前端的按需查询，当数据量达到一定级别的时候，数据库查询可能会成为性能瓶颈。

7.5K2 0

GraphQL+Koa2实现服务端API结合Apollo+Vue

graphql GraphQL 出现的历史背景当提起API设计的时候，大家通常会想到SOAP（一种简单的基于 XML 的协议），RESTful 等设计方式，从 2000 年 RESTful 的理论被提出的时候...比如：字段冗余，扩展性差、无法聚合 api、无法定义数据类型、网络请求次数多 GraphQL 的出现整好弥补了 RESTful APi 的不足使用 GraphQL 的公司目前已经有很多的公司在使用...四、Koa中集成GraphQl实现 Server API 下载数据库文件解压并导入mongodb即可 https://blog.poetries.top/db/koa.zip 导入mongodb数据库...将它与vue-apollo和graphql一起安装： npm install vue-apollo graphql apollo-boost --save 在src/main.js中引入apollo-boost...模块并实例化ApolloClient import ApolloClient from'apollo-boost' const apolloClient = newApolloClient({

5.2K4 2

【译】Graphql, gRPC和端对端类型检验

最终我们选择了Apollo GraphQL+gRPC+React+TypeScript这样一套技术栈，并对使用它们的结果感到满意。...在这篇博客中，我们会解释为何选择这些技术栈，并通过一个简单的示例项目进行论述。...GraphQL 当听到我们需要在这个项目中“整合许多不同的数据源”时，我立即意识到使用GraphQL作为API网关会是一个不错的选择。...server，我们现在可以导入gRPC的客户端模块，并完善我们的解析器。...为了保证GraphQL server和前端之间的类型安全，我们使用Apollo CLI的代码生成器：使用命令行来生成我们所有GraphQL查询的类型： React示例在我们的应用中需要用到三种查询：

3.1K2 0

为什么我使用 GraphQL 而放弃 REST API？

文档单独存储意味着，它经常不会更新，特别是当更改是一个小的、但会破坏客户端的更改时。如果你不使用 Swagger，这可能意味着你需要维护专门的测试基础设施。...如果应用程序需要项目有所有者，并且除了每个集合有单独的视图显示外，还有一个视图显示所有这些数据的聚合？它要么是三个独立的 HTTP 请求，要么是一个复杂的请求，同时获取所有数据用于聚合。...另外值得一提的两个 GraphQL 库是 PostGraphile 和 Apollo。...如果你使用 PostgreSQL 作为后端数据库，PostGraphile 能够扫描 SQL 模式并自动生成一个带有实现的 GraphQL 模式。...最妙的是，PostGraphile 还以查询和修改的方式暴露视图和函数，所以如果有特别复杂的 SQL 查询需要映射到 GraphQL 字段，只需创建 SQL 视图或函数，它就会自动出现在 GraphQL

2.3K3 0

2017JavaScript框架战报-React分战场

当Facebook构建React时，就有许多来自开源社区的第三方软件包。为提供完整的应用程序体验，这些软件包使用React并添加了附加功能。其中几个中因提供了类似的功能，彼此之间存在竞争。...推出React的同时，Facebook还推出了Flux和GraphQL。两者都不如React流行，这再次显示了React在一小部分问题上的解决问题能力。...GraphQL 虽然它与React是同时在Facebook内部开发的，但是GraphQL与React并没有内在的联系。它只是Web客户端查询服务器数据的一种方式。...它通过名为Relay和Apollo的两个竞争库得到了一定的普及，这两个库提供用于生成GraphQL和管理数据流的Web应用程序。...首先推出的是Relay，目前正在持续成长，但是已经被半年后发布的Apollo盖过了风头。虽然绝对数量还很小，但Apollo的增长轨迹值得深入挖掘。

1K7 0

你不知道的 GraphQL

特别是当这些名称会长期使用的时候 - 记住，GraphQL API并没有版本号这回事儿，所以，尽可能让你的Schema具有自解释特性，因为这是其他开发人员了解项目的入口。...但这种在响应中显示错误信息的简单处理，并没有在服务端记录错误日志。...日志除了数据和错误外，graphQL的响应中还可以包含extensions类信息，你可以在其中放你想要的任何数据。我们用它来显示服务的耗时信息再好不过了。...另一种Apollo公司比较推荐的测试手段是使用来自graphql-tools中的mockServer来测试。基于文本化的schema，它会创建一个内存数据源，并填充伪造的数据。...注意：这篇教程中提到的大多数js库都源自Facebook或Apollo。那么，Apollo到底是哪位？它是来自于Meteor团队的一个项目。这些家伙为GraphQL贡献了很多的高质量代码。顶他们！

3.3K2 0

GraphQL是API的未来，但它并非银弹

本文最初发布于 WunderGraph 官方博客（《Why not use GraphQL？》），经原作者授权由 InfoQ 中文站翻译并分享。...在 REST 响应中，你也可以返回有关失败原因的特定信息。OAS 允许使用复合类型，因此，你可以就部分响应向客户端提供丰富的信息。...当尘埃落定，炒作消失，我们必须看清事实。明明 GraphQL 不是这样的，我们却要设法让人们相信它是这样的，我们不应该这么做。...如果你的组织在实现 REST API 方面失败了，那么 GraphQL 如何解决这个问题？也许你的组织中有些东西需要改变？...11 我的结论当 Kyle 问“为什么要用 GraphQL”时，我想他实际上是在说“为什么要用 Apollo”。答案很简单。没有人愿意围绕 REST API 构建一个丰富的生态系统。

2K1 0

如何在纯 JavaScript 中使用 GraphQL

当查询包含多个命名操作的查询时，它用于指定要运行的操作。如果你将一个 GraphQL 作为一个 GET 请求发送，则需要将以上内容作为查询参数传递。...以下示例调用了我的 Scooby API 来获取一个 monster 列表和它们所出现的剧集列表（抱歉，Scooby 粉丝们，我现在只统计了第 1 季中的少数 monster）。...然后它会获取结果并将其显示在浏览器中。尽管这对 GraphQL 调用来说并不重要，但我使用 js-beautify 正确格式化了要显示的 JSON 结果，然后使用 Prism 给它上了色。...显然，一般来说你不会想要简单地向用户显示查询结果，因此让我们看一下如何使用返回的数据。使用 GraphQL 查询响应 GraphQL 的一大优点是，它的响应只是纯 JSON，因此数据使用起来很容易。...如果你有兴趣探索一些 JavaScript 库，请参考下面的这些流行选项： Apollo Client https://github.com/apollographql/apollo-client urql

3.5K1 0

《GraphQL 名词 101：解析 GraphQL 的查询语法》【译】

首先，你应该通读concepts on the graphql.org docs，然后通过Learn Apollo tutorial来学习使用GraphQL，最后当你想继续深入了解这项技术时，再回到这里来吧...请注意，参数可以显示在任何字段中，即使是嵌套层次很深的字段。为了让你以非常简洁的形式定义一个GraphQL查询，上面的栗子是GraphQL的一种非常简单的形式。...变量定义(Variable definitions)：当客户端向GraphQL服务器发送查询时，会存在查询文档不变，当某些字段会动态变化的情况。这些就是查询中的变量。...选择集(selection set)是一个会在GraphQL 文档中经常出现的概念，它赋予了GraphQL递归的特性，允许你获取嵌套形式的数据。...片段(Fragments) 当开始介绍片段(fragments)之后，GraphQL 将变得更加强大。它带来了一系列新的概念。

3K2 0

API架构风格对比：SOAP vs REST vs GraphQL vs RPC

本文将会按照API风格出现的顺序对它们进行讨论，对比各自的优劣势，并给出各自适合的场景。 ?...而后出现了REST，二者并驾齐驱，但很快REST就后来居上。 SOAP如何工作 XML数据格式多种多样，加上大量消息结构，使得SOAP称为一种最冗长的API样式。...REST和RPC之间有一些灰色区域，特别是当一个服务具有一部分REST特性，一部分RPC特性时。REST基于资源，而不是基于动作或动词。 ?...现在，GraphQL生态扩展了相关的库，并出现了很多强大的工具，如Apollo, GraphiQL, and GraphQL Explorer。...而REST架构不能部分展示数据(要么全部显示，要么全部隐藏)。 GraphQL 的缺点性能问题：GraphQL用复杂度换来功能上的提升。在一个请求中包含太多封装的字段可能会导致系统过载。

3K1 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭