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

在Angular Apollo Graphql中访问突变结果

,可以通过以下步骤实现:

  1. 首先,确保已经安装了必要的依赖包。在Angular项目中,可以使用npm或yarn来安装apollo-angular和graphql-tag。
  2. 在Angular组件中引入所需的依赖包。在组件的顶部,添加以下代码:
代码语言:txt
复制
import { Apollo } from 'apollo-angular';
import { gql } from 'graphql-tag';
  1. 创建一个突变操作。在组件类中,定义一个方法来执行突变操作。例如:
代码语言:txt
复制
export class MyComponent {
  constructor(private apollo: Apollo) {}

  performMutation() {
    this.apollo.mutate({
      mutation: gql`
        mutation MyMutation($input: MutationInput!) {
          myMutation(input: $input) {
            id
            name
          }
        }
      `,
      variables: {
        input: {
          // 突变操作所需的输入参数
        }
      }
    }).subscribe(result => {
      // 处理突变结果
      console.log(result.data.myMutation);
    });
  }
}

在上述代码中,我们使用apollo.mutate方法来执行突变操作。通过gql函数定义了一个GraphQL查询,其中包含了突变操作的定义。variables属性用于传递突变操作所需的输入参数。

  1. 调用突变操作。在组件的适当位置,调用performMutation方法来执行突变操作。例如,在按钮的点击事件中调用该方法:
代码语言:txt
复制
<button (click)="performMutation()">执行突变操作</button>

当按钮被点击时,突变操作将被执行,并且在控制台中打印出突变结果。

需要注意的是,以上代码仅为示例,实际的突变操作和结果处理可能会根据具体的业务需求有所不同。此外,还可以根据具体情况使用其他Apollo和GraphQL的功能和特性来进一步优化和扩展代码。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

前端设置(使用Apollo Client)接着,我们需要在前端应用配置Apollo Client,与我们的GraphQL服务器通信:npm install apollo-boost @apollo/client...查询语言:查询、突变、订阅GraphQL,查询和突变是通过JSON-like结构表示的字符串。...这就是GraphQL查询、类型系统和层次结构实际应用的体现。...: Post}Query类型,我们定义了获取单个用户、所有用户、单篇帖子和所有帖子的查询。而在Mutation类型,我们定义了创建新用户和新帖子的操作。...在上面的例子,me查询和username字段无需特殊权限即可访问,但访问用户的email字段则需要管理员权限(通过@auth(requires: ADMIN)指令指定)。

9810

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

结果我一路到现在都是处于这么一种状态:看到一个新的框架—看看文档和场景—嗯哼,不错—学!...但在Angular模板被单独放一个html文件,组件用Class的语法写,我就莫名觉得爽快。...你可能同样犹豫要不要学这玩意,我的意见是:学!因为确实NodeJS目前没有特别全面的框架(虽然NestJSSpring面前也是弟弟)。...TS这个工具的主要能力就是生成TS的类型定义,同时它的插件体系还提供了更多的额外能力,如Apollo-Client的插件,让你可以直接使用封装好的的useXXXQuery等,前端连查询语句都不用写了...,Apollo的useQuery接收的是GraphQL Document,BlitzJS的则接收的是后端方法,其中会直接db.entity.create()这样去写数据库)。

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

    , 有很奇妙的感觉,因为我最开始入门前端时,也是以Vue入的门,“学完”Vue之后, 我也有了类似的疑问,但当时的我没多想,觉得“技多不压身”,反正都是前端,以后肯定用得上,那就学呗—— 结果我一路到现在都是处于这么一种状态...AngularAngular 是我最近正在学的框架,开始前我其实是拒绝的,但写了两个例子之后我觉得真香!...但在Angular模板被单独放一个html文件,组件用Class的语法写,我就莫名觉得爽快。...你可能同样犹豫要不要学这玩意,我的意见是:学! 因为确实NodeJS目前没有特别全面的框架(虽然NestJSSpring面前也是弟弟)。...TS这个工具的主要能力就是生成TS的类型定义,同时它的插件体系还提供了更多的额外能力,如Apollo-Client的插件,让你可以直接使用封装好的的useXXXQuery等,前端连查询语句都不用写了

    2.9K10

    2017JavaScript框架战报-React分战场

    这一结果出乎意料,因为React作为一个局部的解决方案,本质上不如Ember和Angular这样的完整框架使用起来方便。 Flux 一个完整应用程序的另一个不通过React的部分就是数据层。...RxJS似乎是作为其他项目的子依赖项驱动的,特别是Angular CLI。这意味着所有使用Angular的驱动器都使用相同的RxJS,也被合并到其他一些流行的命令行工具。...GraphQL 虽然它与React是同时Facebook内部开发的,但是GraphQL与React并没有内在的联系。它只是Web客户端查询服务器数据的一种方式。...它通过名为Relay和Apollo的两个竞争库得到了一定的普及,这两个库提供用于生成GraphQL和管理数据流的Web应用程序。...React生态系统总结 回头看过去12个月的变化,我们可以看到各个“玩家”React生态系统的位置变化: * Apollo正在快速增长。 * Flux正在下降。

    1K70

    塔荐 | 2018 年最值得关注的 JavaScript 趋势

    我们开门见山,直接上好东西吧:认为 Vue 可能会成为 React 的一大竞争敌手的人不是很多,但是今年想要无视Vue是不可能的,开发者的炒作方面甚至令Angular黯然失色。...谈到取悦开发者,不要忘了Facebook今年在BSD+Patents的收钱事件遭遇的史诗般的失败,这惹恼了不少的开发者。...Angular剩下的拥护者已经表态说Angular会成为企业选择的JS框架,但这一断言尚有待证实,而且2018年未必能得到证实。...我们现在有了 Relay Modern (Facebook开发)和Apollo,让你可以比Redux更高效地抓取并传递GraphQL数据到React应用的GraphQL客户端框架。...简而言之:Immutable.js,Facebook的另一个项目,确保了状态不会因为使用不可变对象而发生突变

    1.5K80

    React生态系统

    这些“路由”本质上是不同的功能块,浏览器中表现为单独的 URL。React 不需要为简单的应用程序使用路由,同时一些桌面和移动应用程序环境,路由也不是必需的。...当引入 React 时,Facebook 还推出了 Flux(一种管理应用程序状态的方法)和 GraphQL(一种用于客户端和服务器之间进行通信的系统)。这两者都不如 React 本身流行。...Flux React 之后不久就被推出了,但却直到2015年期才得到普及。...GraphQL 通过名为 Relay 和 Apollo 的两个竞争库得到了普及,Relay 和 Apollo 提供了一个 Web 应用程序,用于生成 GraphQL 和管理数据流。...虽然 GraphQL 开发者使用量的绝对数还很小,但是 Apollo 的增长轨迹意味着 GraphQL 很值得开发者关注。 React生态系统概述 ?

    98830

    2017年JS 框架回顾:React 生态系统

    这些“路由”本质上是不同的功能块,浏览器中表现为单独的 URL。React 不需要为简单的应用程序使用路由,同时一些桌面和移动应用程序环境,路由也不是必需的。...当引入 React 时,Facebook 还推出了 Flux(一种管理应用程序状态的方法)和 GraphQL(一种用于客户端和服务器之间进行通信的系统)。这两者都不如 React 本身流行。...Flux React 之后不久就被推出了,但却直到2015年期才得到普及。...GraphQL 通过名为 Relay 和 Apollo 的两个竞争库得到了普及,Relay 和 Apollo 提供了一个 Web 应用程序,用于生成 GraphQL 和管理数据流。...虽然 GraphQL 开发者使用量的绝对数还很小,但是 Apollo 的增长轨迹意味着 GraphQL 很值得开发者关注。

    923100

    JavaScript 2016年的概况

    调查结果的报告目录结构如下: 简介 JavaScript风格 前端框架 状态管理 API层 全栈框架 测试框架 CSS工具 构建工具 移动框架 特性 意见/评价 开发者的资料...正是因为大家都有同样的疑问,所以就有人搞了一个调查,如果你也想尽快知晓明年的调查结果,可以访问#介绍页面#然后输入你的邮箱进行订阅。...Vue是发展非常快的未来之星 Angular 2 > Angular 流行度: React > Angular / Angular 2 > Backbone > Vue > Ember...API层 本节摘要: GraphQL 看上去很有前景 REST APIs仍旧是默认的标准,大幅度领先 流行度: REST API > GraphQL 技术选型方面: GraphQL...+ Relay + Apollo + React Native 全栈框架 本节摘要: 该类别Meteor主导 ‘all in one’模式并不受欢迎 流行度: Meteor > MEAN

    67620

    2017年 JavaScript 框架回顾 -- React生态系统

    这些“路由”本质上是不同的功能块,浏览器中表现为单独的 URL。React 不需要为简单的应用程序使用路由,同时一些桌面和移动应用程序环境,路由也不是必需的。...当引入 React 时,Facebook 还推出了 Flux(一种管理应用程序状态的方法)和 GraphQL(一种用于客户端和服务器之间进行通信的系统)。这两者都不如 React 本身流行。...Flux React 之后不久就被推出了,但却直到2015年期才得到普及。...GraphQL 通过名为 Relay 和 Apollo 的两个竞争库得到了普及,Relay 和 Apollo 提供了一个 Web 应用程序,用于生成 GraphQL 和管理数据流。...虽然 GraphQL 开发者使用量的绝对数还很小,但是 Apollo 的增长轨迹意味着 GraphQL 很值得开发者关注。

    1.2K40

    大势 | 2018最值得关注的JavaScript趋势

    Vue.js 我们开门见山,直接上好东西吧:认为Vue可能会成为React的一大竞争敌手的人不是很多,但是今年想要无视Vue是不可能的,开发者的炒作方面甚至令Angular黯然失色。...谈到取悦开发者,不要忘了Facebook今年在BSD+Patents的收钱事件遭遇的史诗般的失败,这惹恼了不少的开发者。...Angular剩下的拥护者已经表态说Angular会成为企业选择的JS框架,但这一断言尚有待证实,而且2018年未必能得到证实。 Reason Facebook生产使用的一切永远都值得关注。...我们现在有了Relay Modern (Facebook开发)和Apollo,让你可以比Redux更高效地抓取并传递GraphQL数据到React应用的GraphQL客户端框架。...简而言之:Immutable.js,Facebook的另一个项目,确保了状态不会因为使用不可变对象而发生突变

    80220

    2019 简易Web开发指南

    在此我整理了个人认为2019仍是或者将成为主流的技术与大家分享,包括前端、后端和全栈相关。 工具、软件 欲先攻其事必先利其器,用好工具是做好开发的基础。...) Redux VueX NgRx Apollo (GraphQL Client) 后端渲染(server side rendering) Next.js (React) Nuxt.js (Vue) Angular...Universal (Angular) 开发工具 依赖管理:NPM,Yarn 应用打包:Webpack,Parcel 任务管理:Gulp,Grunt 编辑器扩展:ESLint,Live Server...& Apollo GraphQL简而言之是一种API 查询语言(QL = query language),提供了一种革命性的API实现方式。...GraphQL是一种规范(specification)而不是实现(implementation)。而ApolloGraphQL最火的实现。更多请参考:Awesome GraphQL

    2.3K41

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

    我们深入构建微服务的过程之前,了解 GraphQL 在此架构的作用非常重要。什么是GraphQL?...主要功能包括声明式数据获取:使用 GraphQL,客户端可以查询精确指定所需的数据,包括字段和关系。这消除了传统 REST API 经常出现的数据过度获取和获取不足的问题。...高效的类型系统: GraphQL 拥有强大的类型系统,可以 API 定义数据的结构和关系。高效的数据加载功能: GraphQL 使客户端能够单个请求检索多个资源。...Node.js安装部署指南第2步:初始化Apollo服务器Apollo Server是一个开源的、与GraphQL规范兼容的服务器,它简化了GraphQL API的构建。...为此,只需导航到 即可在浏览器访问 Apollo Server API 沙箱http://localhost:/graphql。进入沙箱后,您可以发送请求并观察响应。

    17900

    每日前端夜话(0x04):2018年JavaScript状态调查(

    Angular ? Angular是一个基于TypeScript的开源前端Web应用程序平台。 请注意,与以往不同的是,调查的过去版本还有一个关于AngularJS的问题。...Apollo ? 功能齐全的GraphQL缓存客户端,适用于UI框架和GraphQL服务器。 Apollo 随时间的流行度 ? Apollo 最受喜欢的方面 ? Apollo 最不受欢迎的方面 ?...但整个领域很快就会受到GraphQL冲击波的影响。 GraphQL用户两年内从5%上升到20%,他们选择的客户端似乎是Apollo。...另外Apollo的最新版本使Redux成为可选项,如果明年的结果看起来非常不同,那就不足为奇了…… 后端框架 后端的JavaScript近年来没有取得任何重大突破。...Jest使用方面紧随其后,但其满意度略高:96%对82%。96%是今年整个调查第高的满意度。只有ES6获得了更好的成绩!

    1.6K20

    如何在纯 JavaScript 中使用 GraphQL

    本教程,我们将介绍我 StepZen 上创建的一个简单的 Scooby DooAPI,它用来连接到一个 MySQL 数据源(StepZen 现在处于私有 alpha 状态,但是你可以在此处请求访问...我们来看一个不使用特殊库的简单示例(请注意,我确实使用了 dotenv 来获取用于访问我 StepZen 后端的 API 密钥)。在这个示例,我仅传递了一个 query,该查询发送前需要字符串化。...其次,更重要的是我无法访问环境变量。需要强调的是,如果你的 API 需要传递某种 API 密钥或凭据,那么你不会希望客户端执行这一操作,因为你的凭据将被公开。...更好的解决方案是调用一个可访问这些凭据的无服务器函数,然后为你调用 API 并返回结果。如果你的无服务器函数是用 JavaScript 编写的,则前面示例的 Node 代码就会起作用。...然后它会获取结果并将其显示浏览器。尽管这对 GraphQL 调用来说并不重要,但我使用 js-beautify 正确格式化了要显示的 JSON 结果,然后使用 Prism 给它上了色。

    3.5K10

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

    作者 | Khalil Stemmler 策划 | 田晓旭 服务器上使用 GraphQL 代替 REST 是有很多好处的,使用 Apollo Client 取代自己编写的数据获取逻辑也有很多优势。...在过去的几年中,我们已经看到各种规模和形态的公司都开始整个组织逐渐采用 GraphQL,例如 Expedia、Nerdwallet 和 Airbnb。... Apollo GraphQL,我们将这种虚拟层称为数据图。并且 Apollo 构建了很多可提高开发人员生产效率的工具。...对于突变,解析器可以简单地将控制权传递给一个应用层用例。 将用例作为应用程序的重心后,从 REST 切换到 GraphQL(或同时支持两者)变得轻而易举。...通过 Apollo Federation,我们可以绘制并公开由多个 GraphQL 端点组成的单个数据图 Federation ,你可以组成模式并解析其他服务 / 限界上下文中的字段。

    2.2K20

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

    它提供了一些很棒的想法,比如无状态服务器和结构化的资源访问。...查询的返回结果就是输 入的查询结构的精确映射 客户端可以自定义 Api 聚合 如果设计的数据结构是从属的,直接就能在查询语句中指定;即使数据结构是独 立的,也可以查询语句中指定上下文,只需要一次网络请求...将它与vue-apollographql一起安装: npm install vue-apollo graphql apollo-boost --save src/main.js引入apollo-boost...控制台查看查询结果 src/main.js配置vue-apollo插件 import VueApollofrom'vue-apollo' Vue.use(VueApollo); 创建Apollo...:h=>h(App) }) 简单查询 组件加载的时候就会去服务器请求数据,请求的数据会放在navList这个属性上面,模板可以直接使用当前属性 简单查询文档 带参数查询参考 import gql from'graphql-tag

    5.2K42

    2019-Web开发技术指南和趋势

    学习一个前端框架在目前前端开发是必须的. 大公司开发中非常流行 更多的交互 & 有趣的UI组件 组件化 & 模块化前端代码 对团队有利 2.4 状态管理 ?...对于使用框架的大型前端项目, 你也许需要使用状态管理工具去管理你的应用级的状态 Redux(Context API) Apollo(GraphQL Client) Vuex NgRx 2.5 满足一个成熟的前端开发者条件...使用到了 Chromium内核和Node.js 兼容Windows, Mac & Linux 崩溃报告, 调试和性能分析 4.3 GraphQL & Apollo GraphQl是对于API的一种革命性新方法...只查询你想要的东西 前端和后端可以合作得更为顺利 查询语句非常简单且很像JSON语句 Apollo是一个发送请求到GraphQL的客户端 使用的是Gatsby静态站点生成器 4.4 TypeScript...变量, 函数等类型 类 其他ES6的特性 Angular中被使用到, 同时也可以React和Vue中被使用 4.5 无服务架构 ?

    3.4K20
    领券