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

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

表达非类型 在开发 GraphQL 服务时,有个非常容易疏忽地方,就是忘记给非类型标记 !,导致客户端查询结果在类型上处处可能为。 客户端判空成本高,对查询结果结构也更难预测。...由于非类型字段不能为,字段错误被传播到父字段中处理。如果父字段可能是null,那么它就会解析null,否则,如果它是一个非null类型,字段错误会进一步传播到它父字段。...我们用如下查询语句查询 GraphQL 服务: 当 Grandchild  value 结果 1 时,查询结果如下: 我们得到了符合 GraphQL 类型结果,所有数据都有值。...当 Grandchild  value 结果 null 时,查询结果如下: 通过值冒泡,Grandchild 值,被冒泡到 parent 节点,令 parent 结果。...这种串行调用从客户端移到服务端做法可以有效降低端到端次数,是 BFF 层常见优化手段。但是如果我们有多个节点一起查询时,可能会出现同一个接口被调用多次问题。

2.5K20

为什么GraphQL是API未来

在本系列教程中,我们研究 GraphQL,了解它是什么,并学习使这种查询语言如此直观和易用原因是什么。 先让我们研究一下 REST 存在问题,以及 GraphQL 如何解决它们。...除非我们再去创建一个特定端点,否则无法准确获取所需数据。...例如,如果我们只需要在 REST API 中获取用户 firstName,lastName 和 age,就无法在不获取整个对象情况下得到这些数据。 ? 信息欠缺也存在问题。...当你开发网站或应用时,“单端点” API 会给你很大帮助。它使 API 更加能够自我描述,并且无需它编写大量文档。 如果你并不是把 JavaScript 作为主要语言,那也不是问题。...在本系列下一篇教程中,我深入研究 GraphQL,展示 GraphQL 如何类型一起工作,并创建我们第一个查询和修改。 所以请继续关注并希望在下一个教程中见到你!

1.6K30
您找到你想要的搜索结果了吗?
是的
没有找到

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

React.js 结合使用时,这个强大 JavaScript 库创建动态、响应式 Web 应用程序打开了无限可能性。...在本指南中,我们介绍如何 GraphQL 无缝集成到您 React.js 项目中。什么是 GraphQLGraphQL 是用于 API 查询语言,也是用于执行那些查询运行时。...它允许您仅请求所需数据,从而使 API 调用更加高效。传统 REST API 不同,传统 REST API 由服务器确定响应结构,而 GraphQL 使客户端能够定义其所需数据形状和结构。...如果还没有,请使用以下命令创建一个:npx create-react-app my-graphql-appcd my-graphql-appnpm start现在,让我们安装 GraphQL 所需软件包...您已经成功 GraphQL 集成到您 React.js 项目中。

32640

GraphQL 遇上图数据库,便有了更方便查询数据方式

如果 player 上有 age,name,country 这些属性,在查询参数中可以传入这三种属性任意组合,NebulaGraphQL 查询时会将这些参数进行“” AND 语义构造,再获取相关顶点...player 是根据 VertexID 查询并返回一个 player,player 后面没有 ! 标识符,说明可能查询结果。...每一个 GraphQL 查询会有一个绑定 DataFetcher 对象,该对象中实现就是如何 GraphQL 语法映射成 nGQL 语句,并执行插叙返回结果。...而返回结果会映射到自定义对象上,这里使用了我另一个小工具NebulaResultBoot 执行结果映射到自定对象上后,我们就可以在未来实现应用层缓存,当然这里也有一个潜在问题:每一次查询都要求获取到每一个点边所有属性...当然如果只是使用图数据库的话,那使用 NebulaGraphQL 至少也能方便做一些简单数据查询测试。

38810

GraphQL 基础实践

如果单单所有资源整合到一个 API 之中,还有可能会因为整合了无关数据而导致数据量增加。...把我们所需要字段合在一起,我们把它称之为某某选择集。上面的 name、desc、ratings 合在一起称之为 movie 选择集,同理,movie 是 myQry 选择集。...如果感叹号跟在 field 后面,表示返回该 type 数据时,此字段一定不为。 通过上面的类型定义,可以看到 GraphQL类型系统起到了很重要角色。...需要注意是[Movie]! [Movie!]两种写法含义是不同:前者表示 movies字段始终返回不可为但Movie元素可以为。...缺点 增加了服务端实现复杂度:一些业务可能无法迁移使用 GraphQL,虽然可以使用中间件方式原业务请求进行代理,这无疑也增加复杂度和资源消耗 完整源代码可以在这里 (https://github.com

12.8K20

何为GraphQL

在此篇教程中你学到: GraphQL原理 它如何REST进行比较 如何设计数据模式 如何配置一个GraphQL服务器 如何实现查询和变动 和一些额外高级主题 ? GraphQL亮点在哪里?...在深入讨论GraphQL细节之前,让我们将其REST进行比较,谁是目前最流行web API。 REST遵循一个以资源导向模型。...当无法获取足够信息时,如果你拿到100个id,你需要去执行100个独立API调用去获取每个队员信息。 当获取过多信息时,你浪费了许多后台处理时间和用来准备和传输很多不需要数据网络带宽。...在allPlayers查询情况下,它可以返回一个列表,但不能为值。 此外,这意味着列表中球员也不能为值(因为它也有一个感叹号)。 ? 设置GraphQL服务器 ?...GraphQL变动 ? 魔术师约翰逊肯定是赛场上魔术师。 但是如果没有他朋友卡里姆·阿卜杜勒·贾巴尔,他是无法成功。 让我们卡里姆添加到我们数据库。

3.5K60

如何优雅地扩展GraphQL系统能力

在真实业务场景中,除了获取基础数据外,往往还会有一些对数据进行加工转换和编排控制需求,例如对数值字段取精或者转换成展示文案、对列表字段进行排序过滤去重、根据条件判断是否请求查询某些字段、一个字段解析结果作为另外一个字段入参等...原生 GraphQL 查询获取基础数据提供了便捷,但是计算能力不足导致其结果经常不能满足业务需求,数据往往需要加工转换、甚至经过多次编排查询,才能展示给用户。...该指令可使用位置有查询字段、命名片段和内联片段,使用时指令放置在要生效元素后即可,示例如下: query myQuery($someTest: Boolean!)...例如 App 渲染数据时,低于指定版本客户端不用请求某些字段,该条件判断无法通过请求变量只有客户端版本号原生查询实现。...,包括加工、过滤、使用其他字段获取结果进行替换; 数据编排:指定字段获取结果作为全局可获取上下文,其他字段或参数加工转换提供可依赖数据; 控制流:@skip和@include拓展版本,通过表达式判断是否请求注解字段或片断

1.2K20

GraphQL 从入门到实践

,边用边学印象深刻~ 如果希望 GraphQL 应用到前后端分离生产环境,请期待后续文章。...Query 开始查找,找到对象类型(Object Type)时使用它解析函数 Resolver 来获取内容,如果返回是对象类型继续使用解析函数获取内容,如果返回是标量类型(Scalar Type...age: Int } 这个 User 对象类型有两个字段,name 字段是一个 String 标量,age 字段一个 Int 标量。...} } Hello world 总是如此愉快,下面我们来进行稍微复杂一点查询 查询入口 users 查找所有用户列表,返回一个不可但长度可以为 0 数组,数组中如果有元素,必须 User 类型...;另一个查询入口 user 接受一个字符串,查找 ID 这个字符串用户,并返回一个 User 类型字段 # src/schema.graphql # Query 入口 type Query

2.5K31

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

这减少了服务器和客户端之间发送数据量,甚至比 GraphQL 更少,因为你没有发送查询负载,如果响应仍然有效,服务器发回一个 304 响应(未修改)。...GraphQL 已经持久化了查询,但是这种实现会带来额外开销。如果你没有使用像 Relay 这样客户端(它默认会持久化查询),必须自己完成,或者使用一些第三方库来实现。...使用 Next.JS BFF 方法相比,在前端获得相同结果会更复杂。如何使用 GraphQL 实现 Etags?如果没有任何变化,如何使 GraphQL 服务器返回 304 状态码?...GraphQL 服务器可以自由地使用它期望任何类型进行响应。如果你发送一个查询服务器响应可以不符合自省响应中 GraphQL 模式。以 Apollo Federation 例。...在这方面, REST 相比,GraphQL 并没有真正带来任何好处。 RPC 一起,它在这个领域将会有一个很好未来。另一方面,GraphQL 非常适合封装基于资源和 RPC API。

2K10

防止你GraphQL API被恶意查询

虽然在其他应用层有一些缓解措施使在开始发送查询变得困难(如CORS),但它们无法完全防止发生。 大小限制 我们考虑第一种天真的方法是通过原始字节来限制传入查询大小。 ...如果我们只通过查询白名单,已经严重限制了他们选择,并且破坏了拥有GraphQL API重要性。 那些限制是我们无法使用,所以我们得重新设计。...深度限制 上述恶意查询一个有害方面是嵌套,按其深度分类,这使得查询成倍增加。 每层都会给后端增加更多工作,当列表结合使用时,增加更快。...(尽管DataLoader可能会缓解数据库压力,但网络和处理压力不会) 我们没有第一个参数类型设置Int(允许任意数量),而是使用graphql-input-number创建了一个自定义标量,该标量最大值限制为...然后,我们查看了我们客户所有查询,找出最耗时一个,其中有500点复杂度。 为了给我们一点未来余地,我们最大复杂度设置750。

1.8K10

安息吧 REST API,GraphQL 长存

我们需要获取单个人物信息,并且假定我们知道该人物 ID, RESTful API 会将该信息暴露: GET - /people/{id} 这个请求返回给我们该人物姓名,出身年份和其他有关信息...例如,如果 API 服务器实现了资源嵌套,并且表明了人物电影之间关系,我们可以通过以下方式读取电影数据: GET - /people/{id}/films 然而,一个纯粹 RESTful API...现在, GraphQL 查询与我们数据定义声明式 React UI 进行比较。GraphQL 查询所有内容都在 UI 中被用到,UI 中所有内容都会显示在 GraphQL 查询中。...如果我们反转这个模式,它同样有效。如果我们有一个 GraphQL 查询,我们明确知道如何在 UI 中使用它响应,因为查询响应具有相同“结构”。...多个 GraphQL 查询结果很容易重叠,而这种基础缓存方式无法解决重叠问题。 对于这个问题有一个很巧妙解决方案,那就是使用图查询表示图缓存。

2.7K30

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

客户端 我们把客户端调用时发送数据称为 Query Document(查询文档),是段结构化字符串,形如: # 客户端发送 query { contractedAuthor: { name...在执行字段 Resolver 之后会得字段值,如果类型对象,则会继续执行其下层字段 Resolver,如 contractedAuthor() 后得到值类型 Author,会继续执行 name...apollo:提供了开箱即用完整 Node.js 服务;提供了拼接 Schema(本地、远端)方法,使 GraphQL 服务拆分成为可能;提供了客户端可用数据获取管理工具。...调用合并:经常提到 RESTful 相比较优一点是,当需要获取多个关联数据时,RESTful 接口往往需要多次调用(并发或串行),而基于 GraphQL 接口调用则可以调用顺序体现在结构化查询中...调用合并:GraphQL 理念就是多个查询合并,对应服务端,通常只会提供一个合并后“大”接口,那么原本以 URL 粒度性能监控、请求追踪就会有问题,可能需要改为以 root field(根字段

2.3K20

Spring认证_什么是Spring GraphQL

Spring Data MongoDB 支持此变体。 Spring GraphQL 存储库中webmvc-http示例使用 Querydsl 来获取artifactRepositories....对于请求中每个可用属性,请求参数默认绑定为“等于”。 QuerydslDataFetcher支持 接口和 DTO 投影 以在返回查询结果以进行进一步 GraphQL 处理之前转换查询结果。...自动注册 QuerydslDataFetcher公开 aGraphQLTypeVisitor查找返回类型一个或多个 Querydsl 存储库域类型匹配顶级查询,并DataFetcher每个匹配查询注册...这包括返回单个值查询和返回值列表查询。 存储库必须用@GraphQlRepository. 默认情况下,查询返回 GraphQL 类型名称必须存储库域类型简单名称匹配。...由于上下文传播旨在使安全性和其他上下文在数据获取级别可用,因此这应该起作用。 Spring GraphQL 存储库包含 Spring MVC和 WebFlux 示例。

1.7K40

实践微服务,第14部分:GraphQL

也许最独特特点是GraphQL允许客户端定义如何构造请求数据,而不是让服务器决定。这意味着客户端可以准确地获取所需数据,从而缓解这个经典问题,手头用例获取数据太多或太少。...3.2模式放在一起 为了让客户能够获取账户对象,我们需要创建一个由SchemaConfig组成模式,其中包含一个指定可查询字段RootQuery。...4.解析器实现和测试 那么,现在我们已经模式放在一起了,我们如何底层数据模型绑定到在“解析器”参数中声明解析函数?...error) 签名使我们可以轻松地单元测试和实际实现提供不同实现。...例如,如果我们想要一个仅包含“name”和eventsAccount对象,查询将是这样: query FetchSingleAccount { // Query and an arbitrary

2.5K40

GraphQL-Calculator 开源:基于指令和表达式实现查询动态计算

而通过硬编码方式对数据进行加工处理无法满足应用快速开发需求,也 GraphQL 配置化思想相悖。...为何使用指令 如果 GraphQL 仅作为僵硬取数工具,就违背了 GraphQL 配置化初衷,也忽略了 GraphQL 扩展能力。...如果仅仅是用 GraphQL 来僵硬地获取数据,做法: 通过第一次查询queryItemInfo获取商品基本信息; 解析queryItemInfo查询结果获取商品列表中卖家 id 列表; 使用第...,如果依赖逻辑合理,任何字段获取结果都应当可以作为请求其他字段参数。...:表达式依赖 source,sourceName 如果和父节点绑定 DataFetcher 获取结果 key 相同,计算表达式时会覆父节点中数据。

1.1K20

GraphQL 初体验,Node.js 构建 GraphQL API 指南

但是,任何框架或语言一样,GraphQL 也需要权衡取舍。在本文中,我们探讨使用 GraphQL 作为 API 查询语言利弊,以及如何开始构建实现。...如果你不确定应用程序需求以及将来如何存储数据, GraphQL 在这里也很有用。要修改查询,你只需要添加所需字段名称,这极大简化了随着时间推移而发展你应用程序过程。...我们目的是围绕着解析器如何模式一起操作来巩固概念,所以我们不会围绕着如何设置数据存储来做太详细介绍。...在左侧窗格中,你可以输入所需要任何有效 GraphQL 查询,而在右侧获得结果。...简而言之,它是识别给定用户是否有权查看某些数据过程。我们可以想象一下这样场景:经过认证用户可以执行查询获取自己地址信息,但应该无法获取其他用户地址。

8.3K40

GraphQL安全学习之旅

看到QL这样字眼,很容易产生误解,以为是新数据库查询语言,但其实GraphQL和数据库没有什么太大关系,GraphQL并不直接操作查询数据库,可以理解传统后端代码数据库之间又多加了一层,这一层就是...但如果我要在浏览器实现只查询id=2用户信息是做不到,因为后端python代码里没有写,也就是说,只有代码里写了接口,定义了相应schema,才能通过GraphQL查询出对应结果,所以并不是通过GraphQL...就能查询获取数据库所有数据。...发现ddos漏洞在黑盒层面无法判断是否和GraphqQL有直接关系,漏洞很简单,在graphqlquery请求当中,有一个limit参数,当我参数调成一个超大数字时,网站就卡死宕机了,无法判断后端哪一层崩溃了...[image.png] 工具效果如下: [image.png] 在实际使用过程中,常常需要修改脚本,修改post参数名称以及返回结果参数名,使实际请求结果相对应,若有登陆态校验,则还需要添加cookie

1.9K60

基于 actix、async-graphql、rbatis 构建异步 Rust GraphQL 服务(2)- 查询服务

构建 GraphQL Schema 首先,让我们 GraphQL 服务相关代码都放到一个模块中。为了避免下文啰嗦,我称其为 GraphQL 总线。 cd ....目前,我们首先要进行 actix-web 和 async-graphql 集成验证,所以仅有求和作为查询服务,变更和订阅服务都是。...在左侧输入: query { add(a: 110, b: 11) } 右侧返回结果: { "data": { "add": 121 } } 基础 GraphQL 查询服务成功...调用; services:负责执行具体查询服务,从 MySql 数据表获取数据,并封装到 model 中; 基于上述思路,我们想要开发一个查询所有用户 GraphQL 服务,需要增加 users 模块...,如我查询结果: { "data": { "allUsers": [ { "email": "ok@budshome.com", "id":

2.3K20

如何在纯 JavaScript 中使用 GraphQL

例如,如果查询需要一个变量 id(将在查询中显示 $id),则需要按以下方式发送变量: { "id":1 } operationName 也是可选。...当查询包含多个命名操作查询时,它用于指定要运行操作。 如果一个 GraphQL 作为一个 GET 请求发送,则需要将以上内容作为查询参数传递。...其次,更重要是我无法访问环境变量。需要强调是,如果 API 需要传递某种 API 密钥或凭据,那么你不会希望在客户端执行这一操作,因为你凭据将被公开。...更好解决方案是调用一个可访问这些凭据无服务器函数,然后为你调用 API 并返回结果如果无服务器函数是用 JavaScript 编写前面示例中 Node 代码就会起作用。...然后它会获取结果并将其显示在浏览器中。尽管这对 GraphQL 调用来说并不重要,但我使用 js-beautify 正确格式化了要显示 JSON 结果,然后使用 Prism 给它上了色。

3.5K10
领券