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

如何从graphql()创建的高阶组件中获取MutationResult

从graphql()创建的高阶组件中获取MutationResult可以通过以下步骤实现:

  1. 首先,确保你已经安装了GraphQL相关的依赖包,例如react-apollo
  2. 在你的组件中,使用graphql()函数将GraphQL查询或变异绑定到组件上。例如,如果你要绑定一个变异,可以这样做:
代码语言:txt
复制
import { graphql } from 'react-apollo';
import { myMutation } from './graphql/mutations';

class MyComponent extends React.Component {
  // 组件的代码...
}

export default graphql(myMutation)(MyComponent);
  1. 在组件中,你可以通过this.props.mutate来访问绑定的变异函数。这个函数返回一个Promise,它会在变异完成后解析为MutationResult对象。
代码语言:txt
复制
class MyComponent extends React.Component {
  handleMutation = () => {
    this.props.mutate()
      .then((result) => {
        // 在这里处理MutationResult对象
        console.log(result);
      })
      .catch((error) => {
        // 处理错误
        console.error(error);
      });
  }

  render() {
    // 渲染组件的代码...
  }
}
  1. MutationResult对象包含了变异的结果信息,包括dataerrorsloading等属性。你可以根据需要使用这些属性来处理变异的结果。
代码语言:txt
复制
class MyComponent extends React.Component {
  handleMutation = () => {
    this.props.mutate()
      .then((result) => {
        // 获取变异的结果数据
        const { data, errors, loading } = result;

        if (loading) {
          // 正在加载中...
        } else if (errors) {
          // 处理错误信息
          console.error(errors);
        } else {
          // 处理成功的结果数据
          console.log(data);
        }
      })
      .catch((error) => {
        // 处理错误
        console.error(error);
      });
  }

  render() {
    // 渲染组件的代码...
  }
}

这样,你就可以从graphql()创建的高阶组件中获取MutationResult了。根据具体的业务需求,你可以进一步处理MutationResult对象中的数据和错误信息,以及展示加载状态等。

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

相关·内容

【译】如何在 Node.js 创建安全 GraphQL API

原文地址:How to Create a Secure Node.js GraphQL API 作者:Marcos 本文目的是提供一份快速指南 -- 《如何快速在如何在 Node.js 创建安全...下面是一个简单查询: query{ users{ firstName, lastName } } 在这个查询,我们想从用户集合获取所有的用户,但只需要返回 firstName...本文所有示例可以在这个链接获得:https://github.com/makinhs/node-graphql-tutorial 我们将会处理两种类型资源(两个集合): Users:用来展示如何进行基本...(查询):我们要从服务器获取内容 Mutations(变更):请求将会改变服务器数据 现在,我们重新执行一下 npm start,我们可以看到在控制台中显示了以下消息:Node Graphql API...; 创建模块 (Module) 基本方法; 测试我们 GraphQL API; 为了将内容侧重于开发使用,本文忽略了开发中一些重要内容,简单总结如下: 新增内容时需要校验 对服务错误进行正确处理

2.5K20

教你如何快速 Oracle 官方文档获取需要知识

https://docs.oracle.com/en/database/oracle/oracle-database/index.html 如图,以上 7.3.4 到 20c 官方文档均可在线查看...11G 官方文档:https://docs.oracle.com/cd/E11882_01/server.112/e40402/toc.htm 这里以 11g R2 官方文档为例: 今天来说说怎么快速官方文档得到自己需要知识...SQL language Reference ,这个文档包括 Oracle数据库SQL 语句语法( plsql不包含在内)。比如说create table语法、函数、表达式都在这里有描述。...有监听相关疑问可以在这个文档中找到答案。 Backup and Recovery User’s Guide ,文档描述了 rman 各种用法。...具体还没深入了解,但是感觉还是比较先进好用,当 plsql没有办法完成任务时候,可以使用 java存储过程来解决,比如说想要获取主机目录下文件列表。

7.8K00

EasyScreenLive同屏功能组件C#版如何实现RTSPSERVER获取本机IP功能

TSINGSEE青犀视频EasyScreenLive同屏组件内置有一个轻量级RTSPSERVER,可以对于采集音视频源进行RTSP分发,最近有一个C#使用者在调研时候,对于RTSPSERVERLocalIP...获取不是很清楚,下面结合代码做个演示,说明实现方法以及如何使用。...1、定义函数GetLocalIP()用于获取本机IP; 2、具体实现如下: /// /// 获取当前使用IP /// /// <...地址列表筛选出IPv4类型IP地址 //AddressFamily.InterNetwork表示此IP为IPv4, //AddressFamily.InterNetworkV6...“成功” : “失敗”)); 在实际使用,EasyScreenLive同屏组件只需要调用EasyScreenLive几个API接口,就能轻松、稳定地把流媒体音视频数据RTMP推送给EasyDSS服务器以及发布

1.5K20

「首席架构师推荐」React生态系统大集合

如何使用React Hooks获取数据?...React组件层次结构 react-hot-loader - 实时调整React组件 react-loadable - 用于加载具有promise组件高阶组件 loadable-components...- 在React中生成复杂,经过验证和扩展基于JSON表单 Redux-Autoform - 元数据动态创建Redux-Forms uniforms - 一堆React组件和帮助器,可以轻松生成和验证表单...- React组件包装器,用于将React与MobX结合使用 MobX教程 10分钟介绍MobX和React 使用MobX管理React应用程序复杂状态 将您应用程序Redux重构为MobX...使用GraphQL编写基本API 使用Node.js和SQL构建GraphQL服务器 GraphQL Tour:变量 如何Graphql - GraphQLFullstack教程 GraphQL实现

12.3K30

展望2016,REACT.JS 最佳实践 | TW洞见

我们不推荐使用 Flux 来管理路由相关数据,比如 /items/:itemId。而只是获取路由数据并存储在组件 state 之中。在这种情况下,它会在组件消失之后一起被销毁。...== nexProps.immutableFoo } 如何在 JavaScript 实现不可变呢?...高阶组件 目前来说,mixins 已死,而且在 ES6 Class 组件已经不再被支持,我们应当寻找不同替代方案。 那什么是高阶组件呢?...在RisingStack,我们也将数据获取和类似 Controller 逻辑分割成高阶组件,并保持视图层尽可能简单。 测试 在开发周期中,维持测试高覆盖率是非常重要一部分。...我们曾经写过一个 Relay MongoDB ORM库,叫做 graffiti,可以使用已有的 mongoose 模型直接创建一个 GraphQL 服务器。

2.9K90

如何使用 Nx、Next.js 和 TypeScript 构建 Monorepo

上述文件主要思想是创建一个 GraphQL 客户端,帮助我们 GraphQL 服务器请求数据。 该createClient函数负责使用graphql-hooks包创建 GraphQL 客户端。...查询将允许我们 ProductHunt GraphQL API 端点获取所有帖子。...因此,如果我们想在构建另一个应用程序时重用相同样式,我们必须将这些样式复制到新应用程序。 解决此问题一种方法是创建一个单独组件库并将这些样式存储在那里。该组件库可以被多个应用程序重用。...要在 Nx 创建 React 库,我们可以项目的根目录运行以下命令: nx generate @nrwl/react:library components 上面的命令会给我们如下图所示提示。...结论 在本文中,我们学习了如何利用 Nx 构建带有 Next.js 和样式化组件 monorepo。我们还了解了使用 monorepos 如何提高开发体验和构建应用程序速度。

5.5K51

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

最后,它将我们关注点转向了应用程序和特定于域内容。这些内容是不能直接市场购买或下载。 2基础架构组件 GraphQL 服务器和 HTTP 服务器都属于基础架构组件。...,我们可以使用 @client 指令来引用要基于一个客户端模式本地缓存获取属性。...数据图客户端延伸到服务器,并为现代 Web 应用程序获取数据和更改状态时面临最常见基础架构问题提供了答案 为了通过 GraphQL 与后端服务通信,Apollo Client 公开了几种客户端方法...路由 + 方法组合 请求形式 + 参数 路由 + 方法组合 一个例子是,某人可以很简单地将 创建一个用户 操作 POST /users 移至 POST /users/new。...前端开发人员可以使用数据图来创建自己数据获取用例,而不必依赖后端开发人员。 GraphQL 消除了管理 API 版本需要,Apollo GraphManager 可以简化生产模式验证。

2.1K20

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

在本指南中,我们将介绍如何GraphQL 无缝集成到您 React.js 项目中。什么是 GraphQLGraphQL 是用于 API 查询语言,也是用于执行那些查询运行时。...如果还没有,请使用以下命令创建一个:npx create-react-app my-graphql-appcd my-graphql-appnpm start现在,让我们安装 GraphQL 所需软件包...在项目的 src 文件夹创建一个名为 client.js 文件,并设置 Apollo Client:// src/client.jsimport { ApolloClient, InMemoryCache...: new InMemoryCache(),});export default client;在 React 组件中使用 GraphQL 获取数据现在,让我们使用 GraphQL 在 React 组件获取数据...将 GraphQL 集成到您应用程序最后,将 PostList 组件集成到主 App.js :// src/App.jsimport React from 'react';import { ApolloProvider

35140

使用 React 和 GraphQL 做一个todo list

这背后原因是每次我们都启动服务,在内存存储Todo(s)数组变为空了。我们将在下面的内容展示如何向数组添加数据。 如你所见,返回格式已经被替换成了客户端已经定义和描述过了查询格式。...很多人会认为React是MVC模型V, 官方文档是这样规定: 我们做出React是为了解决一个问题:创建大型应用时,加载数据超时。根源在于构建可重用组件。实际上,本质就是构建组件库。...如果你需要一个React指南,你可以阅读下面的资料: 视频: React入门 React JS库概述 视频: 单向数据流概述 一个简单React 组件 React 组件通过render()方法来获取输入数据并将返回结果渲染展示...输入数据可以通过this.props来向render()渲染组件传值。下面是关于如何创建一个React 组件简单例子 并且在 CodePen可用....今天结尾,我们有两种类型查询: 一种是服务端取数据(get); 另一种是操作创建, 更新, 删除(create, update, delete)数据。

2K130

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

我们需要以一种合适方法存储这些数据,让应用组件可以简洁地获取这些数据。...解决问题基础 我们知道这个问题需要解决,现在让我们思考一下,如何正确地在 Apollo Client 管理状态?...GraphQL 最大一个优势在于,当给 GraphQL 语句中字段加上合适 GraphQL 指令后,单条 query 就可以多个数据源获取数据,无论本地还是远端。让我们来看看具体方法。...Apollo Link 使得在 Apollo Client 管理本地数据成为可能,从一个 GraphQL 服务器获取数据,可以使用 HttpLink,而 Apollo 缓存请求数据,则需要使用一个新...Resolvers 在使用 Apollo Client 管理应用状态后,Apollo cache 成为了应用单一数据源,包括了本地和远端数据。那么我们应当如何查询和更新缓存数据呢?

2.3K100

Spring认证_什么是Spring GraphQL

成功解码 JSON 正文后,HTTP 响应状态始终为 200(OK),并且 GraphQL 请求执行任何错误都会出现在 GraphQL 响应“错误”部分。...上下文传播 Spring GraphQL 支持Web 传输、通过 GraphQL 引擎以及DataFetcher它调用其他组件透明地传播上下文。...Spring GraphQL 支持将ThreadLocal值 Servlet 容器线程传播到线程 aDataFetcher以及由 GraphQL 引擎调用其他组件执行。...网络流量 一个反应DataFetcher可以依靠获取反应堆背景下,WebFlux源自请求处理链。这包括由WebInterceptor组件添加 Reactor 上下文。...异常解决 GraphQL Java 应用程序可以注册 aDataFetcherExceptionHandler来决定如何GraphQL 响应“错误”部分中表示来自数据层异常。

2.9K20

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

GraphQL是一种现代API查询语言,它在现代Web应用得到了广泛应用,因为它提供了一种高效、灵活且强大方式来获取数据GraphQL基础快速应用示例:1....,我们使用useQueryGraphQL服务器获取数据,并渲染用户和他们帖子信息。...这就是GraphQL查询、类型系统和层次结构在实际应用体现。...: Post}在Query类型,我们定义了获取单个用户、所有用户、单篇帖子和所有帖子查询。而在Mutation类型,我们定义了创建新用户和新帖子操作。...下面展示如何使用一个自定义@auth指令来控制访问权限。首先,假设我们定义了一个@auth指令,用于限制对某些字段访问,要求用户必须登录。

6210

如何用扫描仪控制恶意程序,隔离网络获取数据(含攻击演示视频)

近期,一群来自以色列安全研究专家发明了一种能够物理隔离网络窃取数据新技术。研究人员表示,他们可以通过扫描仪来控制目标主机恶意软件,然后从这台物理隔离网络计算机提取出目标数据。...研究人员在他们发表研究报告说到: “攻击者首先需要向一台平板扫描仪发送光脉冲信号,当平板扫描仪接收到了这些信号之后,目标主机恶意软件会将信号携带控制命令提取出来。...在真实攻击场景,攻击者甚至还可以利用一架配备了激光枪无人机(办公室窗户外向扫描仪发射光信号)来发动攻击。...这也就意味着,一个64位消息块则需要大约3秒钟时间,而恶意软件可以实时读取光信号携带数据。 在研究人员所进行另一项测试,他们通过这项技术发动了一次勒索攻击。...当时,他们身处一台停在停车场汽车,并在车内通过光脉冲信号加密了目标主机数据。

5.3K90

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

我们将在列表显示这些数据,当用户点击其中一个项目时,查询 launch 来获取该火箭更多数据。让我们在 GraphQL playground 测试第一个查询。 ?...在终端执行: 1yarn codegen 在 src/generated/graphql.ts ,你将会找到定义程序所需所有类型,以及获取 GraphQL 端点以检索该数据相应查询。...在 src/components/LaunchList/index.tsx 创建一个使用生成 useLaunchListQuery 钩子函数组件。...添加用户交互 现在需要添加当用户点击面板项目时获取完整发射数据功能。我们将在 App 组件创建一个钩子来跟踪班次 ID 并将其传递给 LaunchProfile 组件以重新获取发射数据。...总结 我们可以看到一旦配置好了程序之后,开发速度是非常快。我们可以轻松构建数据驱动 UI。 GraphQL 允许我们在组件定义所需要数据,并且可以无缝地将其用于组件 props。

3K20

使用 Meteor 和 React 开发 Web App

本文来自CMeteor社区成员jinglei。文中讨论了Meteor与React开发Web App优势所在,以及Meteor在现代Web开发扮演角色。...此外,本文还简要阐述了Meteor REST WebSocket,Flux概念,Relay和GraphQL等对于Meteor社区影响。...Controller-View 监听事件,一旦触发就从 Store 获取相应数据。这样就能够保证数据单向流动,使逻辑更简单。 Meteor 完全可以作为一种 Flux 实现。...对于 View,如图中可以使用一个父组件来监听数据变化,子组件负责界面渲染和互动。另外一个方案是使用高阶组件 HOC 来包裹 UI 组件高阶组件负责数据查询,子组件负责渲染等。...在简单情况下,单个组件就可以了,Controller-View 可以和 UI 渲染在一个 Component 里。

1.2K40

GraphQL 入门到实践

本文首先介绍了 GraphQL,再通过 MongoDB + graphql + graph-pack 组合实战应用 GraphQL,详细阐述如何使用 GraphQL 来进行增删改查和数据订阅推送,并附有使用示例...比如,组件需要负责把异步请求状态分发给子组件或通知给父组件,这个过程,由组件间通信带来结构复杂度、来源不明数据源、不知从何订阅数据响应会使得数据流变得杂乱无章,也使得代码可读性变差,以及可维护性降低...试想一下你都开发完了,产品告诉你要大改一番,接口到组件结构都得改,后端也骂骂咧咧不愿配合让你好几个 API 里取数据自己组合,这酸爽 ?...GraphQL 操作类型可以是 query、mutation 或 subscription,描述客户端希望进行什么样操作 query 查询:获取数据,比如查找,CRUD R mutation...2.5 请求格式 GraphQL 最常见是通过 HTTP 来发送请求,那么如何通过 HTTP 来进行 GraphQL 通信呢 举个栗子,如何通过 Get/Post 方式来执行下面的 GraphQL 查询呢

2.5K31

React高阶组件

React高阶组件 高阶组件HOC即Higher Order Component是React中用于复用组件逻辑一种高级技巧,HOC自身不是React API一部分,它是一种基于React组合特性而形成设计模式...描述 高阶组件名字上就透漏出高级气息,实际上这个概念应该是源自于JavaScript高阶函数,高阶函数就是接受函数作为输入或者输出函数,可以想到柯里化就是一种高阶函数,同样在React文档上也给出了高阶组件定义...属性代理 例如我们可以为传入组件增加一个存储id属性值,通过高阶组件我们就可以为这个组件新增一个props,当然我们也可以对在JSXWrappedComponent组件props进行操作,注意不是操作传入...修改传入组件HOC是一种糟糕抽象方式,调用者必须知道他们是如何实现,以避免与其他HOC发生冲突。HOC不应该修改传入组件,而应该使用组合方式,通过将组件包装在容器组件实现功能。...算法使用组件标识来确定它是应该更新现有子树还是将其丢弃并挂载新子树,如果render返回组件与前一个渲染组件相同===,则React通过将子树与新子树进行区分来递归更新子树,如果它们不相等,则完全卸载前一个子树

3.8K10
领券