传递输入值到我的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
相关·内容
3回答
useMutation总是返回未定义的数据。
javascript、react-apollo、graphql-js、apollo-server
这是我的代码
反应
const EXCHANGE_RATES = gql`
mutation {
signUp(lastName: "Amasia")
}
`;
const HandlerRequest = () => {
const [loading, { data }] = useMutation(EXCHANGE_RATES);
console.log('apollo', data);
return <p>apollo</p>;
};
模式
gql`
extend type Mutati
浏览 13提问于2019-11-19得票数 2
1回答
this.props.getPostInfo查询失败并出现错误- TypeError: Apollo不是一个函数
reactjs、apollo、react-apollo、graphql-js
我正在尝试使用带有React的Apollo连接到我的graphql api终结点。为了做到这一点，我有一个如下的组件。
import React, {Component} from 'react'
import {GetPostInfoQuery} from "./../../../queries/posts"
import { compose, graphql, Query } from "react-apollo";
class PostItem extends Component {
getCurrentPostInfo =()
浏览 0提问于2019-08-09得票数 0
1回答
阿波罗与反应: refreshQueries没有在onClick()引发的突变中工作
reactjs、graphql、apollo
我正在构建一个简单的购物应用程序。在加载时，我们将进行一个查询，以检查购物车是否存在。现在，这个查询总是返回null (我还没有实现逻辑来检查用户是否已经有购物车了)。然后，当用户单击"create“时，我们会做一个突变来创建它。最后，我们将在突变完成后使用refreshQueries通过ID获取购物车(及其产品)，该ID将从突变中返回。然后我们将这些产品呈现在一个纯组件中。
我遇到的问题是，在用户单击按钮并发生refreshQueries之后，没有任何重新呈现。我知道查询正在发送，并通过查看developer的网络选项卡返回一个带有产品的创建购物车。只是阿波罗似乎没有注意到这个变化。
浏览 4提问于2017-11-19得票数 0
回答已采纳
2回答
如何获得突变反应？
reactjs、graphql、react-hooks、apollo-client、react-apollo-hooks
我在我的reactjs应用程序中成功地完成了这种突变，但我希望在我的reactjs应用程序中获得graphql返回的响应，这可能吗？
React代码：
import { useMutation } from "@apollo/react-hooks";
const [addStoreToDB, { error }] = useMutation(addStoreMutation);
if (error) {
console.log("error:", error);
return <p>Error :(</p&
浏览 36提问于2020-03-06得票数 0
回答已采纳
1回答
如何将变量传递给Apollo突变组件？
reactjs、graphql、react-apollo、apollo-client
从2.1版本开始，Apollo客户端使用React的render props模式。 在官方Apollo Client documentation上，variables作为参数传递给变异函数： addTodo({ variables: { type: input.value } }); 但是，包括How to GraphQL在内的各种教程都会将它们作为道具传递： <Mutation mutation={POST_MUTATION} variables={{ description, url }}> 选择一种或另一种方式的原因是什么？
浏览 8提问于2019-02-07得票数 2
1回答
最佳实践日志阿波罗错误:在自定义反应钩子或什么时候使用钩子？
reactjs、react-hooks、apollo、apollo-client
我正在使用一个定制的React钩子，它使用@apollo/client库来调用GraphQL API。
import {useMutation} from '@apollo/client';
export const useCreateAccount() => {
...
const {loading, error, data} = useMutation(query, options);
...
return [loading ,data, error];
}
在我的组件中，我调用我的自定义钩子：
import {useCreateAccou
浏览 4提问于2022-09-13得票数 1
1回答
WPGraphQL useMutation GraphQL错误:类型为"RootMutation“的字段"registerUser”上的参数"username“未知
reactjs、wordpress、next.js、headless-cms、wp-graphql
我正在使用react、nextjs和wpgraphql构建一个无头wordpress网站。我正在尝试创建一个变体来注册用户，但在提交表单后收到以下错误：
Error: GraphQL error: Unknown argument "username" on field "registerUser" of type "RootMutation".
GraphQL error: Unknown argument "email" on field "registerUser" of type "RootMuta
浏览 7提问于2020-11-28得票数 0
2回答
Version不需要生成签名串吗？
云服务器、云 API、官方文档
例子中当用户调用腾讯云 CVM 的查看实例列表(DescribeInstances)接口时，有一个必选参数是Version，但是在生成Signature的过程中，该参数并由参与到其中。是不是这里只需要公共参数参与？
[附加信息]
浏览 228提问于2018-05-08
1回答
每次电话中阿波罗客户端useMutation呈现两次
expo、apollo、react-apollo、apollo-client
我有一个基本的博览应用与反应导航。在顶级function Navigation中，我发起了对阿波罗服务器的useMutation调用，如下所示：
import { callToServer, useMutation } from '../graphQL';
function Navigation() {
console.log("RENDERED");
const [call] = useMutation(callToServer);
call({ variables: { uid: 'xyz', phoneNumber: '
浏览 0提问于2020-10-21得票数 0
1回答
在页面加载时触发React Apollo突变
reactjs、react-apollo
我正在尝试在react-apollo应用程序中实现电子邮件验证系统，但遇到了一个问题。问题是，当用户使用验证令牌访问链接时，我希望在页面加载时触发GraphQL突变。变异目前是在点击按钮时触发的，但我希望它发生在页面加载时。 我试图从render返回突变，但它将应用程序送进了无限循环。 return (
<Mutation
mutation={VERIFY_EMAIL_MUTATION}
variables={{ id }}
onCompleted={() => this.
浏览 7提问于2019-05-30得票数 4
回答已采纳
1回答
在graphQL阿波罗突变中更新多个值
reactjs、graphql、react-apollo、typeorm
我正在尝试从我的前端(React + apollo graphql)更新我的后端用户(typeorm后端) 我正在定义一个更新用户的变体，它调用UserUpdateInput类 @Mutation(() => Boolean)
async updateUser(
@Arg("user_id", () => Int) user_id: number,
@Arg("input", () => UserUpdateInput) input: UserUpdateInput
) {
await User.updat
浏览 6提问于2020-06-30得票数 1
3回答
做出突变时的反应阿波罗-奇怪的效果？
reactjs、promise、graphql、apollo、react-apollo
我已经建立了一个React应用程序，并可以成功地查询我的API。
然而，当我做一个突变，一个奇怪的效果发生。我成功地拿回了所有的数据(如Chrome的Network中所示)，但是当尝试console.log数据时，它说它是null。
以下是相关代码：
// mutation file
import gql from "graphql-tag";
export default gql`
mutation CreateReservation($name: String!, $time: String!, $persons: String, $specialMessage: S
浏览 2提问于2018-10-13得票数 1
1回答
不更新dataIdFromObject的阿波罗归一化
mongodb、reactjs、apollo、react-apollo、reactql
在我发送了一个delete突变后，我在让React+Apollo更新商店时遇到了问题。我使用的是内置了apollo+react和express graphQL服务器的reactQL样板(我没有安装apollo服务器--我只是使用了reference express-graphQL包)。我的数据使用_id存储在mongoDB中，但是客户端上的实际数据使用id作为id。
apollo客户端的定义如下：
new ApolloClient(
Object.assign(
{
reduxRootSelector: state => state.apollo,
浏览 13提问于2017-08-25得票数 1
回答已采纳
2回答
社交登录-如何在功能之外使用变量作出反应？
reactjs、graphql、apollo
我尝试使用社交登录。
如果我成功登陆卡考。他们给我access_token，我用它对我的服务器进行变异。
下面是我的代码
import { useMutation } from "react-apollo-hooks";
import { KAKAO_LOGIN } from "./AuthQuery";
export default () => {
const kakaoLoginMutation = useMutation(KAKAO_LOGIN, {
variables: { provder: "kakao", acc
浏览 3提问于2021-03-14得票数 0
回答已采纳
1回答
如何用阿波罗图形实现反应排序-专案？
reactjs、graphql、apollo-server、react-sortable-hoc
你好，我正在创建一个允许用户创建列表的应用程序(所有数据都存储在mongoDB上，并通过阿波罗GraphQL访问)；每个列表都有一个属性listItems，一个存储列表中所有项的数组。
当用户转到不可分割的Ranklist.js组件页面时，它会加载包含通过graphQL查询访问的所有列表项的列表。
从这里开始，应用程序利用允许用户移动列表项。当我能够移动listItems时，只要我放手，页面就会重置顺序，以匹配存储在mongoDB上的数组的顺序。
请告诉我，为什么是这种情况，我如何才能正确地实现一种方法，以保存的顺序与反应排序-特别结合数据库通过阿波罗graphQL。
import Reac
浏览 3提问于2020-05-06得票数 1
1回答
如何在react中修复大树结构
javascript、reactjs、graphql
我在react项目中使用graphql得到了这棵大树，还使用React工具检查了应用程序，您将看到附件中显示的一棵大树。所以我检查了这个链接
但是我找不到解决这个问题的好办法，如何修复这个大树结构？请帮帮我:)
浏览 1提问于2018-10-22得票数 0
1回答
如何在没有GraphQL的Next.js中使用useMutation突变
reactjs、graphql、next.js、apollo-client、graphql-mutation
我正在开发一个Next.js版本9.3.0和GraphQL的代码库。为了获得Next.js优化的好处，我们正在用withApollo包装每个页面，因此在页面中我们可以使用useQuery、useMutation。我面临的问题是，我需要在页面外的Header component中使用变异，因为应用程序没有包装在withApollo中，所以它无法访问ApolloClient。
我得到的错误是这个Could not find "client" in the context or passed in as an option. Wrap the root component in an
浏览 2提问于2020-05-07得票数 4
回答已采纳
1回答
在执行突变之前进行react查询重新获取
reactjs、react-query
我开始使用react查询突变，但我在查看网络请求时发现，当我调用一个突变时，它首先会在执行之前获取。
这是我的变异
const mutation= useMutation(
async (values: VoteProps) => {
await fetch("/api/test/test", {
method: "POST",
body: JSON.stringify(values),
headers: {
"Content-Type": "
浏览 1提问于2021-06-17得票数 1
2回答
反应-阿波罗突变返回空反应
reactjs、graphql、apollo、react-apollo、aws-appsync
我正在使用AWS Appsync，在这里，我希望从一个成功执行的突变中获得一个响应。当我在Appsync控制台中尝试安装时，我会得到一个填充的"data": { "mutateMeeting" }响应：
当我在自己的react应用程序中尝试同样的操作时，我可以在dynamodb数据库中看到，突变发生了，但是发生了反应--阿波罗没有返回突变响应。正如您在阿波罗开发工具中所看到的，"data": { "mutateMeeting" }是空：
我遗漏了什么？
相应的graphql模式读取：
input MeetingInpu
浏览 1提问于2018-08-20得票数 9
回答已采纳
2回答
React查询:通过一个useMutation的并行加载器/微调器
reactjs、react-query
我有一个用例，我想用不同的键( in )并行地改变相同的实体。我的问题是:是否有可能使用相同的useMutation为每个请求(react-query缓存键)提供单独的加载器？下面是一个简化的例子(也可以在codesandbox上交互)： const useUserMutation = (userData) => {
return useMutation({
mutationKey: [userData.userName, userData.job], // how to have separate loaders based on mutation keys?
m
浏览 164提问于2021-11-19得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
