简单来说，要想在原生 Javascript 中直接使用 GraphQL 并不是一件特别容易的事，需要一些库来协助拉取和管理 GraphQL 数据。...主流的客户端框架主要有两种—— Relay 和 Apollo ，我们仅从有限的角度来看下二者的异同： Relay vs Apollo Relay Apollo 框架支持 仅支持 React, React...有所区别，都会遇到类似像 N+1 这样的慢查询问题，所以需要谨慎地将前端的查询转换成可靠的 Django ORM 查询。...,) 尴尬的是，如果你并不想用 Relay，我们需要针对 graphene-django-extras 做一些自己的定制，而原有的封装没有很好地暴露足够的接口，经过一番探索并无头绪，最终作罢。...适合成熟的客户端开发团队，反之 REST 是更好的选择 Django 相关的生态建设并不完善，没有一个足够强大、开箱即用的整合方案 由于查询并不是基于 Uri 维度，会给周边配套的生态—— 监控、日志等
此外，你无需使用像 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？
你需要同时在服务器和客户端上实现每个端点 还有大量的库可以在 ORM 或直接数据库自省的帮助下自动生成 REST 端点。即使使用了这样的库，它们通常也不是很灵活或可扩展的。...如果有的话，最好使用代码生成，但是它似乎不够灵活。即使是使用像 Moya 这样的辅助库，也会遇到同样障碍：有许多自定义行为需要处理，这是由前面提到的边缘情况引起的。...如果开发团队不是全栈的，那么服务器和客户端团队之间的沟通就至关重要，在没有机器可读的 API 规范的情况下更是如此。 GraphQL 如何做得更好？...总的来说，我发现，Apollo 比 Relay 等更简单和易于使用。...由于 Apollo 客户端库架构简单，我能够将一个使用 React.js 与 Redux 的应用慢慢过渡到 React Apollo，一个组件一个组件的，只在有意义的时候才这样做。
React 作为一个部分的解决方案，本质上是不如 Ember 和 Angular 这样的完整框架使用起来方便的。...GraphQL 是 Web 客户端查询服务器数据的一种方式。...GraphQL 通过名为 Relay 和 Apollo 的两个竞争库得到了普及，Relay 和 Apollo 提供了一个 Web 应用程序，用于生成 GraphQL 和管理数据流。...虽然 GraphQL 开发者使用量的绝对数还很小，但是 Apollo 的增长轨迹意味着 GraphQL 很值得开发者关注。...个JavaScript图表库 JavaScript中的内存泄漏以及如何处理
整体满意度 在一分（非常不满意）到五分（非常满意）的范围内，开发人员的整体满意度如何？ ? React ? GitHub 120k stars 用于构建用户界面，高效且灵活的JavaScript库。...功能齐全的GraphQL缓存客户端，适用于UI框架和GraphQL服务器。 Apollo 随时间的流行度 ? Apollo 最受喜欢的方面 ? Apollo 最不受欢迎的方面 ?...但整个领域很快就会受到GraphQL冲击波的影响。 GraphQL用户在两年内从5％上升到20％，他们选择的客户端似乎是Apollo。...另外Apollo的最新版本使Redux成为可选项，如果明年的结果看起来非常不同，那就不足为奇了…… 后端框架 后端的JavaScript近年来没有取得任何重大突破。...测试的未来可能包括更多在浏览器中进行自动化测试的解决方案，像Cypress这样的项目可能会包含在明年的调查中，我们可能会看到更多基于Puppeteer的工具。
GraphQL规范 GraphQL工具 GraphQL教程 GraphQL实现 服务器集成 数据库集成 Relay 中继一般资源 中继教程 中继工具 Apollo Apollo综合资源 影片 重要会谈...使用GraphQL编写基本API 使用Node.js和SQL构建GraphQL服务器 GraphQL Tour：变量 如何Graphql - GraphQL的Fullstack教程 GraphQL实现...- Facebook的GraphQL的Ruby实现 graphql-java - GraphQL Java实现 sangria - Scala GraphQL客户端和服务器库 graphql-php...with Relay Relay and Routing Relay工具 graphql-relay-js - 一个帮助构建支持react-relay的graphql-js服务器的库 react-router-relay...- React Router的中继集成 relay-local-schema - 在没有GraphQL服务器的情况下使用Relay relay-codemod - 基于jsodeshift的Codemod
React 作为一个部分的解决方案，本质上是不如 Ember 和 Angular 这样的完整框架使用起来方便的。 Flux ?...同时，RxJS 也被合并到其它一些流行的命令行工具中。 GraphQL ? GraphQL 与 React 是由 Facebook 同时开发的，但是这两者之间并没有内在的联系。...GraphQL 是 Web 客户端查询服务器数据的一种方式。...GraphQL 通过名为 Relay 和 Apollo 的两个竞争库得到了普及，Relay 和 Apollo 提供了一个 Web 应用程序，用于生成 GraphQL 和管理数据流。...虽然 GraphQL 开发者使用量的绝对数还很小，但是 Apollo 的增长轨迹意味着 GraphQL 很值得开发者关注。 React生态系统概述 ?
React 作为一个部分的解决方案，本质上是不如 Ember 和 Angular 这样的完整框架使用起来方便的。...同时，RxJS 也被合并到其它一些流行的命令行工具中。 GraphQL GraphQL 与 React 是由 Facebook 同时开发的，但是这两者之间并没有内在的联系。...GraphQL 是 Web 客户端查询服务器数据的一种方式。...GraphQL 通过名为 Relay 和 Apollo 的两个竞争库得到了普及，Relay 和 Apollo 提供了一个 Web 应用程序，用于生成 GraphQL 和管理数据流。...虽然 GraphQL 开发者使用量的绝对数还很小，但是 Apollo 的增长轨迹意味着 GraphQL 很值得开发者关注。
现在有许多用于编写JavaScript的GraphQL客户端和服务器的库和框架，其中最着名的是Apollo和Graphcool 。...它有一个简单的目的： 实现GraphQL在WebSocket（由所有流行的GraphQL客户端使用），所以不必考虑与net/http无缝集成 与net/http无缝集成 提供访问已建立订阅的简单方法，执行身份验证并向相应的客户端发送更新...它没有实现任何开箱即用的订阅。 一个典型的服务器实现将监听数据库的变化，并通过识别哪些订阅需要更新，重新执行这些订阅的查询并将结果发送给相应的订阅客户端来对这些更改做出反应。...以下代码示例显示了订阅管理器在任何时候如何检索订阅。 他们按照他们的关系分组。 每个连接都有唯一的ID，可选地，还有前面描述的Authenticate函数返回的用户。...如果您正在寻找下一个项目的React或GraphQL开发方面的帮助，我们很乐意在Functional Foundry处听到您的消息。
但是，如果你需要使用一个 GraphQL API，你很自然就会想到自己需要使用 React 和 / 或其他一些库才能让它跑起来。...这是因为许多教程和示例代码似乎都基于这样一个假设，也就是说如果你在使用 GraphQL，就需要使用这些库。 但是，一个对 GraphQL API 的查询只不过是一个定制格式的 HTTP 请求而已。...node-fetch 库从 Node 中的浏览器实现 JavaScript fetch API。这样我们就可以丢弃大约 11 行代码（减少了 25％），同时还让代码更容易阅读了。...需要强调的是，如果你的 API 需要传递某种 API 密钥或凭据，那么你不会希望在客户端执行这一操作，因为你的凭据将被公开。...接下来可以做什么 这里的目标不是让大家不要使用 GraphQL 客户端库来执行 GraphQL 查询。那些库提供的能力远远超过了我在这里讨论的简单功能。
React Router 成熟的Web应用程序共有的一个特点是都提供了多个“路由”，这些“路由”本质上是不同的功能块，在浏览器中表示为单独的URL。...这一结果出乎意料，因为React作为一个局部的解决方案，本质上不如Ember和Angular这样的完整框架使用起来方便。 Flux 一个完整应用程序的另一个不通过React的部分就是数据层。...GraphQL 虽然它与React是同时在Facebook内部开发的，但是GraphQL与React并没有内在的联系。它只是Web客户端查询服务器数据的一种方式。...它通过名为Relay和Apollo的两个竞争库得到了一定的普及，这两个库提供用于生成GraphQL和管理数据流的Web应用程序。...首先推出的是Relay，目前正在持续成长，但是已经被半年后发布的Apollo盖过了风头。虽然绝对数量还很小，但Apollo的增长轨迹值得深入挖掘。
本文首先介绍了 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 优化的问题。
这篇文章记录使用Vue+GraphQL搭建客户端。 客户端项目目录结构如下： ?...'http://localhost:3001/graphql', }) // 创建订阅的 websocket 连接 const wsLink = new WebSocketLink({ uri:...'ws://localhost:3001/graphql', options: { reconnect: true, } }) // 使用分割连接的功能 // 你可以根据发送的操作类型将数据发送到不同的连接...前面我们介绍了GraphQL的概念和基础知识，这篇文章记录下使用Nestjs+GraphQL搭建Node服务。...: string; // 要声明数组的项（而不是数组本身）是可为空的，请将nullable属性设置'items' // 如果数组及其项都是可空的，则设置nullable为'itemsAndList
抓取不足——这是指 API 端点并没有提供所需的全部信息。因此，客户端必须发出多个请求才能获取应用程序所需的全部内容。 什么是 GraphQL？...GraphQL vs REST 总结一下，两者主要有如下几个明显的差异： 数据抓取 REST 会导致抓取过度或抓取不足，而 GraphQL 则不会这样。...自动缓存 REST 能自动生效缓存，而 GraphQL 则没有自动缓存系统，但是可以借助 Apollo Client、Relay 等客户端实现缓存。...但是，当使用 Apollo Client、Relay 等客户端时，它也能很容易处理错误。 结 论 与 REST 相比， GraphQL 当然更具优势，但它可能并不总是最佳实践。...如果大家想分享自己关于 GraphQL 或 REST 的经验，请在评论区留言，感谢您的阅读！
GraphQL没有辜负2017年的炒作，像 Yelp、Spotify、Github、沃尔玛、《纽约时报》 等主流公司都在采用GraphQL，而且现在还有了基于GraphQL的API。...RESTful API当然还远没到灭亡的地步，但再次地，看看初创企业的使用趋势就知道GraphQL是个热门选项。 另一方面，像Falcor这样的替代者几乎连讨论的声音都没有了。...如果你想在创新公司找份工作的话，现在绝对是开始学习GraphQL的时候。...我们现在有了 Relay Modern （Facebook开发）和Apollo，让你可以比Redux更高效地抓取并传递GraphQL数据到React应用的GraphQL客户端框架。...但就像一位开发者指出那样，Relay/Apollo/Redux： 这些框架和它们的好处未必需要是互斥的。实际上，这几个一起使用可以提供很好的关注分离，这是web开发来说可太重要了。
阅读字数：6109 | 16分钟阅读 摘要 本次演讲主要介绍如何使用GraphQL，分别从前后端两个角度分析GraphQL的优劣势，对比Restful又能够给前后端协同开发带来哪些好处。...Relay的数据缓存由官方提供的RelayStore完成，Apollo则是基于Redux。基于以上几点考虑，我最终选择了Apollo。...以上这种情况对于前端来说，操作的只是某个实体的一个或几个资源字段。但是对于后端来说，每个实体背后可能对应着不同的数据库甚至不同类型的存储集群，同时后端集群间的海量数据自由join得到的结果。...第三点是没有做分页的数目限制，一般来说前端可以通过传递特定的参数给接口来设置每页的接收数量，但是有些前端人员可能会为了快速上线新功能将每页的数量直接设置为9999，这样服务器就又会被搞宕机。...先来看看GraphQL还有那些弊端。 第一，虽然后端已经做了一些优化，但是还是没有完全实现前端的按需查询，当数据量达到一定级别的时候，数据库查询可能会成为性能瓶颈。
GraphQL没有辜负2017年的炒作，像Yelp、Spotify、Github、沃尔玛、《纽约时报》等主流公司都在采用GraphQL，而且现在还有了基于GraphQL的API。...RESTful API当然还远没到灭亡的地步，但再次地，看看初创企业的使用趋势就知道GraphQL是个热门选项。 另一方面，像Falcor这样的替代者几乎连讨论的声音都没有了。...如果你想在创新公司找份工作的话，现在绝对是开始学习GraphQL的时候。...我们现在有了Relay Modern （Facebook开发）和Apollo，让你可以比Redux更高效地抓取并传递GraphQL数据到React应用的GraphQL客户端框架。...但就像一位开发者指出那样，Relay/Apollo/Redux： “这些框架和它们的好处未必需要是互斥的。实际上，这几个一起使用可以提供很好的关注分离，这是web开发来说可太重要了。”
正如 Sashko Stubailo 指出的： 不幸的是，在 Redux 应用程序中异步加载服务器数据的模式还没有建立起来，并且经常需要使用外部帮助程序库，如 redux-saga。...快速的启动一个服务端环境 启动一个 redux 脚手架 增加一个 GraphQL 客户端 (Apollo Client) 使用 GraphQL 获取数据 获取更多的数据 接下来要做的 1....这样我们就把一个 GraphQL 客户端添加进了一个普通的 Redux 应用中。 接下来让我们开始第一个 GraphQL 查询吧。 4....在我们的 GraphQL 服务器中，并没有定义如何获取 authors。...接下来让我们刷新一下浏览器看看是否得到了正确的数据。 ? 如果一切顺利的话，你的 HomeView 将会看起来像这个样子。 6.
Relay[39]，FaceBook出品，所以也比较受到推崇（我记得看到过原因是这样，GraphQL如果要改啥，才刚进入草案，Relay团队就已经提供了支持），但上手没有Apollo-Client那么容易...GraphQURL[40]，Hasura（介绍见下面的Engine部分）出品，没使用过。 GraphQL-Zeus[41]，小而美的GraphQL客户端，集成了Code-Generator能力。...但我只是比较简单的使用过，用于和TypeGraphQL一起实现自定义指令，详见 这里[52] Engine GraphQL Engine其实是一个非常神奇的方向，有点像REST那边的各种自动生成REST...，Apollo的useQuery接收的是GraphQL Document，BlitzJS中的则接收的是后端方法，其中会直接db.entity.create()这样去写数据库）。...，如果你有兴趣或恰好知道身边有这样的同学，欢迎投递简历到我的邮箱：linbudu@qq.com。
如果你是来自于像 Angular 这样的框架的开发者，你可能已经习惯了框架包含了所需要的所有功能， 然而对于 React 来说，它的核心并不是完善所有的可选库。这是优势还是劣势取决于你自己。...所有 React 的内置 hooks 都非常适合本地状态管理。当涉及到远程数据的状态管理时，如果远程数据带有 GraphQL 端点，我建议使用 Apollo Client。...Apollo Client 的替代方案是 urql 和 Relay。 如果远程数据不是来自 GraphQL 端点，请尝试使用 React 的 Hooks 来管理它。...如果您有足够的时间来处理 GraphQL API，我建议您使用 Apollo Client。可供选择的 GraphQL 客户端将是 urql 或 Relay。...如果你想拥有完全的控制权，选择像Digital Ocean这样的。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
