作者 | Khalil Stemmler 策划 | 田晓旭 在服务器上使用 GraphQL 代替 REST 是有很多好处的,使用 Apollo Client 取代自己编写的数据获取逻辑也有很多优势。...Alistair Cockburn 的“六边形架构” 我非常赞同这种类型的架构,因为它使我们能够: 直到真正有必要做出决策时,才决定到底采用哪种类型的 Web 服务器、数据库、事务电子邮件提供商或缓存技术...数据图从客户端延伸到服务器,并为现代 Web 应用程序中获取数据和更改状态时面临的最常见基础架构问题提供了答案 为了通过 GraphQL 与后端服务通信,Apollo Client 公开了几种客户端方法...通过 Apollo Federation,我们可以绘制并公开由多个 GraphQL 端点组成的单个数据图 在 Federation 中,你可以组成模式并解析其他服务 / 限界上下文中的字段。...10总结 在现代 Web 应用程序架构中,GraphQL 和 RESTfulWeb 服务器都是基础架构组件。 基础架构组件是基本组件,它们构成了我们编写的特定领域 Web 应用程序的基础。
随着针对 REST API 的 Apollo Connectors 的推出,开发人员可以逐步或一次性地将 REST API 集成到 联邦 GraphQL 架构中。...“这也摆脱了额外的网络跳转、性能成本以及与在生产环境中运行服务器相关的一切。”...也就是说,GraphQL 提供了一种强类型的架构定义语言来描述跨任意数量系统的数据,这种方式对客户端来说既直观又实用。相比之下,REST 鼓励采用更加面向资源的方法来组织和部署服务,通常沿着域边界。...它不比 REST 好,”DeBergalis 在其 GraphQL 峰会 2024 的主题演讲中说道。“这不是重点。它使这些东西变得更好,对吧?”...“但以我们目前的吞吐量,它不一定会解决我们所有的问题——你总是需要一台服务器。” Apollo 之所以为 REST 设计 Connectors,是因为它仍然是最流行的 API 格式。
灵活性 是使用 REST 的另一个优势,因为可以将其设计成处理不同类型的调用并返回不同的数据格式。 REST 的劣势 抓取过度——这是指 API 端点提供的信息比客户端所需要的要多得多。...抓取不足——这是指 API 端点并没有提供所需的全部信息。因此,客户端必须发出多个请求才能获取应用程序所需的全部内容。 什么是 GraphQL?...除此之外,它还允许我们将不同的实体组合到单个查询中。 GraphQL 的优势 检索精确的数据,无任何多余数据。在 GraphQL 中,可以得到我们所请求的内容,这是一个很大的优势。...GraphQL 的劣势 对于简单的应用程序来说,设置类型、查询等可能有点 复杂,因为使用 REST 可以很容易地完成。 它使用的是 单个端点,而不是遵循 HTTP 规范进行缓存。...但是,当使用 Apollo Client、Relay 等客户端时,它也能很容易处理错误。 结 论 与 REST 相比, GraphQL 当然更具优势,但它可能并不总是最佳实践。
以上是 Apollo Client 的数据流架构图。 GraphQL:一旦学会,随处可用 关于 GraphQL 有一个常见的误区:GraphQL 的实施依赖于服务器端某种特定的实现。...事实上,GraphQL 具有很强的灵活性。GraphQL 并不在乎请求是要发送给一个 gRPC 服务器,或是 REST 端点,又或是客户端缓存。...这便是 Resolver 发挥作用的地方了。如果你以前在服务器端使用过 graphql-tools,那么你会发现两者的 resolver 的类型签名是一样的。 ....正确的方法是使用 [apollo-link-rest](https://github.com/apollographql/apollo-link-rest),这个包里包含有 @rest 指令。...GraphQL 的一个很让人激动的功能是在单个 query 中向多个数据源请求数据。
后来,我接触了 GraphQL,它的灵活性和高效性让我眼前一亮。今天,我就来和大家聊聊如何使用 GraphQL 进行 API 设计,并通过一个实际项目代码示例,让你轻松上手。什么是 GraphQL?...它的核心特点包括:灵活查询:客户端可以自定义返回的数据结构,避免无用数据。单一端点:所有请求都通过同一个 URL 处理,不需要多个 REST 端点。...定义 GraphQL Schema在 GraphQL 中,Schema 是 API 的核心,它定义了数据的结构和查询方式。...搭建 GraphQL 服务器我们使用 Node.js 和 Apollo Server 实现一个简单的 GraphQL 服务器。...相比传统的 REST API,它可以减少数据传输,提高查询效率,同时也让前端开发更加自由。如果你还没用过 GraphQL,不妨从这篇文章的示例开始实践,相信你会爱上它的强大之处!
4 强类型接口 在这一段中,Kyle 指出了 REST API 类型不严格的问题。他谈到了 API 的问题,即你不清楚获得的是一组帖子,还是其他的什么东西,以及查询参数如何使情况变得更加复杂。...GraphQL 服务器可以自由地使用它期望的任何类型进行响应。如果你发送一个查询,则服务器的响应可以不符合自省响应中的 GraphQL 模式。以 Apollo Federation 为例。...当我们讨论 GraphQL 中的类型安全时,其实我们的意思是,我们相信 GraphQL 服务器的行为会与自省查询响应保持一致。为什么我们不能同样信任接口定义规范呢?我想我们可以。...不管服务器提供的是 REST 还是 GraphQL,问题都是一样的。...我们应该给出一个更细致的答复,而不是把 GraphQL 说成是圣杯。 解决问题的最佳方法是先看问题,然后对可能用来解决问题的工具进行差异比较。
在本指南中,我们将介绍如何将 GraphQL 无缝集成到您的 React.js 项目中。什么是 GraphQL?GraphQL 是用于 API 的查询语言,也是用于执行那些查询的运行时。...它允许您仅请求所需的数据,从而使 API 调用更加高效。与传统的 REST API 不同,传统的 REST API 由服务器确定响应结构,而 GraphQL 则使客户端能够定义其所需数据的形状和结构。...如果还没有,请使用以下命令创建一个:npx create-react-app my-graphql-appcd my-graphql-appnpm start现在,让我们安装 GraphQL 所需的软件包...:npm install graphql @apollo/client@apollo/client 软件包是 Apollo Client,这是一个强大的库,用于在 React 应用程序中管理状态并进行...在这个例子中,假设您有一个在 http://localhost:4000/graphql 上运行的 GraphQL 服务器。您可以将此 URL 替换为实际的 GraphQL 服务器端点。
在TS中这个工具的主要能力就是生成TS的类型定义,同时它的插件体系还提供了更多的额外能力,如Apollo-Client的插件,让你可以直接使用封装好的的useXXXQuery等,前端连查询语句都不用写了...生成GraphQL Schema、API、查询语句(Query/Mutation/Subscription都支持,并且是根据你的Schema组合来的)等,可以说是非常猛了。...Yarn Workspace,Yarn提供的Monorepo工具,有看到实践是用Lerna来管理版本,Yarn Workspace管理依赖。...的useQuery接收的是GraphQL Document,BlitzJS中的则接收的是后端方法,其中会直接db.entity.create()这样去写数据库)。...RedwoodJS,基于React + Prisma + GraphQL,整体类似于Blitz,但文档全面的多,最佳实践、测试、迁移、路线规划都有非常详细的介绍,甚至还介绍了框架名字的由来。
在TS中这个工具的主要能力就是生成TS的类型定义,同时它的插件体系还提供了更多的额外能力,如Apollo-Client的插件,让你可以直接使用封装好的的useXXXQuery等,前端连查询语句都不用写了...生成GraphQL Schema、API、查询语句(Query/Mutation/Subscription都支持,并且是根据你的Schema组合来的)等,可以说是非常猛了。...Yarn Workspace[79],Yarn提供的Monorepo工具,有看到实践是用Lerna来管理版本,Yarn Workspace管理依赖。...,Apollo的useQuery接收的是GraphQL Document,BlitzJS中的则接收的是后端方法,其中会直接db.entity.create()这样去写数据库)。...RedwoodJS[82],基于React + Prisma + GraphQL,整体类似于Blitz,但文档全面的多,最佳实践、测试、迁移、路线规划都有非常详细的介绍,甚至还介绍了框架名字的由来。
如果你的客户端和 / 或服务器编程语言是静态类型的,并且你不能用错误的字段名或类型构造对象,那可能没问题。...在待办事项列表应用中,列表本身就是一个集合。大多数集合都可以包含 100 多个项。对于大多数服务器来说,在一次响应的一个集合中返回所有项是一个繁重的操作。...此模式中的其他变体和查询也是如此:对输入进行类型检查和验证,并且基于查询,GraphQL 服务器知道期望的结果形状。...另外值得一提的两个 GraphQL 库是 PostGraphile 和 Apollo。...相应地,Apollo 提供了多个平台的客户端库,以及在最流行的编程语言(包括 TypeScript 和 Swift)中生成类型定义的代码生成器。
你可以将 GraphQL 理解成一个中间件,是连接客户端和数据库之间的一座桥梁,客户端给它一个描述,然后从数据库中组合出符合这段描述的数据返回。...最后我们来到请求体的最外层: ? 操作类型:指定本请求体要对数据做什么操作,类似与 REST 中的 GET POST。...也就是说,请求体的结构也确定了最终返回数据的结构。 GraphQL Server 在前面的 REST 举例中,我们请求多个资源有多个 API 端点。...Schema 前面我们提到,GraphQL 拥有一个类型系统,那么每个字段的类型是怎么约定的呢?答案就在本小节中。在 GraphQL 中,类型的定义以及查询本身都是通过 Schema 去定义的。...使用 ThinkJS 搭建 GraphQL API ThinkJS 是一款面向未来开发的 Node.js 框架,整合了大量的项目最佳实践,让企业级开发变得如此简单、高效。
知彼知己,方能百战百胜,下面让我们首先来看看什么是GraphQL,它和传统的REST API又有什么不同? ---- 什么是GraphQL ?...Schema只是一个概念,它是由各种数据类型及其字段组成,而每个类型的每个字段都有相应的函数来返回数据,且Schema里的字段可以聚合其他Schema,我们可以将Schema理解为多个Query组成的一张表...总结下: 前端自己定义返回的数据及结构,降低前后端沟通成本 无需编写接口文档(GraphQL会根据schema自动生成API文档) Schema拼接,可以组合和连接多个GraphQL API,合并为一个...,减少请求次数 GraphQL是强类型的,通过它,可以在执行之前验证 GraphQL 类型系统中的查询, 它帮助我们构建更强大的 API。...请求的Body里面包含的是我们在GraphQL server中 定义的Query 和Schema中的字段。
的,我们知道,REST强调以资源来划分系统,通过URL规范来操作相应的资源: 一个系统中的资源有关联关系,通过URL规范就不太好定义一个很好的url接口 每个操作都需要对应一个url接口 前端在获取资源组合的数据展示时...; 这些规范用来指导GraphQL服务器的实现 Schema Schema 是任何 GraphQL 服务器实现的核心。...另外,在微服务架构下,多个微服务提供 Schema 时,我们需要通过一种机制将多个服务的 Schema 整合起来,这种整合 Schema 的思路最重要的就是需要解决服务之间的重复资源和冲突字段问题,如果多个服务需要同时提供同一个类型的基础资源...的查询语句有几个特性: 按需取字段,不需要的字段可以不查询,类似于 SQL 里的 select 在类型定义的基础上,可以关联查询多个类型的数据,类似于 SQL 里的 join(但不完全一样) 可以递归的对某些字段进行理论上无限深度的查询...这样不论是维护还是使用上都很难进行下去,而且与现在主流的微服务架构体系相矛盾 业界目前最主流的解决方案是 Apollo GraphQL 提供的 GraphQL Federation 功能,并且 Netflix
后面如果有机会,也会尝试提供关于client端相关的内容,不过前端同学可以先看一下这里:howtographql[1],这里有各种最佳实践,应该总会找到和你正在使用相关的前端框架的整合方案,好像有个对应的中文版...graphql-tools库提供了schema的解析和校验的独立包。这两个库前者是来自于Facebook,后者源于Apollo。...顺便说一句,graphqlHTTP内部就是调用它来工作的。 另一种Apollo公司比较推荐的测试手段是使用来自graphql-tools中的mockServer来测试。...尤其是对一些大项目,这会导致根本无法维护。就像resolver那样,我也会把schema拆分到多个独立的文件中。...注意,文件最后导出的是一个数组而非字符串。后面你就会知道是为啥了。 现在,在User schema声明文件中,我们如何添加字段到已经存在的query类型中?
我们知道 REST 是一种从服务 器公开数据的流行方式。当 REST 的概念被提及出来时,客户端应用程序对数据的需求相 对简单,而开发的速度并没有达到今天的水平。...然而 REST api 表 现得过于僵化,无法跟上访问它们的客户的快速变化的需求 RESTful API 不足 扩展性(多个终端需要返回不同的字段),单个 RESTful 接口返回数据越来越 臃肿。...尤其是在业务多变的场景中,很难在保证工程质量的同时快速满足业务需求 GraphQL 的优点 吸收了 RESTful API 的特性 所见即所得 各种不同的前端框架和平台可以指定自己需要的字段。...,通常用以重新获取对象或者作为缓存中的键。...将它与vue-apollo和graphql一起安装: npm install vue-apollo graphql apollo-boost --save 在src/main.js中引入apollo-boost
GraphQL 和 OpenAPI 都定义了数据消费者和提供者之间的协议,但它们在功能和合同规范方面存在重大差异。无论您使用哪种,都必须有意识地进行操作,了解您的用例并为最佳结果进行设计。...GraphQL 的查询语言没有包含其他标准,如 HTTP 或 REST。它对客户端和服务器如何通信请求和结果是不可知的。...服务器处理遍历关系并将请求作为单个结果返回。定义关系的可重用性是GraphQL 提供可组合性的一种方式——GraphQL 的超能力。...因此,客户端处理数据组合,这通常会导致过度获取数据以及前端和后端系统之间多次调用以拼接单个逻辑请求。 不必要的数据移动会产生成本,包括数据治理的成本。...建立内部标准和实践以维护与底层数据的关联、生成审计证据、管理细粒度访问控制并在多个客户端协议间支持一致的体验,需要在分布式数据传输环境中进行技术领导、架构和设计,而这很难做到。
GraphQL是由Facebook开发的一种数据查询和操作语言,用于API,并作为运行时用于执行这些查询的服务器端软件的一种方式。它提供了一种更高效、强大和灵活的替代REST的方法。...主要功能包括声明式数据获取:使用 GraphQL,客户端可以在查询中精确指定所需的数据,包括字段和关系。这消除了传统 REST API 经常出现的数据过度获取和获取不足的问题。...高效的类型系统: GraphQL 拥有强大的类型系统,可以在 API 中定义数据的结构和关系。高效的数据加载功能: GraphQL 使客户端能够在单个请求中检索多个资源。...Node.js安装部署指南第2步:初始化Apollo服务器Apollo Server是一个开源的、与GraphQL规范兼容的服务器,它简化了GraphQL API的构建。...模式GraphQL模式是你的数据和操作(查询和变更)的类型系统的描述。
Query; 这种组合,是官方提供的最佳实践。...但它并不是一个实践意义上的最低配置。 GraphQL Type System 是一个静态的类型系统。我们可以称之为静态类型 GraphQL。此外,社区还有一种动态类型的 GraphQL 实践。...这不仅仅是一个所谓的最佳实践,这也是 Graph 本身的特征。对象节点里,可能通过循环或者递归关系,拓展出无限大的数据结构。...七、我们的 GraphQL-BFF 实践模式 在掌握上述关于 GraphQL 的纲领知识后,我们来看一下在实践中 ,GraphQL-BFF 的一种实际做法。...然而,在实践中,实现 GraphQL Mocking 还是有不少的挑战。 ?
传统API(REST)REST(Representational State Transfer)是一种软件架构风格,广泛应用于网络服务。...GraphQLGraphQL是一种由Facebook开发的查询语言,用于API的数据查询和操作。与REST不同,GraphQL允许客户端明确指定需要的数据,服务器根据查询返回响应。...详细对比数据获取方式REST:每个URL代表一个资源,客户端请求一个资源时,服务器返回整个资源对象。GraphQL:客户端可以定义查询,精确获取所需字段,避免冗余数据传输。...性能REST:可能需要多次请求才能获取嵌套资源,增加了网络开销。GraphQL:可以在一次请求中获取所有相关数据,但复杂查询可能增加服务器负担。...GraphQL:提供了强类型系统和丰富的开发工具(如GraphiQL、Apollo),但需要更多的学习和理解。
基于 Apollo Server 2.0,带有 JWT 安全性、数据加载器(data loader)和 REST 数据源示例 通过 graphql-import 支持 GraphQL SDL 开发期间...客户端 API 当我们构建基于 GraphQL 的服务器时,可能需要从其他下游基于 GraphQL 的 API 服务器获取数据。...验证中间件代码可以在这里查看 JWT Security GraphQL 基于 JWT 的安全性的演示实现已启用一个查询“示例”。下面是测试的步骤。...该角色是可选的。...Compression 默认情况下,压缩是在服务器上启用的,并且基于压缩模块 配置详细信息位于 compression.ts 文件中 如果需要在不压缩的情况下获取响应,请在请求头中传递 x-no-compression
领取专属 10元无门槛券
手把手带您无忧上云