开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

传递输入值到我的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

相关搜索:ReactJS/Javascript/Graphql/React-apollo:传递查询变量 React，Graphql -如何将变量传递给突变没有输入参数的Graphql突变不起作用 ReactJS/Javascript/Graphql/React-apollo:无法读取未定义的传递突变中的链接数组[石墨烯/python/graphql]将变量直接注入到从React-Apollo <突变/>组件传递的函数中，而不是作为道具使用钩子从react调用GraphQL突变的正确方法突变中的Laravel LightHouse GraphQL DateTime输入始终为空如何接受字典/对象作为石墨烯(GraphQL)突变的输入？需要在react-apollo中使用从GraphQL订阅接收的数据的setstate()如何将输入的值传递到我的条形图 react-apollo:长时间运行的突变似乎在2分钟后重试将用户输入传递给GraphQL的GatsbyJS 将输入参数传递给订阅的GraphQL React传递在其他页面中输入的值当我的useEffect钩子在react-apollo突变后被触发时，我如何解决react中的这个警告？react js的数据传递问题GraphQL问题 React查询突变现在使用相同的输入再次触发更新:如何将默认值传递到我的模式输入元素中有没有办法使用@apollo/react-hooks访问多个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

3431 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中用于改变执行行为的指令。它们可以被应用到类型系统定义的任何部分，比如字段、输入类型、对象类型等。

1071 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

C# 一分钟浅谈：GraphQL 客户端调用

解决方法：使用 GraphQL 模板工具或 IDE 插件进行语法检查，确保查询语句正确无误。变量类型不匹配：问题：传递给查询的变量类型必须与定义的类型一致，否则会引发错误。...解决方法：仔细检查变量的类型定义，确保传递的变量类型与查询中定义的类型一致。响应数据结构不匹配：问题：返回的数据结构与预期不符，导致反序列化失败。...创建一个新的订单接下来，我们定义一个 CreateOrderInput 类来表示创建订单的输入参数，并编写一个突变来创建新的订单。...更新订单的状态定义一个 UpdateOrderInput 类来表示更新订单的输入参数，并编写一个突变来更新订单的状态。...删除一个订单定义一个 DeleteOrderInput 类来表示删除订单的输入参数，并编写一个突变来删除订单。

1031 0

C# 一分钟浅谈：GraphQL 客户端调用

解决方法：使用 GraphQL 模板工具或 IDE 插件进行语法检查，确保查询语句正确无误。变量类型不匹配：问题：传递给查询的变量类型必须与定义的类型一致，否则会引发错误。...解决方法：仔细检查变量的类型定义，确保传递的变量类型与查询中定义的类型一致。响应数据结构不匹配：问题：返回的数据结构与预期不符，导致反序列化失败。...创建一个新的订单接下来，我们定义一个 CreateOrderInput 类来表示创建订单的输入参数，并编写一个突变来创建新的订单。...更新订单的状态定义一个 UpdateOrderInput 类来表示更新订单的输入参数，并编写一个突变来更新订单的状态。...删除一个订单定义一个 DeleteOrderInput 类来表示删除订单的输入参数，并编写一个突变来删除订单。

961 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.4K3 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 使用该值刷新数据。

4.1K4 2

C# 一分钟浅谈：GraphQL 数据类型与查询

枚举类型枚举类型用于定义一组固定的值。...age: Int } 输入对象类型输入对象类型用于定义输入参数的结构。例如，定义一个创建用户的输入类型： input CreateUserInput { name: String!...query { user(id: "123") { id name articles { id title } } } 变量变量用于在查询中传递动态参数...空值处理：在定义字段时，使用!表示该字段不能为空。例如，id: ID!表示id字段不能为空。权限控制：在实际应用中，需要对查询进行权限控制，防止未授权访问敏感数据。...如何避免易错点严格类型检查：在定义Schema时，尽量使用严格的类型定义，避免使用any类型。单元测试：编写单元测试，确保查询和突变的正确性。可以使用Hot Chocolate提供的测试工具。

850 0

C# 一分钟浅谈：GraphQL 数据类型与查询

GraphQL 数据类型标量类型GraphQL定义了一些基本的标量类型，包括：String：字符串类型Int：整数类型Float：浮点数类型Boolean：布尔类型ID：唯一标识符类型，通常用于表示数据库中的主键枚举类型枚举类型用于定义一组固定的值...age: Int}输入对象类型输入对象类型用于定义输入参数的结构。例如，定义一个创建用户的输入类型：input CreateUserInput { name: String!...查询用户及其文章：query { user(id: "123") { id name articles { id title } }}变量变量用于在查询中传递动态参数...空值处理：在定义字段时，使用!表示该字段不能为空。例如，id: ID!表示id字段不能为空。权限控制：在实际应用中，需要对查询进行权限控制，防止未授权访问敏感数据。可以使用中间件或自定义指令来实现。...单元测试：编写单元测试，确保查询和突变的正确性。可以使用Hot Chocolate提供的测试工具。日志记录：记录详细的日志信息，便于调试和排查问题。

1121 0

可汗学院为什么选择Go

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

6131 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

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

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

2.2K2 0

塔荐 | 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

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭