开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

传递输入值到我的graphql突变- react/react-apollo

传递输入值到我的GraphQL突变是指在React应用中使用React Apollo库来向GraphQL服务器发送变异（Mutation）请求，并将输入值传递给该变异。

GraphQL是一种用于API的查询语言和运行时环境，它允许客户端精确地指定需要的数据，并且只返回所需的数据。React是一个流行的JavaScript库，用于构建用户界面。React Apollo是一个用于在React应用中集成GraphQL的库，它提供了一些工具和组件，使得在React应用中使用GraphQL变异变得更加容易。

在React应用中传递输入值到GraphQL突变的步骤如下：

首先，确保你的React应用已经集成了React Apollo库，并且已经配置了与GraphQL服务器的连接。
在你的React组件中，使用useMutation钩子函数从React Apollo库中导入。这个钩子函数接受一个GraphQL变异查询作为参数，并返回一个可以触发该变异的函数。
在组件中定义一个处理提交的函数，该函数将被触发时调用。在这个函数中，你可以获取用户输入的值，并将其作为变异查询的参数传递给useMutation返回的函数。
调用useMutation返回的函数，并传递用户输入的值作为参数。这将触发GraphQL变异请求，并将输入值传递给服务器。
根据需要处理变异请求的响应。你可以使用useMutation返回的第二个元素来获取响应数据、加载状态和错误信息。

总结起来，传递输入值到GraphQL突变是通过React Apollo库在React应用中发送GraphQL变异请求，并将用户输入的值传递给该变异。这样可以方便地与GraphQL服务器进行交互，并获取所需的数据。

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

腾讯云云开发：https://cloud.tencent.com/product/tcb
腾讯云云原生应用引擎：https://cloud.tencent.com/product/tke
腾讯云云数据库MongoDB：https://cloud.tencent.com/product/mongodb
腾讯云云服务器CVM：https://cloud.tencent.com/product/cvm
腾讯云云存储COS：https://cloud.tencent.com/product/cos
腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
腾讯云移动推送：https://cloud.tencent.com/product/tpns

相关搜索:react js的数据传递问题GraphQL问题 react-apollo:长时间运行的突变似乎在2分钟后重试 ReactJS/Javascript/Graphql/React-apollo:传递查询变量 ReactJS/Javascript/Graphql/React-apollo:无法读取未定义的 React传递在其他页面中输入的值 React查询突变现在使用相同的输入再次触发 React，Graphql -如何将变量传递给突变传递突变中的链接数组[石墨烯/python/graphql]使用钩子从react调用GraphQL突变的正确方法如何将输入的值传递到我的条形图

相关搜索:

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

有帮助

没帮助

相关·内容

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

通过使用 GraphQL，我们可以自动且自由地输入我们的 React 组件的属性。这样可以减少产品上的错误并提高迭代速度。...Apollo 所需的库是 apollo-boost，react-apollo，react-apollo-hooks，graphql-tag和graphql。...1yarn add apollo-boost react-apollo react-apollo-hooks graphql-tag graphql graphql-code-generator 用于自动化...查询钩子返回 data，loading 和 error 的值。我们将在容器组件中检查 loading 和 error，并将 data 传递给表示组件。...17> 在 LaunchList/index.tsx 里面，一定要导入 OwnProps 声明来输入传递给容器组件的 props，然后将 props 传播到 <LaunchList data={data

3K2 0

GraphQL 入门详解

安装依赖安装如下依赖： $ cd client $ npm i apollo-boost react-apollo graphql 其中 apollo-boost 是apollo client本身，...react-apollo 是react视图层的集成，graphql 用于解析graphql的查询语句。...'; import { ApolloProvider } from 'react-apollo'; import '....store类似，react-apollo 通过将apollo client向下传递。...} from 'react'; import gql from 'graphql-tag'; import { Query } from 'react-apollo'; import LaunchItem

2.1K2 0

在 redux 应用中使用 GraphQL

增加一个 GraphQL 客户端（Apollo 客户端）安装 apollo-client, react-apollo, 和 graphql-tag。...$ npm install apollo-client react-apollo graphql-tag --save 打开 Redux 应用的入口文件 src/containers/AppContainer.js...在这里我们把 redux store 通过 react-redux 中的 provider 传递给子组件。...中的 Provider 替换为来自 react-apollo 的 ApolloProvider。...渲染从 props 中传递下来的数据： import React from 'react' import { connect } from 'react-apollo' // NOTE: different

1.9K1 0

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

GraphQL 当听到我们需要在这个项目中“整合许多不同的数据源”时，我立即意识到使用GraphQL作为API网关会是一个不错的选择。...使用apollo-client和react-apollo简化了前端代码对缓存和数据的管理。灵活的查询方式方便我们在未来构建移动端以及内部应用。...在gPPC中，.proto文件用来描述后端服务的可调用方法名，以及这些方法输入输出的字段类型。..."react-apollo"; import { CreateTodo } from "....CreateTodoMutationClass是继承自react-apollo的Mutation组件的一个子类，它的构造函数两个入参类型就是CreateTodoType和CreateTodoVariables

3.1K2 0

React + Redux + GraphQL 环境搭建

Server Client 之前闲着无聊写的一个 Redux 项目，今天突然想把它做成动态数据源，很早之前使用 Gatsby 的时候尝试过 GraphQL 觉得不错，所以就试着集成了一下。...localhost:4000/graphql'); 放到 index.js 然后 node 跑起来即可浏览器直接打开 localhost:4000/graphql 就是 graphiql 的界面，这玩意算是半个...IDE 吧 Client 轮子：react-apollo 因为之前用了 Redux，只需要修改一些地方就行。...核心就是用一个 Provider 包裹之前的内容。.../reducers' +import gql from "graphql-tag"; +import { ApolloProvider } from "react-apollo"; +import ApolloClient

3041 0

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

编写前端组件现在，我们在React组件中使用Apollo Client执行查询和变更：// App.jsimport React from 'react';import { gql, useQuery,...查询语言：查询、突变、订阅在GraphQL中，查询和突变是通过JSON-like结构表示的字符串。...GraphQL SchemaGraphQL Schema Definition Language（SDL）是一种用于描述GraphQL schema的语言，它以简洁的人类可读格式定义了数据类型、查询、突变和指令等...查询根和突变根接下来，定义GraphQL的查询根（Query）和突变根（Mutation）类型，它们是客户端请求数据和修改数据的入口点。type Query { user(id: ID!)...Directives的理解和使用Directives是GraphQL schema中用于改变执行行为的指令。它们可以被应用到类型系统定义的任何部分，比如字段、输入类型、对象类型等。

471 0

基于React和GraphQL的黛梦设计与实现

所以就设计了一个黛梦（demo）------ 打通了GraphQL的接口与前端交互的流程，并且将数据存入MYSQL，分享下React和GraphQL的使用，大致内容如下： GraphQL的增删改查接口设计与实现...CRUD包mysql的使用 React 和 React Hooks的使用因为涉及到React、GraphQL，还有MySQL的一张用户表User，所以我本来是想起一个“搞人实验”的名字，后来斟酌了一下..., user: UserInput): User } `); 这里定义了用户输入的类型以及用户的类型，然后Query中的getUsers模拟的是返回用户列表的接口，返回User实体的列表集。...这里createUser接收一个UserInput的输入，然后返回一个User类型的数据，updateUser接受一个ID类型的id，然后一个UserInput类型的user 第四步：对楼上Schema...那么前后端的架构就可以是 react-apollo，vue-apollo, 后端的话比如express-apollo，koa-apollo等等。

1.8K2 0

我用 React 和 Vue 构建了同款应用，来看看哪里不一样（2020 版）

首先，“突变数据”到底是什么意思呢？听起来是不是有点高深？其实它基本上就是指更改我们已存储的数据。如果我们想将一个人名的值从 John 更改为 Mark，我们就是在“突变“这份数据。...从下面的图片中可以看到两者的设置，然后我们会具体说明： React 状态： ? Vue 状态： ? 于是你看到我们将相同的数据传递给了两者，但各自的结构有所不同。...在 React 中，我们的输入字段有一个名为 value 的属性。每次通过 onChange 事件侦听器更改它的值时，都会自动更新此值。...那我强烈建议你仔细阅读 spread 运算符的相关介绍，因为它很有用！最后我们运行 setToDo() 并传入一个空字符串。这样我们的输入值为空，可以输入新的 toDo 了。...不管怎样，回到空字符串的状态，无论我们在输入字段中键入什么文本都必须绑定到 todo.value。这实际上就是双向绑定——输入字段可以更新 ref() 值，反过来后者也可以更新输入字段。

4.8K3 0

React 设计模式 0x6：数据获取

向您的 API 发送 GraphQL 查询，只获取您所需的数据，没有多余的内容。...GraphQL 查询总是返回可预测的结果，使用 GraphQL 的应用程序速度快且稳定，因为它们控制获取的数据，而不是由服务器来控制。...# Memoization Memoization 是一种优化技术，主要用于通过存储昂贵的函数调用结果，并在再次出现相同输入时返回缓存的结果来优化计算机程序。...只需传入一个函数和一个依赖数组，useMemo 将仅在依赖中的一个值发生变化时重新计算记忆化的值 import React, { useMemo } from "react"; function App...它提供了许多有用的功能，如数据缓存、自动重试、请求取消和突变。 React Query 的目标是提供一个简单的 API，让数据获取和管理变得更加容易，并且可以与现有的代码库集成。

1.2K2 0

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

- 用于有效渲染大型列表和表格数据的React组件 react-text-mask - React的输入掩码 react-loading-skeleton - 创建自动适应您的应用程序的骨架屏幕 react-spinkit...- 用于开发表单编写较少代码的UI库 formsy-react - React JS的表单输入构建器和验证器 Learn Raw React: Ridiculously Simple Forms Winterfell...instaleype by @gragland - 简单React自动完成组件 downshift - 构建简单，灵活，符合WAI-ARIA标准的增强型输入React组件的原语 React Bootstrap...- 一个简单的redux中间件，用于使用JSON Schema验证redux状态值和对象类型 redux-persist - 坚持并补充redux商店 Redux教程在ES6中使用React和Redux...：为移动设备带来现代网络技术 - f8 2015） Citrusbyte推出GraphQL：与Nick Schrock合作的横向平台 Laney Kuenzel：接力中的突变和订阅 - JSConf 2015

12.3K3 0

使用 React 和 GraphQL 做一个todo list

如果你需要一个React指南，你可以阅读下面的资料：视频: React入门 React JS库概述视频: 单向数据流概述一个简单的React 组件 React 组件通过render()方法来获取输入数据并将返回结果渲染展示...输入数据可以通过this.props来向render()渲染的组件传值。下面是关于如何创建一个React 组件的简单的例子并且在 CodePen中可用....测试一下是否正常运行，输入以下代码： $ curl -XPOST -H "Content-Type:application/graphql" -d 'query { todos { title }...这种接收异常类型的操作，在GraphQL中被称作修改（mutations），定义一个修改(mutations)跟定义一个查询一样，也会返回一个类型的的值。...一个值得注意的事是我们在所有的修改中传递参数，所以有的字段都可接收参数。追加参数是相当简单，并且它们都可以被resolve函数捕获。

2K13 0

React Query 指南，目前火热的状态管理库！

通过该关键字，React Query 能够存储结果并在应用程序的不同部分中使用它。该关键字用于标识查询，你还可以使用 React Query 客户端通过代码重置查询或更改值。...突变伙计们，是时候谈论 React Query 中的第二个核心概念了，即突变。这是什么？突变是用户可以在你的应用程序中执行的操作，你可以将突变想象成更改或创建某些东西的操作。...结果有三个主要的对象： mutate：这是在你的代码中运行突变的操作 isLoading：这个标志表示突变是否正在进行 error：这表示如果请求出现错误，则显示错误在 React 应用程序中使用突变...打开你的终端并输入 $ npm i @tanstack/react-query-devtools 现在，在你的项目中，你可以使用它并得到所有需要调试你的应用程序所需的信息。这个工具很容易使用。...，则 React Query 使用该值刷新数据。

2.9K3 1

可汗学院为什么选择Go

十年是很长的技术。GraphQL在2009年不存在，两年前，我们决定将所有HTTP GET API迁移到GraphQL，后来决定也采用GraphQL突变。...引入React之后，我们就采用了React，它已经扩展到我们的许多Web前端。Google Cloud的功能广泛。服务器体系结构已朝着可独立部署的服务方向发展。...我们较早地开始了其中的一些技术迁移，其中一些将继续运行到我们的系统在Go中运行的地步，但最终结果将更加现代和一致。...我们将使用GraphQL联合将请求分派到我们的服务（以及过渡期间的旧Python代码）在需要提供REST端点的地方，我们将通过网关将请求转换为GraphQL。...截至2019年12月，我们在Apollo GraphQL网关后面开始运行了几个Go服务。这些服务今天很小，因为我们进行迁移的方式是渐进式的。

5821 0

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

React 开发人员通常需要修补 Redux 或 Context，并编写大量样板代码来满足这些要求。...Apollo 发布了带有 apollo-link-state 的 Apollo Client 后，React 开发人员就能用更少的代码满足所有这三个需求了。...对于突变，解析器可以简单地将控制权传递给一个应用层用例。将用例作为应用程序的重心后，从 REST 切换到 GraphQL（或同时支持两者）变得轻而易举。...由于具备执行自省查询的能力，所以 GraphQL Playground 的 GraphQL 资源管理器可以显示 GraphQL 端点的所有功能在 REST 领域中，我只看到了使用 Swagger 构建的...很多时候，我们对 UI 所做的微小改动也会让我们替换掉组件，或意识到我们错误地判断了数据需求，并且需要为一些组件添加更多字段。

2.1K2 0

Web 性能优化：使用 React.memo() 提高 React 组件性能

DevTools 选项卡中操作 TestC 组件的状态，单击 React 选项，选择右侧的 TestC，我们将看到带有值的计数状态：在这里，我们可以改变数值，点击count文本，输入 2，然后回车:...我们不必将 shouldComponentUpdate 生命周期方法添加到我们的组件以进行更改检测，我们只需要继承 React.PureComponent，React 将会自己判断是否需要重新渲染。...3）浅比较会忽略属性或状态突变的情况，其实也就是，数据引用指针没变而数据被改变的时候，也不新渲染组件。但其实很大程度上，我们是希望重新渲染的。所以，这就需要开发者自己保证避免数据突变。...如果我们更改数字并按回车，组件的 props 将更改为我们在文本框中输入的值,接着继续更为 45: 移动到 Console 选项我们看到 TestC 组件重新渲染，因为上个值为 5，当前值为 45.现在...现在，如果我们在右边编辑 count 值为到 89，会看到我们的应用程序重新渲染: 如果我们在将值改为与上个一样的值： 89: 不会有重新渲染!!

5.6K4 1

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

GraphQL GraphQL 是API的查询语言（可以看成是REST的现代版）。...GraphQL没有辜负2017年的炒作，像 Yelp、Spotify、Github、沃尔玛、《纽约时报》等主流公司都在采用GraphQL，而且现在还有了基于GraphQL的API。...其中一些API甚至是专门支持GraphQL的，甚至连REST选项都没有。简而言之：创新公司正在押注到GraphQL身上。...我们现在有了 Relay Modern （Facebook开发）和Apollo，让你可以比Redux更高效地抓取并传递GraphQL数据到React应用的GraphQL客户端框架。...简而言之：Immutable.js，Facebook的另一个项目，确保了状态不会因为使用不可变对象而发生突变。

1.5K8 0

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

GraphQL GraphQL 是API的查询语言（可以看成是REST的现代版）。...GraphQL没有辜负2017年的炒作，像Yelp、Spotify、Github、沃尔玛、《纽约时报》等主流公司都在采用GraphQL，而且现在还有了基于GraphQL的API。...我们现在有了Relay Modern （Facebook开发）和Apollo，让你可以比Redux更高效地抓取并传递GraphQL数据到React应用的GraphQL客户端框架。...简而言之：Immutable.js，Facebook的另一个项目，确保了状态不会因为使用不可变对象而发生突变。...4.GraphQL必须列入你的2018待办事宜清单。 5.跟着Relay Modern学，这是React+GraphQL应用的数据抓取选项之一。 6.Storybook！Storybook！

7802 0

Gatsby入门指南—使用GraphQL解析Markdown（2）

1.什么是GraphQL GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。...GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余，也让 API 更容易地随着时间推移而演进，还能用于构建强大的开发者工具。...src>components>Header.js里面， import { StaticQuery, graphql } from 'gatsby' import React from "react" const...组件数据传递 const Header = () => { return ( <StaticQuery query={graphql` query{...组件数据传递,我这么就为了看着舒服一点。

9445 0

何为GraphQL？

在allPlayers查询的情况下，它可以返回一个空列表，但不能为空值。此外，这意味着列表中的球员也不能为空值（因为它也有一个感叹号）。 ? 设置GraphQL服务器 ?...的API终点，传递模式和根值对象： app.use('/graphql', graphqlHTTP({ schema: schema, rootValue: rootValue, graphiql...GraphQL的变动 ? 魔术师约翰逊肯定是赛场上的魔术师。但是如果没有他的朋友卡里姆·阿卜杜勒·贾巴尔，他是无法成功的。让我们将卡里姆添加到我们的数据库。...您可以在查询中修改数据，并且您可以仅返回来自变动（mutation）的数据。 GraphQL不会窥探你的代码。查询和突变都可以接受参数并返回数据。它更像是语法糖，让你的模式更具人性化。 ?...验证 GraphQL将针对模式验证每个查询或变动。当输入数据具有复杂形态时，这会是一个巨大的胜利。您不必编写烦人且脆弱的验证代码。 GraphQL将为您处理它。 ?

3.5K6 0

React学习（最终篇）—— 高阶应用：高阶组件（HOCs）

常规的React组件都是将传入的props值转换成一个UI返回，而高阶组件是将一个组件转换成另外一个组件。...input只是一个映射值，因为它已经发生了突变 return InputComponent; } // EnhancedComponent 将在收到props时记录。...HOCs应该使用组合的方式来代替数据突变，下面的代码展示了使用容器如何包装输入组件以实现相同的功能： function logProps(WrappedComponent) { // 新创建一个组件...扩展将参数原封不动的传入输入组件 return ; } } } 这一段代码和之前的数据突变例子具备相同的功能...惯例：将无关的属性值传递到包装组件中 HOCs为一个组件额外增加了一些特性，但是它不应该影响组件原有的功能。对于一个HOC组件来说，他应该和被包装的子组件有相似的输入接口、有相同的返回。

1.6K4 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭