首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如果没有像Apollo或Relay这样的库,浏览器客户端如何使用GraphQL订阅?

如果没有像Apollo或Relay这样的库,浏览器客户端可以使用以下方法来使用GraphQL订阅:

  1. 使用原生的WebSocket API:浏览器客户端可以使用WebSocket API来建立与服务器之间的实时通信连接。WebSocket提供了双向通信的能力,可以用于GraphQL的订阅功能。在订阅时,客户端可以发送一个订阅请求到服务器,服务器会将更新的数据通过WebSocket发送给客户端。客户端可以通过JavaScript代码监听WebSocket的消息事件,并在接收到数据时更新UI。
  2. 使用GraphQL.js:GraphQL.js是一个用于JavaScript的GraphQL实现。它提供了一套用于构建和执行GraphQL查询的API。浏览器客户端可以使用GraphQL.js来手动处理GraphQL的订阅功能。客户端可以发送订阅请求到服务器,并在接收到数据时更新UI。

虽然没有像Apollo或Relay这样的库那样提供完整的订阅功能,但是以上方法可以帮助开发者实现自定义的GraphQL订阅功能。在实际开发中,可以根据具体需求选择适合的方法来处理GraphQL订阅。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

GraphQL 查询你 Django 应用

简单来说,要想在原生 Javascript 中直接使用 GraphQL 并不是一件特别容易事,需要一些来协助拉取和管理 GraphQL 数据。...主流客户端框架主要有两种—— RelayApollo ,我们仅从有限角度来看下二者异同: Relay vs Apollo Relay Apollo 框架支持 仅支持 React, React...有所区别,都会遇到类似 N+1 这样慢查询问题,所以需要谨慎地将前端查询转换成可靠 Django ORM 查询。...,) 尴尬是,如果你并不想用 Relay,我们需要针对 graphene-django-extras 做一些自己定制,而原有的封装没有很好地暴露足够接口,经过一番探索并无头绪,最终作罢。...适合成熟客户端开发团队,反之 REST 是更好选择 Django 相关生态建设并不完善,没有一个足够强大、开箱即用整合方案 由于查询并不是基于 Uri 维度,会给周边配套生态—— 监控、日志等

2K60

GraphQL是API未来,但它并非银弹

此外,你无需使用 Apollo 这样重量级客户端。由 Vercel 提供 swr 很小,很容易使用。它支持分页、hooks,并能帮我们实现非常有效地来回导航。...GraphQL 已经持久化了查询,但是这种实现会带来额外开销。如果没有使用 Relay 这样客户端(它默认会持久化查询),则必须自己完成,或者使用一些第三方来实现。...与使用 Next.JS BFF 方法相比,在前端获得相同结果会更复杂。如何使用 GraphQL 实现 Etags?如果没有任何变化,如何使 GraphQL 服务器返回 304 状态码?...但与 Docker 类似,该语言本身并没有那么强大。它强大源于其可扩展性和周边工具。 由 Facebook 开源并不是该语言成功原因。 Relay 这样工具才是。...如果没有 Apollo 提供所有工具,你认为 GraphQL 会变成现在这样吗?会议呢?GraphQL 峰会?Hasura 在线会议?Dgraph Lab 举办 GraphQL in Space?

2K10
  • 为什么我使用 GraphQL 而放弃 REST API?

    你需要同时在服务器和客户端上实现每个端点 还有大量可以在 ORM 直接数据自省帮助下自动生成 REST 端点。即使使用这样,它们通常也不是很灵活或可扩展。...如果有的话,最好使用代码生成,但是它似乎不够灵活。即使是使用 Moya 这样辅助,也会遇到同样障碍:有许多自定义行为需要处理,这是由前面提到边缘情况引起。...如果开发团队不是全栈,那么服务器和客户端团队之间沟通就至关重要,在没有机器可读 API 规范情况下更是如此。 GraphQL 如何做得更好?...总的来说,我发现,ApolloRelay 等更简单和易于使用。...由于 Apollo 客户端架构简单,我能够将一个使用 React.js 与 Redux 应用慢慢过渡到 React Apollo,一个组件一个组件,只在有意义时候才这样做。

    2.3K30

    每日前端夜话(0x04):2018年JavaScript状态调查(中)

    整体满意度 在一分(非常不满意)到五分(非常满意)范围内,开发人员整体满意度如何? ? React ? GitHub 120k stars 用于构建用户界面,高效且灵活JavaScript。...功能齐全GraphQL缓存客户端,适用于UI框架和GraphQL服务器。 Apollo 随时间流行度 ? Apollo 最受喜欢方面 ? Apollo 最不受欢迎方面 ?...但整个领域很快就会受到GraphQL冲击波影响。 GraphQL用户在两年内从5%上升到20%,他们选择客户端似乎是Apollo。...另外Apollo最新版本使Redux成为可选项,如果明年结果看起来非常不同,那就不足为奇了…… 后端框架 后端JavaScript近年来没有取得任何重大突破。...测试未来可能包括更多在浏览器中进行自动化测试解决方案,Cypress这样项目可能会包含在明年调查中,我们可能会看到更多基于Puppeteer工具。

    1.6K20

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

    GraphQL规范 GraphQL工具 GraphQL教程 GraphQL实现 服务器集成 数据集成 Relay 中继一般资源 中继教程 中继工具 Apollo Apollo综合资源 影片 重要会谈...使用GraphQL编写基本API 使用Node.js和SQL构建GraphQL服务器 GraphQL Tour:变量 如何Graphql - GraphQLFullstack教程 GraphQL实现...- FacebookGraphQLRuby实现 graphql-java - GraphQL Java实现 sangria - Scala GraphQL客户端和服务器 graphql-php...with Relay Relay and Routing Relay工具 graphql-relay-js - 一个帮助构建支持react-relaygraphql-js服务器 react-router-relay...- React Router中继集成 relay-local-schema - 在没有GraphQL服务器情况下使用Relay relay-codemod - 基于jsodeshiftCodemod

    12.4K30

    构建带 Subscriptions graphql golang 后端

    现在有许多用于编写JavaScriptGraphQL客户端和服务器和框架,其中最着名Apollo和Graphcool 。...它有一个简单目的: 实现GraphQL在WebSocket(由所有流行GraphQL客户端使用),所以不必考虑与net/http无缝集成 与net/http无缝集成 提供访问已建立订阅简单方法,执行身份验证并向相应客户端发送更新...它没有实现任何开箱即用订阅。 一个典型服务器实现将监听数据变化,并通过识别哪些订阅需要更新,重新执行这些订阅查询并将结果发送给相应订阅客户端来对这些更改做出反应。...以下代码示例显示了订阅管理器在任何时候如何检索订阅。 他们按照他们关系分组。 每个连接都有唯一ID,可选地,还有前面描述Authenticate函数返回用户。...如果您正在寻找下一个项目的ReactGraphQL开发方面的帮助,我们很乐意在Functional Foundry处听到您消息。

    2.7K30

    如何在纯 JavaScript 中使用 GraphQL

    但是,如果你需要使用一个 GraphQL API,你很自然就会想到自己需要使用 React 和 / 其他一些才能让它跑起来。...这是因为许多教程和示例代码似乎都基于这样一个假设,也就是说如果你在使用 GraphQL,就需要使用这些。 但是,一个对 GraphQL API 查询只不过是一个定制格式 HTTP 请求而已。...node-fetch 从 Node 中浏览器实现 JavaScript fetch API。这样我们就可以丢弃大约 11 行代码(减少了 25%),同时还让代码更容易阅读了。...需要强调是,如果 API 需要传递某种 API 密钥凭据,那么你不会希望在客户端执行这一操作,因为你凭据将被公开。...接下来可以做什么 这里目标不是让大家不要使用 GraphQL 客户端来执行 GraphQL 查询。那些提供能力远远超过了我在这里讨论简单功能。

    3.5K10

    2017JavaScript框架战报-React分战场

    React Router 成熟Web应用程序共有的一个特点是都提供了多个“路由”,这些“路由”本质上是不同功能块,在浏览器中表示为单独URL。...这一结果出乎意料,因为React作为一个局部解决方案,本质上不如Ember和Angular这样完整框架使用起来方便。 Flux 一个完整应用程序另一个不通过React部分就是数据层。...GraphQL 虽然它与React是同时在Facebook内部开发,但是GraphQL与React并没有内在联系。它只是Web客户端查询服务器数据一种方式。...它通过名为RelayApollo两个竞争得到了一定普及,这两个提供用于生成GraphQL和管理数据流Web应用程序。...首先推出Relay,目前正在持续成长,但是已经被半年后发布Apollo盖过了风头。虽然绝对数量还很小,但Apollo增长轨迹值得深入挖掘。

    1K70

    GraphQL 从入门到实践

    本文首先介绍了 GraphQL,再通过 MongoDB + graphql + graph-pack 组合实战应用 GraphQL,详细阐述如何使用 GraphQL 来进行增删改查和数据订阅推送,并附有使用示例...传统 API 拿到是前后端约定好数据格式,GraphQL 对 API 中数据提供了一套易于理解完整描述,客户端能够准确地获得它需要数据,没有任何冗余,也让 API 更容易地随着时间推移而演进...GraphQL 操作类型可以是 query、mutation subscription,描述客户端希望进行什么样操作 query 查询:获取数据,比如查找,CRUD 中 R mutation...正如尤雨溪所说,为什么 GraphQL 两三年前没有广泛使用起来呢,可能有下面两个原因: GraphQL field resolve 如果按照 naive 方式来写,每一个 field 都对数据直接跑一个...FB 本身没有这个问题,因为他们内部数据这一层也是抽象掉,写 GraphQL 接口的人不需要顾虑 query 优化问题。

    2.5K31

    塔荐 | 2018 年最值得关注 JavaScript 趋势

    GraphQL没有辜负2017年炒作, Yelp、Spotify、Github、沃尔玛、《纽约时报》 等主流公司都在采用GraphQL,而且现在还有了基于GraphQLAPI。...RESTful API当然还远没到灭亡地步,但再次地,看看初创企业使用趋势就知道GraphQL是个热门选项。 另一方面,Falcor这样替代者几乎连讨论声音都没有了。...如果你想在创新公司找份工作的话,现在绝对是开始学习GraphQL时候。...我们现在有了 Relay Modern (Facebook开发)和Apollo,让你可以比Redux更高效地抓取并传递GraphQL数据到React应用GraphQL客户端框架。...但就像一位开发者指出那样,Relay/Apollo/Redux: 这些框架和它们好处未必需要是互斥。实际上,这几个一起使用可以提供很好关注分离,这是web开发来说可太重要了。

    1.5K80

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

    阅读字数:6109 | 16分钟阅读 摘要 本次演讲主要介绍如何使用GraphQL,分别从前后端两个角度分析GraphQL优劣势,对比Restful又能够给前后端协同开发带来哪些好处。...Relay数据缓存由官方提供RelayStore完成,Apollo则是基于Redux。基于以上几点考虑,我最终选择了Apollo。...以上这种情况对于前端来说,操作只是某个实体一个几个资源字段。但是对于后端来说,每个实体背后可能对应着不同数据甚至不同类型存储集群,同时后端集群间海量数据自由join得到结果。...第三点是没有做分页数目限制,一般来说前端可以通过传递特定参数给接口来设置每页接收数量,但是有些前端人员可能会为了快速上线新功能将每页数量直接设置为9999,这样服务器就又会被搞宕机。...先来看看GraphQL还有那些弊端。 第一,虽然后端已经做了一些优化,但是还是没有完全实现前端按需查询,当数据量达到一定级别的时候,数据查询可能会成为性能瓶颈。

    7.5K20

    大势 | 2018最值得关注JavaScript趋势

    GraphQL没有辜负2017年炒作,Yelp、Spotify、Github、沃尔玛、《纽约时报》等主流公司都在采用GraphQL,而且现在还有了基于GraphQLAPI。...RESTful API当然还远没到灭亡地步,但再次地,看看初创企业使用趋势就知道GraphQL是个热门选项。 另一方面,Falcor这样替代者几乎连讨论声音都没有了。...如果你想在创新公司找份工作的话,现在绝对是开始学习GraphQL时候。...我们现在有了Relay Modern (Facebook开发)和Apollo,让你可以比Redux更高效地抓取并传递GraphQL数据到React应用GraphQL客户端框架。...但就像一位开发者指出那样,Relay/Apollo/Redux: “这些框架和它们好处未必需要是互斥。实际上,这几个一起使用可以提供很好关注分离,这是web开发来说可太重要了。”

    80220

    你还在用 REST API 吗?

    抓取不足——这是指 API 端点并没有提供所需全部信息。因此,客户端必须发出多个请求才能获取应用程序所需全部内容。 什么是 GraphQL?...GraphQL vs REST 总结一下,两者主要有如下几个明显差异: 数据抓取 REST 会导致抓取过度抓取不足,而 GraphQL 则不会这样。...自动缓存 REST 能自动生效缓存,而 GraphQL没有自动缓存系统,但是可以借助 Apollo Client、Relay客户端实现缓存。...但是,当使用 Apollo Client、Relay客户端时,它也能很容易处理错误。 结 论 与 REST 相比, GraphQL 当然更具优势,但它可能并不总是最佳实践。...如果大家想分享自己关于 GraphQL REST 经验,请在评论区留言,感谢您阅读!

    1.5K10

    在 redux 应用中使用 GraphQL

    正如 Sashko Stubailo 指出: 不幸是,在 Redux 应用程序中异步加载服务器数据模式还没有建立起来,并且经常需要使用外部帮助程序,如 redux-saga。...快速启动一个服务端环境 启动一个 redux 脚手架 增加一个 GraphQL 客户端 (Apollo Client) 使用 GraphQL 获取数据 获取更多数据 接下来要做 1....这样我们就把一个 GraphQL 客户端添加进了一个普通 Redux 应用中。 接下来让我们开始第一个 GraphQL 查询吧。 4....在我们 GraphQL 服务器中,并没有定义如何获取 authors。...接下来让我们刷新一下浏览器看看是否得到了正确数据。 ? 如果一切顺利的话,你 HomeView 将会看起来这个样子。 6.

    1.9K10

    写在 2021: 值得关注学习前端框架和工具

    Relay[39],FaceBook出品,所以也比较受到推崇(我记得看到过原因是这样GraphQL如果要改啥,才刚进入草案,Relay团队就已经提供了支持),但上手没有Apollo-Client那么容易...GraphQURL[40],Hasura(介绍见下面的Engine部分)出品,没使用过。 GraphQL-Zeus[41],小而美的GraphQL客户端,集成了Code-Generator能力。...但我只是比较简单使用过,用于和TypeGraphQL一起实现自定义指令,详见 这里[52] Engine GraphQL Engine其实是一个非常神奇方向,有点REST那边各种自动生成REST...,ApollouseQuery接收GraphQL Document,BlitzJS中则接收是后端方法,其中会直接db.entity.create()这样去写数据)。...,如果你有兴趣恰好知道身边有这样同学,欢迎投递简历到我邮箱:linbudu@qq.com。

    4.2K10

    2020 年你应该知道 React

    如果你是来自于 Angular 这样框架开发者,你可能已经习惯了框架包含了所需要所有功能, 然而对于 React 来说,它核心并不是完善所有的可选。这是优势还是劣势取决于你自己。...所有 React 内置 hooks 都非常适合本地状态管理。当涉及到远程数据状态管理时,如果远程数据带有 GraphQL 端点,我建议使用 Apollo Client。...Apollo Client 替代方案是 urql 和 Relay如果远程数据不是来自 GraphQL 端点,请尝试使用 React Hooks 来管理它。...如果您有足够时间来处理 GraphQL API,我建议您使用 Apollo Client。可供选择 GraphQL 客户端将是 urql Relay。...如果你想拥有完全控制权,选择Digital Ocean这样

    14.4K40
    领券