如何在Apollo解析器(Meteor/Apollo/Graphql)中返回聚合查询？_如何在Graphql Apollo查询中传递变量_如何在React + Apollo GraphQL中查询先验查询结果？ - 腾讯云开发者社区

它弥补了 RESTful API（字段冗余，扩展性差、无法聚合 api、无法定义数据类型、网络请求次数多）等不足注意：GraphQL 是 api 的查询语言，而不是数据库。...查询的返回结果就是输入的查询结构的精确映射客户端可以自定义 Api 聚合如果设计的数据结构是从属的，直接就能在查询语句中指定;即使数据结构是独立的，也可以在查询语句中指定上下文，只需要一次网络请求...聚合查询文章分类信息，分类信息的方式要放在article的schema里面，这样才能聚合查询到聚合查询结果查询订单，聚合查询订单关联的商品信息返回 // schema/default.js ...将它与vue-apollo和graphql一起安装： npm install vue-apollo graphql apollo-boost --save 在src/main.js中引入apollo-boost...:h=>h(App) }) 简单查询组件加载的时候就会去服务器请求数据，请求的数据会放在navList这个属性上面，在模板中可以直接使用当前属性简单查询文档带参数查询参考 import gql from'graphql-tag

5.1K4 2

Meteor 1.4正式发布 - 更新了 Node 和 MongoDB 版本以及更多

我们很高兴发布了Meteor 1.4，这个版本的主要更新包括了Node和MongoDB，以及更加灵活的基于社区的发布流程。...我们还引入了一个灵活的方式到Meteor核心扩展包发布流程中去。这使得如Blaze等核心包的社区维护者能更快发布更新，并独立于Meteor本身的发布日程。...运行meteor update命令来更新现有的app或者访问Meteor install page获得最新Meteor。...展望Meteor 1.5，我们构造Apollo已经取得重大进展，它是Meteor全新的基于GraphQL的数据栈。目前为止我们都在开发基础特性来使这项技术在Meteor生态或其外都得到使用。...现在是时候开发一个更紧凑的现有Meteor应用集成了。同其他一些激动人心的Meteor 1.5目标，我们准备使用Apollo和GraphQL来给Meteor带来SQL支持。

6122 0

您找到你想要的搜索结果了吗？

是的

没有找到

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

前端设置（使用Apollo Client）接着，我们需要在前端应用中配置Apollo Client，与我们的GraphQL服务器通信：npm install apollo-boost @apollo/client...查询语言：查询、突变、订阅在GraphQL中，查询和突变是通过JSON-like结构表示的字符串。...查询结构：字段和参数查询结构由字段和参数组成。在上面的查询示例中，user是字段，id和email是user字段的子字段。参数如id: 1用于定制查询。4....这就是GraphQL查询、类型系统和层次结构在实际应用中的体现。...复杂查询优化利用GraphQL的字段解析器和数据加载器进行性能优化。

611 0

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

GraphQL API 的配置工作包括：安装 GraphQL 公开一个服务器端点设计一个模式（schema）将解析器连接到数据源这是我们需要做的工作，但不是我们项目的工作重心。...Apollo-link-state（现已直接放入 Apollo Client 2 和 3 中）让开发人员可以编写几乎同时解决远程状态和本地状态的查询。远程状态（位于服务器上）感觉比之前近多了。...在 Apollo Server 端，这些 API 调用将控制权转交给负责使用 ORM、原始 SQL、缓存、其他 RESTfulAPI 或任何你想到的方法来获取数据的解析器。...对于突变，解析器可以简单地将控制权传递给一个应用层用例。将用例作为应用程序的重心后，从 REST 切换到 GraphQL（或同时支持两者）变得轻而易举。...在架构层面，由于 GraphQL 仅向客户端公开单个端点，因此它满足了这一原则。客户端隐藏了字段解析机制的所有复杂性，它只需关注如何在 GraphQL 服务器之上构建即可。

2.1K2 0

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

使用apollo-client和react-apollo简化了前端代码对缓存和数据的管理。灵活的查询方式方便我们在未来构建移动端以及内部应用。...GraphQL schema的自检性让我们可以方便的查询系统中的全部可用数据。（如果你想更深入的学习GraphQL，我推荐你去看看官方指引）我们的GraphQL服务主要是干数据透传的活儿。...我们所有的解析器（resolvers）都是遵循以下模式：从后端服务请求一些数据，可能会做轻量的数据转化工作，使得返回的数据复合我们的schema。在这些解析器中几乎木有业务逻辑。...为了保证GraphQL server和前端之间的类型安全，我们使用Apollo CLI的代码生成器：使用命令行来生成我们所有GraphQL查询的类型： React示例在我们的应用中需要用到三种查询：...{ deleteTodo(input: $input) { success } } 基于这些GraphQL查询和我们的服务端GraphQL schema，我们可以给这些查询生成typescript

3.1K2 0

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

操作模型：GraphQL 规范中对数据的操作做了定义，有三种，query（查询）、mutation（变更）、subscription（订阅）。...所以为了避免误解，后文将把 Query Document（查询文档）称为 Document 或文档。一个 Document 中可包含单个或多个操作，每个操作都可以查询补丁数量的跟字段。...query、mutation、subscription 字段是不会出现在返回结果中的，返回结果中的第一层字段是前文提到的 root field（根字段）。...当遇到问题在 apollo 生态中找一找一般都会有收获。...调试：由于我们调用 GraphQL 接口时（如：xxx/graphql/im）无法像 RESTful 接口那样（如：xxx/graphql/im/message、xxx/graphql/im/user）

2.3K2 0

GraphQL 基础实践

以及 Meteor 团队开发的 Apollo，同时开发了客户端和服务端，同时也支持流行的 Vue 和 React 框架。...想象这么一个页面，我要列出两个电影的信息做对比，为了发挥 GraphQL 的优势，我要同时查询这两部电影的信息，在请求体中请求 movie 数据。前面我们说到，请求体决定了返回数据的结构。...在本例中，定义了一个Basic接口，Song以及Video类型都要实现该接口的字段。然后在search查询中返回该接口。 searchMedia查询返回一组Basic接口。...Resolver 对应着 Schema 上的字段，当请求体查询某个字段时，对应的 Resolver 函数会被执行，由 Resolver 函数负责到数据库中取得数据并返回，最终将请求体中指定的字段返回。...，当 match 到时，此处理函数会被调用执行，我们的解析任务也在这里进行，并将解析结果返回； options：options 时传给中间件的参数，我们可以在此将我们的 Schema 等内容传给解析器使用

12.8K2 0

GraphQL入门之使用ApolloServer和express构建GraphQL服务

初始化项目 mkdir myapp cd myapp npm init (一路回车) 安装依赖包 npm install @apollo/server graphql express cors body-parser...，apollo，express 和 typescript 相关的依赖包。...= `#graphql type Query { hello: String } `; // 定义GraphQL的解析器 const resolvers = { Query: {...Server ready at http://localhost:4000`); }); }); 测试启动服务 npm run dev 访问 http://localhost:4000 进行测试，输入查询...query { hello } 执行查询结果 { "data": { "hello": "Hello World!"

1281 0

GraphQL入门之使用ApolloServer构建GraphQL服务

接上一篇文章，上一篇通过 express 作为 GraphQL Server 介绍了一下 GraphQL，今天说一下如何使用 Apollo Server 作为 GraphQL服务器。...创建 Node.js 的工程 mkdir myapp cd myapp npm init (一路回车) 安装依赖包 npm install @apollo/server graphql 定义 Schema...const typeDefs = ` type Query { hello: String } `; 定义解析器 const resolvers = { Query: {.../server'); const { startStandaloneServer } = require('@apollo/server/standalone'); // The GraphQL schema...Server 的 IDE 的界面，输入 query { hello } 可以看到下面的查询结果 { "data": { "hello": "Hello world!"

1151 0

你不知道的 GraphQL

，为每个查询块执行对应的resolver函数，并传递外层调用是的返回结果为第一个参数。...如何让我们的服务能支持复杂的聚合查询呢？...如你所见，我们很容易就做到从不同的数据源中聚合数据，客户端根本不知道数据来自于哪里 - 这一切都隐藏在resolver中。...把resolver定位为一个纯函数，是GraphQL设计者们的另一个明智之举。查询引擎的集成化测试那么，如何来测试数据依赖，类型和聚合逻辑呢？...注意：这篇教程中提到的大多数js库都源自Facebook或Apollo。那么，Apollo到底是哪位？它是来自于Meteor团队的一个项目。这些家伙为GraphQL贡献了很多的高质量代码。顶他们！

3.3K2 0

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

GraphQL是由Facebook开发的一种数据查询和操作语言，用于API，并作为运行时用于执行这些查询的服务器端软件的一种方式。它提供了一种更高效、强大和灵活的替代REST的方法。...主要功能包括声明式数据获取：使用 GraphQL，客户端可以在查询中精确指定所需的数据，包括字段和关系。这消除了传统 REST API 经常出现的数据过度获取和获取不足的问题。...模式GraphQL模式是你的数据和操作（查询和变更）的类型系统的描述。...lastName: String}第6步：为GraphQL API创建解析器解析器是一个函数，它负责为每个从客户端发来的GraphQL查询提供响应。...为此，只需导航到即可在浏览器中访问 Apollo Server API 沙箱http://localhost:/graphql。进入沙箱后，您可以发送请求并观察响应。

1340 0

koa2 + apollo-server-koa + mongoose 接口

koa2 + apollo-server-koa + mongoose 接口 yarn add koa koa-router koa-body apollo-server-koa@rc app.js...// app.js const { ApolloServer, gql } = require('apollo-server-koa'); const Koa = require('koa'); const...Crichton', }]; const typeDefs = gql` # 模型 type Book { title: String author: String } # 查询...type Query { books: [Book] } `; // 解析器（决定查询，突变）返回什么数据 const resolvers = { Query: {...ready at http://localhost:3010${server.graphqlPath}`); }); node app.js => open 'http://localhost:3010/graphql

3304 0

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

GraphQL ? GitHub 10k stars GraphQL是一种可以与任何后端服务相关联的查询语言和执行引擎。 GraphQL 随时间的流行度 ? GraphQL 最受喜欢的方面 ?...Apollo ? 功能齐全的GraphQL缓存客户端，适用于UI框架和GraphQL服务器。 Apollo 随时间的流行度 ? Apollo 最受喜欢的方面 ? Apollo 最不受欢迎的方面 ?...但整个领域很快就会受到GraphQL冲击波的影响。 GraphQL用户在两年内从5％上升到20％，他们选择的客户端似乎是Apollo。...Meteor ? GitHub 40k stars Meteor，JavaScript App平台 Meteor 随时间的流行度 ? Meteor 最受喜欢的方面 ?...Meteor 最不受欢迎的方面 ? 哪些工具与 Meteor 一起使用？ ? 使用 Meteor 的国家情况平均而言，4.6％的受访者使用过 Meteor ，并乐于再次使用它。

1.5K2 0

GraphQL 实践与服务搭建

有没有这样一个功能，将这些接口做一下聚合，然后将结果的集合返回给前端呢？...请求进行查询，其集中的 API 如 http://localhost:3000/graphql，所有的操作都通过这个接口来执行，这会在后面的操作中在展示到。...避免了返回结果中不必要的数据字段。...不仅需要在后端中配置 GraphQL 服务，用于接收 GraphQL 查询并验证和执行，此外前端通常需要 GraphQL 客户端，来方便使用 GraphQL 获取数据，目前实用比较多的是Apollo Graph...return 'hello world'; } } 在 graphql 中 resolver 叫解析器，与 service 类似（也需要在 @Module 中通过 providers 导入）。

5.2K1 0

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

cities 以前遇到这种需求, 后端至少得写3个API用来返回,当然前端也得写3个请求去接收, 要么就是直接返回所有数据, 让前端在每个页面都去调用拿到所有数据(在这里就是 country+province...但是这样带来了几个坏处: 我明明只需要部分数据, 你却给我返回了整个对象,不太合理如果整个对象过于庞大甚至你需要多个表查询拼一个对象给我, 那么我只取其中的一小部分而已, 性能开销浪费了我只需要部分信息...Automatic persisted queries - Apollo Server - Apollo GraphQL Docs 简单翻译一下就是, 一个短dash代替一个超长的graphql schema...预生成persisted query 刚刚我们介绍了, 如何在使用过程中生成. 但是如何预生成呢? 也就是, 在前端部署的过程中或者是在访问页面之前就已经生成好....这样的设想完成起来, 需要解决一个最主要的问题, 后端如何在前端没有访问的时候提前预知schema?

9872 0

在 redux 应用中使用 GraphQL

正如 Sashko Stubailo 指出的：不幸的是，在 Redux 应用程序中异步加载服务器数据的模式还没有建立起来，并且经常需要使用外部帮助程序库，如 redux-saga。...如果我们不想在响应中看到作者的姓氏和幸运饼干签语条，可以更新成以下查询： ? 可以看到，这正是我们想要的形式。现在，我们已经确认服务器运行正常，并返回正确的响应，接下来让我们开始构建客户端。 2....客户端正在运行，现在是开始添加 GraphQL 客户端的时候了。我们的目标是使用 GraphQL 查询，从服务器轻松获取数据并将其呈现在着陆页（HomeView）中。 3....这样我们就把一个 GraphQL 客户端添加进了一个普通的 Redux 应用中。接下来让我们开始第一个 GraphQL 查询吧。 4....我们只需要在客户端中写一条 GraphQL 查询语句！我们已经达成了目的。不过这个查询语句还是太简单了，如果我们想要显示所有的作者应该怎么做呢？ 5.

1.9K1 0

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

那么剩下的 20% 的本地数据（例如全局标志、设备 API 返回的结果等）应该怎样处理呢？过去，Apollo 的用户通常会使用一个单独的 Redux/Mobx store 来管理这部分本地的数据。...此外，GraphQL 有能力将对多个数据源的请求集成在单次查询中，在此我们将充分利用这个特性。 . 以上是 Apollo Client 的数据流架构图。...Apollo Link 使得在 Apollo Client 中管理本地的数据成为可能，从一个 GraphQL 服务器中获取数据，可以使用 HttpLink，而从 Apollo 的缓存中请求数据，则需要使用一个新的...在下面的例子中，我们在同一条 query 内查询了 GraphQL 服务器中存储的 user 数据以及 Apollo cache 中的 visibilityFilter 数据。 ....以上代码使用 @client 指令查询 Apollo cache。在我们最新的文档页中，可以找到更多的例子，以及一些将 apollo-link-state 集成在应用中的小贴士。

2.3K10 0

防止你的GraphQL API被恶意查询

在这篇文章中，他描述了他们是如何在攻击中保护GraphQL API。使用GraphQL，你可以随时查询想要的内容。这对于使用API来说是惊人的，但也具有复杂的安全隐患。 ...虽然在其他应用层有一些缓解措施使在开始发送查询变得困难（如CORS），但它们无法完全防止发生。大小限制我们考虑的第一种天真的方法是通过原始字节来限制传入查询的大小。 ...，但幸运的是，Apollo团队创建了persistgraphql，它会自动从你的客户端代码中提取所有查询，并生成一个不错的JSON文件。...我们使用graphql-cost-analysis进行分析，因为我们最快的解析器（20μs）和最慢的解析器（10s +）之间存在很大差异，所以我们需要从中获得控制。 ...我通过Apollo Engine公开的性能跟踪数据确定了某些解析器的复杂程度。我看了整个模式，并根据p99服务时间分配了一个值。

1.8K1 0

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

在本指南中，我们将介绍如何将 GraphQL 无缝集成到您的 React.js 项目中。什么是 GraphQL？GraphQL 是用于 API 的查询语言，也是用于执行那些查询的运行时。...：npm install graphql @apollo/client@apollo/client 软件包是 Apollo Client，这是一个强大的库，用于在 React 应用程序中管理状态并进行...我们使用 @apollo/client 中的 useQuery 钩子执行 GET_POSTS 查询。...查询。...这只是一个起点，随着您的应用程序的发展，您现在可以探索更高级的功能，如 mutations、subscriptions 和使用 Apollo Client 进行缓存。

3274 0

如何优雅的在Vue Project中使用vue-apollo

首先我们来熟悉下graphql的工作机制一个GraphQL查询可以包含一个或者多个操作（operation），类似于一个RESTful API。...： `query { client(id: 1) { id name } }` 那么问题来了，我们已经用熟了axios或者fetch 再或者ajax来进行数据的交互，如：...，使查询更加简便呢首先我们先在vue项目中引用apollo-vue（apollo非亲生儿子）作者是Guillaume Chau（vue的开发团队人员） git：https://github.com/...apolloProvider, template: '', components: { App } }) 好到此为止，基础配置就已经ok了接下来就是实际的请求了在vue 的组件中，...比如 test.vue 我们的例子是带参数的查询首先在组件里构建查询的变量 import gql from 'graphql-tag' const getErSeasons = gql`query

2.2K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

GraphQL+Koa2实现服务端API结合Apollo+Vue

Meteor 1.4正式发布 - 更新了 Node 和 MongoDB 版本以及更多

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

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

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

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

GraphQL 基础实践

GraphQL入门之使用ApolloServer和express构建GraphQL服务

GraphQL入门之使用ApolloServer构建GraphQL服务

你不知道的 GraphQL

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

koa2 + apollo-server-koa + mongoose 接口

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

GraphQL 实践与服务搭建

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

在 redux 应用中使用 GraphQL

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

防止你的GraphQL API被恶意查询

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

如何优雅的在Vue Project中使用vue-apollo

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐