开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

我应该如何使用Apollo Client和Link Rest在GraphQL中查询和匹配同一响应中的数据？

Apollo Client是一个强大的GraphQL客户端，它可以与各种后端服务进行交互。Link Rest是Apollo Client的一个插件，它允许我们在GraphQL查询中使用RESTful风格的接口。

要在GraphQL中查询和匹配同一响应中的数据，我们可以按照以下步骤进行操作：

安装和配置Apollo Client：首先，我们需要安装Apollo Client并进行配置。可以使用npm或yarn来安装所需的包。然后，创建一个Apollo Client实例，并将其与GraphQL服务器进行连接。
创建GraphQL查询：使用GraphQL查询语言编写查询，指定所需的数据字段和参数。可以使用Apollo Client提供的工具来帮助构建查询。
使用Link Rest插件：将Link Rest插件添加到Apollo Client的链接链中。Link Rest允许我们在GraphQL查询中使用RESTful接口。我们可以通过定义RESTful资源的URL和参数来配置Link Rest。
发送GraphQL查询：使用Apollo Client发送GraphQL查询。Apollo Client将自动处理查询的发送和响应的接收。
处理响应数据：在响应返回后，Apollo Client将自动将数据与查询进行匹配。我们可以使用Apollo Client提供的工具来访问和处理响应数据。

使用Apollo Client和Link Rest的优势包括：

简化数据获取：Apollo Client提供了一种统一的方式来获取和管理数据，无论数据来自GraphQL还是RESTful接口。
灵活性：Link Rest插件允许我们在GraphQL查询中使用RESTful接口，这使得与现有的RESTful服务集成变得更加容易。
性能优化：Apollo Client使用缓存来减少不必要的网络请求，并提供了一些性能优化的工具和策略。

Apollo Client和Link Rest在以下场景中特别适用：

与现有RESTful服务集成：如果我们已经有一个RESTful服务，并且想要在GraphQL中使用它，Link Rest可以帮助我们轻松地实现这一目标。
数据获取和管理：无论数据来自GraphQL还是RESTful接口，Apollo Client提供了一种统一的方式来获取和管理数据。
性能优化：Apollo Client的缓存和性能优化工具可以帮助我们提高应用程序的性能。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
云原生应用引擎TKE：https://cloud.tencent.com/product/tke
人工智能平台AI Lab：https://cloud.tencent.com/product/ai
物联网平台IoT Hub：https://cloud.tencent.com/product/iothub
移动开发平台MTP：https://cloud.tencent.com/product/mtp
云存储COS：https://cloud.tencent.com/product/cos
区块链服务BCS：https://cloud.tencent.com/product/bcs
元宇宙服务：https://cloud.tencent.com/product/metaspace

相关搜索:在Apollo Client中，如何使用useLazyQuery检查来自不同组件的同一查询的加载状态？在我的chai REST-API测试中，我应该使用什么格式的有效负载和报头？如何使用单个getconnection在scala jdbc中查询postgres和oracle中的数据？如何使用Swift和Firebase在我的数据库中搜索特定项目？在Postgres中，我如何计算同一查询中的位置和计数，然后对结果进行数学运算？有没有办法使用实体框架核心在同一查询的输出中更新数据和选择更新的in？如何使用@RestController和HttpEntity<class>作为输入参数在Rest服务中映射请求包含的文件和数据如何在python中正确使用LIKE和'%%‘来搜索数据库列表中存储在占位符变量中的部分响应？使用直接查询，我希望在MS Power BI的表视觉中显示过去三天和今天同一时间的连续数据如何使用Java和spring/hibernate在我的数据库中正确地插入日期(在我的数据库中获取错误的时间)？我在MarkLogic中安装了一个REST扩展来查询视图。我如何设计这个GET请求，以便它可以采用像>和<这样的标准来表示日期？如果数据库查询在Spring boot webapp REST API控制器中返回空对象，如何以未经授权的用户身份发送401和404？仅使用特定c_id检索发送者数据的Sql查询，其中发送者和接收者的数据在同一个表中。ckeditor textarea在浏览器中输出为html标签。我使用的是laravel 5.2和mysql数据库。如何解决此问题？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

怎样使用 apollo-link-state 管理本地数据

在 Apollo Client 1.0 时期，这是一个可行的方案。但当 Apollo Client 进入 2.0 版本，不再依赖于 Redux，如何去同步本地和远端的数据，变得比原来更加棘手。...Apollo Link 使得在 Apollo Client 中管理本地的数据成为可能，从一个 GraphQL 服务器中获取数据，可以使用 HttpLink，而从 Apollo 的缓存中请求数据，则需要使用一个新的...Resolvers 在使用 Apollo Client 管理应用状态后，Apollo cache 成为了应用的单一数据源，包括了本地和远端的数据。那么我们应当如何查询和更新缓存中的数据呢？...在下面的例子中，我们在同一条 query 内查询了 GraphQL 服务器中存储的 user 数据以及 Apollo cache 中的 visibilityFilter 数据。 ....以上代码使用 @client 指令查询 Apollo cache。在我们最新的文档页中，可以找到更多的例子，以及一些将 apollo-link-state 集成在应用中的小贴士。

2.4K10 0

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

作者 | Khalil Stemmler 策划 | 田晓旭在服务器上使用 GraphQL 代替 REST 是有很多好处的，使用 Apollo Client 取代自己编写的数据获取逻辑也有很多优势。...Apollo-link-state（现已直接放入 Apollo Client 2 和 3 中）让开发人员可以编写几乎同时解决远程状态和本地状态的查询。远程状态（位于服务器上）感觉比之前近多了。...locally } } }`; 在主要用于获取远程资源的查询中，我们可以使用 @client 指令来引用要基于一个客户端模式从本地缓存中获取的属性。...我们可以在同一请求中完成这一操作，这很厉害。想想之前在 Redux 环境我们要执行的 spread 和 Object.assign() 操作的数量有多少，就可以对比出差异了。...由于具备执行自省查询的能力，所以 GraphQL Playground 的 GraphQL 资源管理器可以显示 GraphQL 端点的所有功能在 REST 领域中，我只看到了使用 Swagger 构建的

2.2K2 0

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

在本指南中，我们将介绍如何将 GraphQL 无缝集成到您的 React.js 项目中。什么是 GraphQL？GraphQL 是用于 API 的查询语言，也是用于执行那些查询的运行时。...它允许您仅请求所需的数据，从而使 API 调用更加高效。与传统的 REST API 不同，传统的 REST API 由服务器确定响应结构，而 GraphQL 则使客户端能够定义其所需数据的形状和结构。...：npm install graphql @apollo/client@apollo/client 软件包是 Apollo Client，这是一个强大的库，用于在 React 应用程序中管理状态并进行...: new InMemoryCache(),});export default client;在 React 组件中使用 GraphQL 获取数据现在，让我们使用 GraphQL 在 React 组件中获取数据...我们使用 @apollo/client 中的 useQuery 钩子执行 GET_POSTS 查询。

4584 0

GraphQL项目中前端如何预生成Persisted Query

已经有很多合适的前/后端框架来使用, 我这里说一个前端框架 GitHub - apollographql/apollo-link-persisted-queries: Persisted Query...support with Apollo Link 它里面已经有介绍如何使用, 以及工作原理了: How it works When the client makes a query, it will optimistically...This library is a client implementation for use with Apollo Client by using custom Apollo Link....预生成persisted query 刚刚我们介绍了, 如何在使用过程中生成. 但是如何预生成呢? 也就是, 在前端部署的过程中或者是在访问页面之前就已经生成好....简单来说, 还是为了更好的优化, 试想一下, 如果我已经可以将一个大量访问的schema的变动提前缓存起来, 并且准备好这份数据, 当前端访问的时候, 我直接将这份缓存好的数据扔给前端, 而不是再在后台重新查询拼接

1K2 0

如何在纯 JavaScript 中使用 GraphQL

由于 GraphQL 是通过单个端点运行的，因此端点响应的数据完全取决于你的查询。这个查询需要正确格式化 GraphQL。想知道如何构建查询吗？请查阅关于如何编写 GraphQL 查询的教程。...我们来看一个不使用特殊库的简单示例（请注意，我确实使用了 dotenv 来获取用于访问我 StepZen 后端的 API 密钥）。在这个示例中，我仅传递了一个 query，该查询在发送前需要字符串化。...不过在 API 完全开放的情况下，我们先来看一下它是如何完成的（请注意，我的示例确实有一个 API 密钥，但请按照我说的那样做，不要像在演示中那样对付一下……）。...JSON 响应，其中包含浏览器中显示的角色和剧集数据。...显然，一般来说你不会想要简单地向用户显示查询结果，因此让我们看一下如何使用返回的数据。使用 GraphQL 查询响应 GraphQL 的一大优点是，它的响应只是纯 JSON，因此数据使用起来很容易。

3.5K1 0

GraphQL是API的未来，但它并非银弹

这篇文章是一个很好的讨论基础，因为它代表了我在社区中经常听到的观点。如果你读了整篇文章，当然这会花一些时间，你就会完全理解，为什么我认为 Kyle 的文章应该改名为“为什么使用 Apollo”。...我很确定他了解部分响应。我猜他想说的是，部分响应需要有人实现。实际上，这与你在 GraphQL 中从一个资源里选择子字段非常类似。在 GraphQL 中，这是个开箱即用的特性。...GraphQL 服务器可以自由地使用它期望的任何类型进行响应。如果你发送一个查询，则服务器的响应可以不符合自省响应中的 GraphQL 模式。以 Apollo Federation 为例。...8 错误处理更好关于错误处理，作者描述了这样一个场景：与使用部分数据响应的单个 GraphQL 查询相比，客户端将不得不进行 3 次连续的 REST API 调用。...使用 GraphQL，解析部分数据的逻辑位于服务器中。客户端需要有额外的逻辑对部分响应做相应的处理。使用 REST，获取部分数据的逻辑位于客户端或 BFF 中。

2K1 0

你不知道的 GraphQL

其它逻辑应该拆分到对应的层，这样我们就能保持GraphQL非侵入业务。你可以在Apollo官网找到关于resolvers的完整文档[14]。处理数据依赖关系接下来，最有意思的部分要开始了。...但这种在响应中显示错误信息的简单处理，并没有在服务端记录错误日志。...日志除了数据和错误外，graphQL的响应中还可以包含extensions类信息，你可以在其中放你想要的任何数据。我们用它来显示服务的耗时信息再好不过了。...把resolver定位为一个纯函数，是GraphQL设计者们的另一个明智之举。查询引擎的集成化测试那么，如何来测试数据依赖，类型和聚合逻辑呢？...在我学习的过程中我看过大量的过时的教程，因为这门技术在不停的发展和进化。我希望这篇教程不会那么快就过时！

3.3K2 0

GraphQL

版本控制难的一个因素是通常很难知道什么信息在被哪些应用和设备使用添加信息一般很容易，无论是REST还是GraphQL，添加字段的话，会流入REST客户端，而会被GraphQL安全忽略，除非改变查询。...然而，删除和编辑信息就大有不同了在REST方式中，很难知道字段级的哪些信息被使用了。我们能知道一个接口/movies被用了，但不知道客户端在用titl，image，还是2个都用了。...GraphQL也能配合流行的前端框架和工具使用，比如React和Redux。...如果考虑用React构建应用的话，强烈推荐看看Relay或者Apollo client 总结 GraphQL提供了一些自用的强大工具集，用来构建高效的数据驱动应用。...，和维护n个接口且存在同一接口不同版本的情况，几乎不用思考如何选择至于前端生态配合（Redux毕竟不那么通用），明显不算是大问题

1.5K4 0

你还在用 REST API 吗？

除此之外，它还允许我们将不同的实体组合到单个查询中。 GraphQL 的优势检索精确的数据，无任何多余数据。在 GraphQL 中，可以得到我们所请求的内容，这是一个很大的优势。...例如，在第一个请求中，我们只需要名称，但是当我们使用这种方法时，我们将会获取该用户相关的所有详细信息。此时就是 GraphQL 显示其强大功能的时候了。我们需要指定查询，然后才能获得所需的输出。...在 GraphQL 中，我们得到的就是我们所要求的。对象定义（JSON 响应）在 REST 中，我们可以在后端定义对象，而在 GraphQL 中，我们则要在前端定义该对象。...自动缓存 REST 能自动生效缓存，而 GraphQL 则没有自动缓存系统，但是可以借助 Apollo Client、Relay 等客户端实现缓存。...但是，当使用 Apollo Client、Relay 等客户端时，它也能很容易处理错误。结论与 REST 相比， GraphQL 当然更具优势，但它可能并不总是最佳实践。

1.5K1 0

REST API和GraphQL API的比较

同样，将数据提供给客户端的方式是 GraphQL 和 REST 分歧最大的地方。在 REST 设计中，客户端提交 HTTP 请求，数据作为 HTTP 响应返回。...在 GraphQL 架构中，客户端提交查询以获取数据。典型场景 REST API 假设您有一个 API 来获取学生数据。...使用 GraphQL，您可以向您的 API 发送请求并接收准确的响应，而无需进一步添加。因此，来自 GraphQL 查询的极其可预测的响应提供了良好的可用性。...但是，由于可用的工具，客户端缓存优于 REST。一些使用缓存层的客户端（Apollo Client，URQL）使用 GraphQL 的模式和类型系统，允许它们在客户端保留缓存。...GraphQL 中的任何合法答案都应该是 200，包括数据和错误响应。客户端工具将有助于更有效地管理错误。错误作为特定错误对象下的响应主体的一部分进行处理

4931 0

【译】Graphql, gRPC和端对端类型检验

只需要在我们的schema中增加查询（queries）和变更（mutations）字段，就可以在应用中使用(consuming)这些数据了。...使用apollo-client和react-apollo简化了前端代码对缓存和数据的管理。灵活的查询方式方便我们在未来构建移动端以及内部应用。...GraphQL schema的自检性让我们可以方便的查询系统中的全部可用数据。（如果你想更深入的学习GraphQL，我推荐你去看看官方指引）我们的GraphQL服务主要是干数据透传的活儿。...结果，静态类型很好的保证了服务端响应和数据转化逻辑能够匹配我们的schema。由于GraphQL schema本身就是一种类型集合，可以根据它很方便地生成TypeScript类型。...为了保证GraphQL server和前端之间的类型安全，我们使用Apollo CLI的代码生成器：使用命令行来生成我们所有GraphQL查询的类型： React示例在我们的应用中需要用到三种查询：

3.1K2 0

设计通过 POST 获取数据的 API 时需要注意的问题

"> 不支持其他方法，在传统网站中可能会用 POST 处里除了获取数据之外的所有事情。...规范与实现在 HTTP 规范中提到要如何正确使用方法，如果我们没有按照规范实现，会造成一定的影响。...查询语句即文件查询语句即响应的数据结构，不会有冗余的内容统一的对外入口可以多查询合并，一起返回这些特性有效的解决了 RESTful API 在复杂架构下的问题，使 GraphQL 充满弹性、非常好用...，社区也已经有了庞大的的生态系统支持，例如 Apollo GraphQL[6] 可以与三大框架深度整合，再加上多查询合并的特性，让 GraphQL 与现代框架中组件的概念完美契合。...值得注意的是 GraphQL 发出的全部都是 POST 请求，缓存机制必须仰赖开发者或是框架实现；例如在 Apollo Client 中，开发者必须按照应用场景，调整 fetchPolicy 的设置，避免快取造成的意外结果

1.6K3 0

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

前端设置（使用Apollo Client）接着，我们需要在前端应用中配置Apollo Client，与我们的GraphQL服务器通信：npm install apollo-boost @apollo/client...编写前端组件现在，我们在React组件中使用Apollo Client执行查询和变更：// App.jsimport React from 'react';import { gql, useQuery,...查询语言：查询、突变、订阅在GraphQL中，查询和突变是通过JSON-like结构表示的字符串。...这就是GraphQL查询、类型系统和层次结构在实际应用中的体现。...减少错误：客户端定义查询结构，服务器返回预期的形状，降低了由于接口不匹配导致的错误。更好的API设计：强类型系统确保了数据的一致性和正确性，使得API更加易于理解和维护。

981 0

在 redux 应用中使用 GraphQL

在 Redux 应用中获取和管理数据需要做许多工作。...您需要编写自定义代码来调用服务器接口，解释数据，对其进行规范化并将其插入到存储中 - 同时跟踪各种错误和加载状态。在本教程中，您将学习如何通过 Apollo Client 来获取和管理数据。...快速的启动一个服务端环境启动一个 redux 脚手架增加一个 GraphQL 客户端 (Apollo Client) 使用 GraphQL 获取数据获取更多的数据接下来要做的 1....客户端正在运行，现在是开始添加 GraphQL 客户端的时候了。我们的目标是使用 GraphQL 查询，从服务器轻松获取数据并将其呈现在着陆页（HomeView）中。 3....在我们的 GraphQL 服务器中，并没有定义如何获取 authors。

1.9K1 0

用ServBay快速构建下一代GraphQL应用

在本指南中，我们将深入探讨如何利用ServBay一站式环境和Docker，构建可扩展的GraphQL微服务。...GraphQL是由Facebook开发的一种数据查询和操作语言，用于API，并作为运行时用于执行这些查询的服务器端软件的一种方式。它提供了一种更高效、强大和灵活的替代REST的方法。...主要功能包括声明式数据获取：使用 GraphQL，客户端可以在查询中精确指定所需的数据，包括字段和关系。这消除了传统 REST API 经常出现的数据过度获取和获取不足的问题。...高效的类型系统： GraphQL 拥有强大的类型系统，可以在 API 中定义数据的结构和关系。高效的数据加载功能： GraphQL 使客户端能够在单个请求中检索多个资源。...模式GraphQL模式是你的数据和操作（查询和变更）的类型系统的描述。

1790 0

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

Client Apollo-Client，来自ApolloGraphQL的作品，只有React版本是官方团队在维护，Vue版本的被挪到Vue团队了(VueUI有一部分就是基于Apollo-Client-Vue...，可以把整个GraphQL Server以中间件的形式挂载到一个Node应用上（我就是使用这种方式来同时提供REST和GraphQL两套API的，但需要注意某些中间件的配置需要ignore掉挂载的路径）...在TS中这个工具的主要能力就是生成TS的类型定义，同时它的插件体系还提供了更多的额外能力，如Apollo-Client的插件，让你可以直接使用封装好的的useXXXQuery等，前端连查询语句都不用写了...但我只是比较简单的使用过，用于和TypeGraphQL一起实现自定义指令，详见这里 Engine GraphQL Engine其实是一个非常神奇的方向，有点像REST那边的各种自动生成REST API...JSON-Server，写demo神器，从JSON文件快速得到一个REST API，和Husky、LowDB同一个作者。

2.9K1 0

为什么我使用 GraphQL 而放弃 REST API？

最近，我有机会为自己的项目和客户开发和运行一些使用 GraphQL API 构建的移动和 Web 应用程序。这真是一个很好的体验，尤其要感谢令人惊叹的 PostGraphile 和 Apollo。...你需要同时在服务器和客户端上实现每个端点还有大量的库可以在 ORM 或直接数据库自省的帮助下自动生成 REST 端点。即使使用了这样的库，它们通常也不是很灵活或可扩展的。...如果使用一些现成的 GraphQL->数据库查询翻译库，你甚至不需要在服务器上编写大多数数据库查询。...有很多流行的开源项目都在使用 GraphQL：这个博客是基于静态站点生成器 Gatsby，它将 GraphQL 查询的结果转换成数据，然后呈现到 HTML 文件中。...你可以将所有常见的 CRUD 操作暴露为所有表的查询和修改。它可能看起来像 ORM，但它不是：你可以完全控制如何设计数据库模式，以及使用什么索引。

2.3K3 0

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

这个方法，可以把整个GraphQL Server以中间件的形式挂载到一个Node应用上（我就是使用这种方式来同时提供REST和GraphQL两套API的，但需要注意某些中间件的配置需要ignore掉挂载的路径...在TS中这个工具的主要能力就是生成TS的类型定义，同时它的插件体系还提供了更多的额外能力，如Apollo-Client的插件，让你可以直接使用封装好的的useXXXQuery等，前端连查询语句都不用写了...但我只是比较简单的使用过，用于和TypeGraphQL一起实现自定义指令，详见这里[52] Engine GraphQL Engine其实是一个非常神奇的方向，有点像REST那边的各种自动生成REST...，Apollo的useQuery接收的是GraphQL Document，BlitzJS中的则接收的是后端方法，其中会直接db.entity.create()这样去写数据库）。...JSON-Server[101]，写demo神器，从JSON文件快速得到一个REST API，和Husky、LowDB同一个作者。

4.2K1 0

用TS+GraphQL查询SpaceX火箭发射数据

apollo-boost 包含了查询 API 和在内存中缓存数据所需的工具， react-apollo 为React提供绑定， react-apollo-hooks 在 React Hook 中包装了...我们能够编写与使用它们的组件并存的查询，并且 UI 能够准确地请求它要呈现的内容。在使用 REST API 时，我们所能找的的文档有可能不是最新的。...我们将在列表中显示这些数据，当用户点击其中一个项目时，查询 launch 来获取该火箭的更多数据。让我们在 GraphQL playground 中测试第一个查询。 ?...在查询名的后面，你可以通过使用前缀为$及类型去指定变量，然后在查询体中，你可以使用该变量。对于我们的查询，通过传递 $id 变量来设置启动的id，该变量的类型为String!。 ?...在终端中执行： 1yarn codegen 在 src/generated/graphql.ts 中，你将会找到定义程序所需的所有类型，以及获取 GraphQL 端点以检索该数据的相应查询。

3K2 0

PayPal大规模采用GraphQL的探索和实践

当我们选择 GraphQL 时，我们正在寻找一种技术来帮助我们解决以下问题：过度获取的数据：我们的 REST（代表性状态传输）APIs 发送了客户端需要的部分响应和一些无关数据。...由于 REST API 中的服务器决定了数据的形状，我们的 UI 团队花费了大量时间在客户端过滤和解析数据，通常使用诸如 Redux 之类的库来格式化和存储数据。...与 API 集成时开发人员体验不一致：在 REST API 中，不同团队对同一变量有不同的约定，例如 user、username, 使得理解 API 变得更加困难。...更容易测试：Apollo Client 等 GraphQL 工具可以更容易地在 React 等 UI 中添加 GraphQL 查询。它有助于保持代码位于同一位置，并有助于调试和分离关注点。...非常感谢 Mark Stuart 在 PayPal 中领导 GraphQL 的采用，激励我分享我的 GraphQL 经验，并激励我们的开发者社区。

3.1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭