在阿波罗客户端GraphQL React应用程序中添加对特定路线的订阅

，可以通过以下步骤完成：

确保你的应用程序已经集成了阿波罗客户端，并且已经配置了GraphQL服务器端。
在应用程序的组件中，导入@apollo/client库，并使用useSubscription钩子函数来定义一个订阅。
在应用程序的组件中，导入@apollo/client库，并使用useSubscription钩子函数来定义一个订阅。
使用gql标签定义一个GraphQL订阅查询，该查询用于订阅特定路线的更新。
使用gql标签定义一个GraphQL订阅查询，该查询用于订阅特定路线的更新。
在组件中使用useSubscription钩子函数，并传入订阅查询和订阅变量。
在组件中使用useSubscription钩子函数，并传入订阅查询和订阅变量。

通过以上步骤，你可以在阿波罗客户端GraphQL React应用程序中添加对特定路线的订阅。在订阅成功后，你将能够实时接收到特定路线的更新，并在组件中进行相应的渲染和处理。

相关·内容

「首席架构师推荐」React生态系统大集合

库 avers - 一个现代客户端模型抽象库 imvvm - React的不可变模型 - 视图 - 视图模型 morearty.js - 在纯JavaScript中更好地管理React valuable...在CoffeeScript中实现Flux React：Flux Architecture 了解Flux 在Flux中哟 React.js架构 - Flux VS Reflux 避免单页应用程序中的事件链...GraphQL教程 GraphQL简介关于GraphQL的第一个想法以类似的方式在GraphQL中建模查询 Thin and Graphy GraphQL概述 - GraphQL和Node.js入门...脚本，用于更新中继API Apollo 基于GraphQL的数据堆栈 阿波罗综合资源 阿波罗官方网站 Apollo GitHub 阿波罗博客 Apollo Slack Apollo工具 react-apollo-redux...：为移动设备带来现代网络技术 - f8 2015） Citrusbyte推出GraphQL：与Nick Schrock合作的横向平台 Laney Kuenzel：接力中的突变和订阅 - JSConf 2015

12.4K3 0

构建带 Subscriptions 的 graphql golang 后端

GraphQL提供了一种灵活而有效的方式来查询服务器中的数据。它正在成为设计后端的流行技术，通常会替换或封装一些不灵活的REST API，并让客户负责决定他们需要的数据。...它有一个简单的目的：实现GraphQL在WebSocket（由所有流行的GraphQL客户端使用），所以不必考虑与net/http无缝集成与net/http无缝集成提供访问已建立订阅的简单方法，执行身份验证并向相应的客户端发送更新...它没有实现任何开箱即用的订阅。一个典型的服务器实现将监听数据库的变化，并通过识别哪些订阅需要更新，重新执行这些订阅的查询并将结果发送给相应的订阅客户端来对这些更改做出反应。...您只需创建两个处理程序并通过不同的路线提供服务。以下代码示例演示了这一点。...如果您正在寻找下一个项目的React或GraphQL开发方面的帮助，我们很乐意在Functional Foundry处听到您的消息。

2.7K3 0

GraphQL 与 REST 双重赋能：Hasura 帮你给数据库添加接口 | 开源日报 No.75

它具有以下主要功能和核心优势：内建强大查询：支持过滤、分页、模式搜索等功能与现有数据库兼容：将其指向现有数据库即可立即获得可用的 GraphQL API 实时性能：可以使用订阅将任何 GraphQL...查询转换为实时查询合并远程架构：通过单个 GraphQL 引擎端点访问自定义业务逻辑的自定义 GraphQL 架构使用 Actions 扩展功能：编写 REST API 以在 Hasura 模式中添加自定义业务逻辑...多渠道搜索：使用两种技术手段寻找每个 CVE 对应的 PoCs，一方面根据参考文献中是否存在指向 PoC 网址进行检查；另一方面在 GitHub 上搜索与 CVE ID 相关联且提到了漏洞利用代码库。...bluesky-social/social-app[4] Stars: 4.1k License: MIT Bluesky Social App 是一个基于 AT Protocol 的去中心化社交媒体应用程序...该项目使用 React Native 和 TypeScript 编写，提供了一组在整个 AT Protocol 框架下构建的模式和 API。支持自我认证数据结构、协议规范等。

5385 0

.NET与GraphQL的碰撞：新一代的数据交互与演示

减少请求数：多个数据需求可以在单一查询中解决。灵活性高：客户端可以自由构造查询，无需服务器频繁更新API。...在控制台客户端，也执行一下mutation操作，也能够成功调用：以上是查询和修改操作的例子，graphql还可以做数据推送和订阅，用于实现websocket的效果。...如果你的应用程序需要在多个服务器实例之间进行扩展，每个实例的内存中都会有独立的订阅状态，从而导致状态不一致。因此，在大型应用或高负载环境中，这种方法不能很好地扩展。...资源使用效率：随着订阅数量的增加，内存的使用量也会随之上升。在内存资源有限的环境中，这可能会影响应用程序的整体性能和响应速度。故障恢复：在内存中的订阅管理缺乏有效的故障恢复机制。...，所以也需要添加对websocket的注册：然后启动程序，使用subscription进行订阅onTestPublish主题消息。

921 0

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

GraphQL是一种现代的API查询语言，它在现代Web应用中得到了广泛的应用，因为它提供了一种高效、灵活且强大的方式来获取数据GraphQL基础快速应用示例：1....编写前端组件现在，我们在React组件中使用Apollo Client执行查询和变更：// App.jsimport React from 'react';import { gql, useQuery,...查询语言：查询、突变、订阅在GraphQL中，查询和突变是通过JSON-like结构表示的字符串。...这就是GraphQL查询、类型系统和层次结构在实际应用中的体现。...: Post}在Query类型中，我们定义了获取单个用户、所有用户、单篇帖子和所有帖子的查询。而在Mutation类型中，我们定义了创建新用户和新帖子的操作。

981 0

GraphQL API 的新趋势：驱动数据交换的未来技术

通过提供一个统一的 API 来访问来自各种服务的数据，GraphQL 联邦简化了客户端应用程序，并提高了整个系统的可维护性。图片 2....GraphQL 订阅实现实时数据在现代应用程序中，实时数据变得越来越重要，而 GraphQL 订阅提供了一种支持实时更新和通信的订阅，使客户端应用程序能够在特定事件或数据更改发生时接收通知，为处理 GraphQL...部分查询结果部分查询结果允许 GraphQL API 在某些字段或操作由于错误或限制而失败时返回部分数据，这种方法通过使客户端应用程序接收和处理部分数据来增强 GraphQL API 的弹性，从而在面对错误时提供更良好的用户体验...无损编译器还改善了 GraphQL 查询中的错误处理，允许表达式错误响应和更好的开发人员体验。...自定义指令自定义指令提供了一种扩展 GraphQL API 功能的方式，允许开发人员定义可重复使用、特定于应用程序逻辑。

3092 0

2017年前端开发手册（二）-2017前端技术展望

`import`可能仅仅被用在``中。 3. 通用JavaScript解决方案会继续发展, 致敬过去服务器交付前端的日子(如传送html到客户端)。 4....响应式编程仍然兴盛于JavaScript的使用场景当中(见MobX和RxJS)。 5. React,更准确的说这个概念,将占统治地位。...在angular的使用中已经发现了“[依赖地狱][1]”的现象，因此angular4(甚至5)将出现在2017年的路线图。...7. 2017年，在众多开发工具的帮助下，可能发生回归简单的网站（例如web 1.0）的现象 (即回归静态网站) 8. RESTful JSON api(参见GraphQL)将具备更大的竞争力。...“前端应用程序”、“厚客户端应用程序”、“静态应用程序”,“没有后端应用程序”,“单页应用程序”、“前端驱动程序”可能会归结为术语`JAM Stack`.

8866 0

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

：npm install graphql @apollo/client@apollo/client 软件包是 Apollo Client，这是一个强大的库，用于在 React 应用程序中管理状态并进行...在这个例子中，假设您有一个在 http://localhost:4000/graphql 上运行的 GraphQL 服务器。您可以将此 URL 替换为实际的 GraphQL 服务器端点。...: new InMemoryCache(),});export default client;在 React 组件中使用 GraphQL 获取数据现在，让我们使用 GraphQL 在 React 组件中获取数据...将 GraphQL 集成到您的应用程序最后，将 PostList 组件集成到主 App.js 中：// src/App.jsimport React from 'react';import { ApolloProvider...组件包装您的应用程序，并将客户端实例作为属性传递，以便在整个应用程序中进行 GraphQL 查询。

4564 0

API协议设计的10种技术

在 GraphQL 中，类型系统用于描述 GraphQL Server 的能力并用于判断一个查询是否有效。...您可以使用 GraphQL 消除数据的额外读取，并且只检索特定格式的必要数据以提高应用程序性能。此外，GraphQL 非常适合于需要从多个资源聚合数据的情况。...() MQTT 是一种轻量级的、开放的消息队列传输协议，设计用于在低带宽、高延迟或不稳定网络环境中进行设备间通信。其设计注重资源效率，使其成为在受限环境中运行的设备和应用程序的理想选择。...然而，尽管名称如此，该协议并不使用消息队列; 相反，它提供发布-订阅消息: 设备在特定主题上发布消息，所有订阅该主题的设备都接收该消息。...客户端可以选择创建持久性会话，使得在客户端断开连接后，服务器能够保留其订阅信息。这有助于确保客户端在重新连接时能够接收到之前错过的消息。

3721 0

DataHub元数据治理平台架构

支持REST和GraphQL API 。此外，DataHub 支持基于 AVRO 的 API通过 Kafka 来传达元数据更改并订阅它们。...我们的路线图包括一个里程碑，即很快支持无代码元数据模型编辑，这将提高易用性，同时保留类型化 API 的所有优势。在元数据建模中了解元数据建模。...您还可以订阅 DataHub 元数据中发生的更改，从而允许您构建实时元数据驱动的系统。...为方便起见，DataHub 还提供简单的Python 发射器，供您集成到系统中，以在源点发射元数据更改 (MCP-s)。...此外，datahub-frontend服务在元数据图之上公开了 GraphQL API。

1.5K1 0

每日前端夜话(0x05)：2018年JavaScript状态调查（下）

作为React Native的替代方案，如果不想用React模式，在JavaScript中编写跨平台应用的开发者可以关注Weex，这可以让他们使用Vue.js生态系统。...这是我们的首次JS颁奖！你能猜出哪种技术在每个类别中夺魁吗？（注意：我们已从奖项中排除ES6以避免数据偏差）最满意奖获得用户满意百分比最高的库 ?...GraphQL 有87.7％听说过GraphQL的开发者想要学习它。 Storybook 79.6% Electron 77.5% 提到最多的在“其他库”选项中获得的答案最多。 ?...Reason 最可能替代Facebook团队使用的两个库：React和GraphQL。 Reason会遵循同样的路线吗？ Svelte Parcel 特别奖今年我们刚刚爱上的技术。 ?...尽管目前来说，前端还算是风平浪静，但是客户端如何从数据库获取数据的问题还远远未能解决，GraphQL肯定会开始在该领域制造越来越大的波浪。

2.2K4 0

React生态系统

React 不需要为简单的应用程序使用路由，同时在一些桌面和移动应用程序环境中，路由也不是必需的。...当引入 React 时，Facebook 还推出了 Flux（一种管理应用程序中状态的方法）和 GraphQL（一种用于在客户端和服务器之间进行通信的系统）。这两者都不如 React 本身流行。...Flux 在 React 之后不久就被推出了，但却直到2015年中期才得到普及。...同时，RxJS 也被合并到其它一些流行的命令行工具中。 GraphQL ? GraphQL 与 React 是由 Facebook 同时开发的，但是这两者之间并没有内在的联系。...GraphQL 是 Web 客户端查询服务器数据的一种方式。

9883 0

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

最后，它将我们的关注点转向了应用程序和特定于域的内容。这些内容是不能直接从市场购买或下载的。 2基础架构组件 GraphQL 服务器和 HTTP 服务器都属于基础架构组件。...我们之所以将基础设施组件称为基础设施，是因为我们会在它们的基础上构建应用程序。在这一基础（即框架）内，我们编写丰富的、领域特定的应用程序。基础设施只是驱动程序而已。...数据图从客户端延伸到服务器，并为现代 Web 应用程序中获取数据和更改状态时面临的最常见基础架构问题提供了答案为了通过 GraphQL 与后端服务通信，Apollo Client 公开了几种客户端方法...在架构层面，由于 GraphQL 仅向客户端公开单个端点，因此它满足了这一原则。 客户端隐藏了字段解析机制的所有复杂性，它只需关注如何在 GraphQL 服务器之上构建即可。...10总结在现代 Web 应用程序架构中，GraphQL 和 RESTfulWeb 服务器都是基础架构组件。基础架构组件是基本组件，它们构成了我们编写的特定领域 Web 应用程序的基础。

2.2K2 0

一系列令人敬畏的.NET核心库，工具，框架和软件

graphql-dotnet – 用于.NET的GraphQL。 graphql-dotnet-server – GraphQL for .NET – 订阅传输WebSockets。...JavaScriptViewEngine – 用于在JavaScript环境中呈现标记的ASP.NET MVC ViewEngine。适用于React和Angular服务器端呈现。...无例外 – 无异常的.NET客户端 Foundatio – 一个流畅的日志记录API，可用于在整个应用程序中记录消息。...aspnetcore-spa生成器 – Yeoman生成器，用于构建一个全新的ASP.NET Core单页面应用程序，该应用程序在客户端上使用Angular 2 / React / React和Redux...– 实时交易平台演示，展示在整个应用程序堆栈中应用的反应式编程原理。

18.6K3 0

Meatier — 内容丰富的类Meteor框架

下面是我对Meteor的主要抱怨：基于Node 0.10，并且在近期不会改变构建系统不支持代码分离（事实上完全相反，打包整个应用）全局变量（并没有名称空间）太依赖websockets（并不是每个页面都需要它...客户端验证 Simple Schema Joi 清晰的API，尽管这个包挺大数据库钩子 Collections2 GraphQL GraphQL 对于小应用来说太重了 (但是内容丰富) 表单 AutoForm...redux-form 非常棒的状态跟踪，与 react 完美结合 客户端缓存 Minimongo redux 加分项，日志，时光旅行，撤销功能 Socket 服务器 DDP-server socketcluster...扩展简单，发布订阅，认证，中间件认证 Meteor accounts JWTs JWTs 也能提供认证服务认证传输 DDP GraphQL (via HTTP) 只有必要时才使用sockets 前端...Blaze React 虚拟DOM，服务端渲染，异步路由等等构建系统 meteor webpack Meteor中Webpack的使用非常有限 CSS 魔术般地打包和提供 css-modules 组件范围的

9009 0

2017年JS 框架回顾：React 生态系统

在 Facebook 构建 React 之初，就有许多来自于开源社区第三方库的软件包。这些软件包使用 React 补充其它功能，以便提供完整的应用程序解决方案。...这些“路由”本质上是不同的功能块，在浏览器中表现为单独的 URL。React 不需要为简单的应用程序使用路由，同时在一些桌面和移动应用程序环境中，路由也不是必需的。...当引入 React 时，Facebook 还推出了 Flux（一种管理应用程序中状态的方法）和 GraphQL（一种用于在客户端和服务器之间进行通信的系统）。这两者都不如 React 本身流行。...Flux 在 React 之后不久就被推出了，但却直到2015年中期才得到普及。...GraphQL 是 Web 客户端查询服务器数据的一种方式。

92310 0

边缘服务的一致性、耦合和复杂性

在 RESTful API 设计中，URI 的路径部分用于标识特定实体 (也称为资源)。HTTP 谓词用于标识要对实体执行的操作类型。实体可以通过其他实体的 URI 路径部分链接到其他实体。...因为路径在 RESTful API 中被用于标识一个特定的实体，所以请求和响应的格式不应该发生明显的变化。...最为流行、功能齐全且成熟的 GraphQL 服务器端框架实现是由旧金山的一家名为 Apollo 的小型初创公司开发的。有了他们的框架，在客户端增加新功能就变得非常容易，且无需对服务器作出大量修改。...我相信，随着时间的推移，Apollo 风格的 GraphQL APM 监控将变得更加主流。在 RESTful API 中，客户端指定路径，可能是查询字符串参数，可能是身份验证，仅此而已。...你可以选择为不同的操作系统单独开发应用程序，也可以使用 Ionic 或 React Native 框架来开发同一套应用程序，然后为不同的操作系统分别生成各自的二进制包。

9341 0

如何使用 Nx、Next.js 和 TypeScript 构建 Monorepo

考虑一个场景，我们使用一些前端库或框架构建仪表板应用程序。此前端应用程序的代码可能存储在dashboard存储库中。此存储库使用的 UI 组件可能存储在另一个名为的存储库中components。...接下来，我们需要将这些凭据存储在我们的应用程序中。...API 在 GraphQL 中，我们必须安装一些包才能使我们的应用程序与 GraphQL 一起工作。...因此，如果数据是在服务器端获取的，客户端也需要使用相同的数据进行水化，而无需向 GraphQL 服务器做任何额外的请求。...查询的结果并将结果添加到 GraphQL 客户端的缓存中。

5.8K5 1

React 设计模式 0x6：数据获取

学习如何轻松构建可伸缩的 React 应用程序：数据获取 # React 中服务端数据获取的方式在大多数 React 应用程序中，应用程序需要来自 API 或服务器的数据才能正常运行。...它是同构的（即可以在浏览器和 nodejs 中使用相同的代码库）。在服务器端，它使用本地的 node.js http 模块，而在客户端（浏览器）中，它使用 XMLHttpRequests。...GraphQL 提供了 API 中数据的完整且易于理解的描述，使客户端能够精确地请求所需的数据，避免了不必要的数据传输，使得 API 能够随着时间的推移更容易地发展，并提供了强大的开发者工具。...从 API 缓存的数据可以存储在我们的状态管理中，然后在我们的应用程序中全局使用。尽管数据被缓存，但在刷新页面时，它将丢失数据，需要重新获取。...此外，您可以获取数据并将其存储在 React 应用程序状态中。 # React Query React Query 是一个库，用于处理 React 应用程序中的数据获取和管理。

1.2K2 0

2017年 JavaScript 框架回顾 -- React生态系统

前一篇文章中，我们介绍了2017年 JavaScript 框架的整体情况。我们也了解到在众多的前端框架中，目前最为庞大又在快速增长的当属 React 了，本文就来重点介绍 React 的生态系统。...React 不需要为简单的应用程序使用路由，同时在一些桌面和移动应用程序环境中，路由也不是必需的。...当引入 React 时，Facebook 还推出了 Flux（一种管理应用程序中状态的方法）和 GraphQL（一种用于在客户端和服务器之间进行通信的系统）。这两者都不如 React 本身流行。...同时，RxJS 也被合并到其它一些流行的命令行工具中。 GraphQL GraphQL 与 React 是由 Facebook 同时开发的，但是这两者之间并没有内在的联系。...GraphQL 是 Web 客户端查询服务器数据的一种方式。

1.2K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云