传递输入值到我的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
相关·内容
1回答
通过graphQL突变函数作为支柱还是将其注入子组件？
javascript、reactjs、graphql、react-apollo
我在reactJS/graphQL-应用程序中使用react-apollo。有时我确实需要对多个部件进行相同的突变。那么，在调用突变后，使用突变和更新数据的最佳方法是什么？我是应该将突变注入顶层组件并将其传递给所有的孩子(示例2)，还是应该在需要的地方注入突变(示例1)？通过示例1，可以更容易地在突变调用之后更新现有数据，而传递父组件的
浏览 3提问于2020-01-04得票数 1
回答已采纳
1回答
传递输入值到我的graphql突变- react/react-apollo
javascript、reactjs、graphql、react-apollo
我正在结合使用react-apollo和react-native-gifted-chat。const addMessageToTeam = gql`
浏览 9提问于2018-02-06得票数 0
回答已采纳
1回答
阿波罗GraphQL:一个组件中的多个查询？
graphql、apollo、apollo-server
我有一个组件，需要查询两个完全独立的表。在这种情况下，模式、查询和解析器需要什么样的外观？我已经搜索过，但还没有找到例子。谢谢您提供任何信息。更新:我发现可能有一种方法可以将compose用于此目的，例如： graphql(query1, graphql(query2, graphql(query3, withApollo是否有一种方法可以
浏览 4提问于2016-10-29得票数 7
回答已采纳
1回答
如何从单个react组件调用多个graphql突变？
javascript、reactjs、graphql、react-apollo、apollo-client
目前，我有一个react组件，它需要在不同的按钮点击上调用来自同一组件的2个突变。
如果我直接使用this.props.mutate({variables: {...}})，它总是调用导入到文件中的第一个
浏览 0提问于2018-08-17得票数 3
1回答
在页面加载时触发React Apollo突变
reactjs、react-apollo
我正在尝试在react-apollo应用程序中实现电子邮件验证系统，但遇到了一个问题。问题是，当用户使用验证令牌访问链接时，我希望在页面加载时触发GraphQL突变。变异目前是在点击按钮时触发的，但我希望它发生在页面加载时。 我试图从render返回突变，但它将应用程序送进了无限循环。
浏览 7提问于2019-05-30得票数 4
回答已采纳
1回答
updateQueries在GraphQL突变不能与阿波罗客户端工作后
javascript、graphql、apollo、apollostack、react-apollo
在我的应用程序中发送createMessage突变后，我想使用更新本地ApolloStore。我的设置如下：export defaultgraphql(createMessage, { return {
createMessageMutat
浏览 1提问于2017-03-06得票数 5
回答已采纳
1回答
将ApolloClient ()移动到React组件的正确方法？
apollo、react-apollo、apollostack
根据，我希望将ApolloClient中的mutate()函数放入属于我的react组件的属性中。这是正确的/首选的方法吗？class myComponent extends React.Component { super(props);
this.mutate
浏览 14提问于2017-06-25得票数 0
回答已采纳
1回答
如何在typescript + apollo中键入突变
typescript、apollo、react-apollo
假设我有一个像这样的突变。 token { accessTokenExpiresOn }如何使用react-apollo中的graphql函数类型将signIn方法添加到类中？例如：
import SignInMutation from '
浏览 0提问于2018-03-23得票数 7
1回答
希望有条件地调用一个突变
reactjs、apollo、react-apollo
我在我的主渲染类中有条件地调用处理程序中的突变时遇到了麻烦。不幸的是，我无法实现提交按钮(项目定义的限制，我的DOM输入必须动态呈现新的图形onChange)，并且在允许执行突变之前必须验证条件，但我似乎无法诊断修复！ 在下面，您可以找到主组件代码。请注意，突变仍然在验证处理程序中，暂时停留在那里，直到建立修复程序。 我也有一些apollo文档教程为我指明了方向，但不幸的是，它们依赖于一个不同<em
浏览 14提问于2019-05-22得票数 1
回答已采纳
1回答
使用react-apollo 2.1突变和react生命周期方法
reactjs、apollo、react-apollo、apollo-client
我想知道，在react生命周期方法中使用新的Mutation组件的方法是什么。
假设我有一个页面，其中我使用了几个react-apollo突变。当加载从true到false的状态更改时，我想执行另一个突变，以便在页角显示一个通知弹出窗口。
浏览 0提问于2018-05-07得票数 1
1回答
我应该直接使用阿波罗数据，还是在Redux存储中保存/修改它？
reactjs、redux、apollo、react-apollo、apollo-client
如何处理从阿波罗查询中检索的数据？我的第一个想法是将它保存在redux商店中，修改它(使用redux减少它，使用动作创建者)，然后，当数据准备就绪时(用户单击“保存”按钮)，向阿波罗发送一个突变，以便在服务器上更新它。尽管如此，我不认为这是最好的方法。我应该避免在这里使用Redux商店并直接使用阿波罗命令式API吗？
浏览 4提问于2017-12-11得票数 0
回答已采纳
1回答
React Apollo查询/突变类型脚本
typescript、react-apollo
我不太理解文档中的最后一个属性。它似乎是输入，响应，变量，？Function;interface Variables {}
isLinkValid: validateLink, };});
const validateUserMutation = graphql
浏览 0提问于2019-04-08得票数 2
6回答
阿波罗2.1中的多个查询/突变
graphql、apollo、react-apollo
我需要一些帮助使用阿波罗2.1中的新查询和突变组件，特别是多个查询和突变。
我有一个graphql请求，它依赖于以前的graphql结果，我如何处理这个问题？如何在已经有查询的组件中添加两个不同的突变(在我的组件中我需要做两个不同的操作)？
浏览 3提问于2018-04-11得票数 16
1回答
React阿波罗显示“react-阿波罗只支持查询、订阅或每个特定的突变”错误。
reactjs、react-native、graphql、react-apollo
我得到了以下错误：import React from "react";import { compose, graphql } from"react-
浏览 3提问于2019-10-22得票数 2
回答已采纳
1回答
响应GraphQL突变返回无效输入
reactjs、graphql、next.js、react-apollo、shopify-api
背景:我正在使用React、NextJS和GraphQL构建一个Shopify应用程序。其功能是为每个选定的产品添加一个额外的privateMetafield值。问题是:我正在尝试使用Reactive-阿波罗来创建或更新(如果存在privateMetafield )的突变。我曾经尝试过在失眠症中运行GraphQL突变(就像GraphQL的邮递员)，它起作用了。但是，当我将它添加到代码中时，我不会让<
浏览 3提问于2020-11-16得票数 0
回答已采纳
1回答
未传递给组件的变异查询属性(&Q)
reactjs、graphql、apollo
当我的处理程序被调用时，我得到一个错误，表明突变不是一个函数。由于某些原因，当我查看this.props时，我的突变和查询没有附加到我的组件上。我尝试了多种语法样式，试图将突变和查询传递给组件，并在其他组件中使用了该样式，没有任何错误。有人能解释一下为什么他们没有被通过吗？不确定我错过了什么。import React from 'react';
import ReactDOM from '
浏览 0提问于2018-06-28得票数 0
1回答
如何避免来自阿波罗useMutation钩子的破坏性突变？
reactjs、typescript、eslint、react-apollo
我包装了来自react-apollo的useMutation钩子，以便每次使用变体时都可以向Sentry发送错误： import { useMutation } from '@apollo/react-hooks'import { MutationHookOptions } from 'react-apollo'
type UseMutationWithS
浏览 11提问于2020-12-10得票数 0
回答已采纳
2回答
是否有一种方法可以为反应中的装饰者创建一个组合函数？
javascript、reactjs
我正在工作一个完整的web应用程序与一些组件，使用多个装饰(特别)。export default compose( withFunctionality, ]相应的守则应是：export default withProvider( MyComponent)function composereturn (C
浏览 8提问于2021-06-07得票数 0
回答已采纳
1回答
如何仅在重取时调用查询
reactjs、graphql、apollo
我想知道是否有一种方法可以在未将组件连接到graphql的情况下调用react组件中的查询，因为它引导组件在第一次挂载时启动查询。
那么，基本上有没有办法避免默认调用呢？
浏览 3提问于2018-01-17得票数 0
回答已采纳
1回答
显示ApolloClient突变结果
reactjs、graphql、apollo-client、mutation
这是我第一次使用阿波罗和反应，所以我会尽我最大的努力。import { graphql } from 'react-apollo'/Header.js'
浏览 13提问于2022-11-05得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
