在页面加载时触发React Apollo突变
是指在React应用程序的页面加载过程中使用Apollo Client库来触发一个突变（Mutation）。Apollo Client是一个强大的GraphQL客户端，它可以与React应用程序无缝集成。
突变是GraphQL的一种操作类型，用于修改服务器端的数据。在React应用程序中使用Apollo Client进行突变可以通过发送GraphQL突变请求来实现。
在页面加载时触发React Apollo突变的常见应用场景包括：
- 用户认证和授权：在页面加载时，可以使用Apollo Client发送一个突变来验证用户身份，并获取用户访问权限。例如，可以通过发送一个登录突变来验证用户的用户名和密码，并获取访问令牌。
- 数据初始化：在页面加载时，可以使用Apollo Client发送一个突变来初始化应用程序所需的数据。例如，可以通过发送一个获取用户个人信息的突变来加载用户的基本资料。
- 页面状态更新：在页面加载时，可以使用Apollo Client发送一个突变来更新页面的状态。例如，可以通过发送一个设置页面主题的突变来改变页面的外观。
对于实现在页面加载时触发React Apollo突变，可以使用以下步骤：
- 安装Apollo Client库：使用npm或yarn安装Apollo Client库，并配置GraphQL端点的URL。
- 创建GraphQL突变：创建一个GraphQL突变，定义所需的输入参数和返回数据类型。
- 在React组件中使用Apollo Client：在需要触发突变的React组件中使用Apollo Client的useMutation钩子函数。这个钩子函数返回一个包含触发突变的函数和突变状态的数组。
- 在组件加载时触发突变：在组件的生命周期方法（如componentDidMount）中，调用触发突变的函数来发送突变请求。可以根据需要传递输入参数。
以下是一个示例代码片段，演示如何在页面加载时触发React Apollo突变：
import React, { useEffect } from 'react';
import { useMutation } from '@apollo/client';
import { YOUR_MUTATION } from './yourMutation'; // 导入您的突变定义
const YourComponent = () => {
const [mutate, { loading, error, data }] = useMutation(YOUR_MUTATION);
useEffect(() => {
mutate(); // 在页面加载时触发突变
}, []);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;
// 处理返回的数据
return (
<div>
<p>Data: {data}</p>
</div>
);
};
export default YourComponent;请注意，上述代码中的YOUR_MUTATION应替换为您实际定义的突变。您可以根据需要使用Apollo Client提供的其他功能和钩子函数来扩展此示例。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器CVM：https://cloud.tencent.com/product/cvm
- 云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
- 云函数SCF：https://cloud.tencent.com/product/scf
- 云原生容器服务TKE：https://cloud.tencent.com/product/tke
- 弹性MapReduce：https://cloud.tencent.com/product/emr
- 私有网络VPC：https://cloud.tencent.com/product/vpc
- Web应用防火墙WAF：https://cloud.tencent.com/product/waf
- 视频直播：https://cloud.tencent.com/product/css
- 云存储COS：https://cloud.tencent.com/product/cos
- 区块链服务：https://cloud.tencent.com/product/tbaas
- 企业级数据库TDSQL：https://cloud.tencent.com/product/tdsql
- 人工智能机器翻译：https://cloud.tencent.com/product/tmt
- 物联网套件：https://cloud.tencent.com/product/iotexplorer
- 移动推送：https://cloud.tencent.com/product/tpns
- 分布式数据库DCDB：https://cloud.tencent.com/product/dcdb
- 云原生应用引擎TAE：https://cloud.tencent.com/product/tae
相关·内容
我正在尝试在react-apollo应用程序中实现电子邮件验证系统，但遇到了一个问题。问题是，当用户使用验证令牌访问链接时，我希望在页面加载时触发GraphQL突变。变异目前是在点击按钮时触发的，但我希望它发生在页面加载时。 我试图从render返回突变，但它将应用程序送进了无限循环。 return (
<Mutation
mutation={VERIFY_EMAIL_MUTATION}
variables={{ id }}
onCompleted={() => this.
浏览 7提问于2019-05-30得票数 4
回答已采纳
我正在使用React，Apollo Client 2和Graphcool。我已经实现了一个登录表单。在登录页面上，根据客户端是否登录而显示登录表单或注销按钮。
我的代码可以工作，但不会进行反应性更新。用户登录或注销后，在刷新页面之前不会发生任何更改。怎样才能使我的代码成为响应式的？
import React from 'react';
import { graphql, compose } from 'react-apollo';
import gql from 'graphql-tag';
class Login extends React.
浏览 4提问于2018-01-28得票数 0
回答已采纳
"apollo-boost": "^0.1.13",
"apollo-link-context": "^1.0.8",
"graphql": "^0.13.2",
"graphql-tag": "^2.9.2",
"react-apollo": "^2.1.11",
电流码结构
<div>
<Query
query={FETCH_CATEGORIES_AUTOCOMPLETE}
variables=
浏览 0提问于2018-09-10得票数 0
回答已采纳
我的React / Redux应用程序中有一个容器，其中包含多个突变和一个查询：
const MenuWithData = compose(
graphql(GET_FINAL_CODE_BY_PROJECT_ID, {
options: ownProps => ({
variables: {
id: ownProps.projectId,
},
skip: true,
}),
props: ({ data }) => da
浏览 1提问于2018-02-16得票数 1
我想知道，在react生命周期方法中使用新的Mutation组件的方法是什么。
假设我有一个页面，其中我使用了几个react-apollo突变。当加载从true到false的状态更改时，我想执行另一个突变，以便在页角显示一个通知弹出窗口。
对于高阶组件，我会在componentDidUpdate方法中做到这一点，但现在使用<Mutation />组件，我不能做到这一点。我错过了什么吗？
浏览 0提问于2018-05-07得票数 1
1回答
在我发送了一个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
回答已采纳
你好，当我使用apollo link-state调用local-state的变异函数时，我遇到了这些错误。
我也有一个节点模块的图片问题，现在不能解决。
请帮个忙。
-节点问题
-代码
-index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom'
import 'typeface-roboto'
import registerServiceWorker f
浏览 7提问于2018-09-13得票数 1
我在学习阿波罗和反应钩。我正在尝试写一个小的演示，它只是输入一个名称，并呈现在下面。所有数据都通过阿波罗服务器进行查询和变异.
阿波罗服务器工作得很好。但是，每当我输入一个新的名称，我必须刷新页面。我应该将状态设置为react，但我不知道如何正确地设置它。
这是代码：
App.js
import React, { useState } from 'react';
import './App.css';
import ShowChannel from './ShowChannel';
import AddChannel from './A
浏览 9提问于2019-11-18得票数 0
回答已采纳
我正在尝试使用带有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
我正在使用Apollo客户端，Graphcool和React。我有一个工作的登录表单，但我需要的UI更新时，用户登录，我需要这发生在不同的组件。
看起来apollo-link-state就是这个问题的解决方案。我的下面的代码似乎可以工作，但我得到了这个错误：
writeToStore.js中的Missing field CurrentUserIsLoggedIn in {}
我的Apollo客户端设置：
import React from 'react';
import ReactDOM from 'react-dom';
// Apollo
import {
浏览 0提问于2018-01-29得票数 12
回答已采纳
我的应用程序使用React、Apollo client 2、Apollo Server和MongoDB作为数据库。我尝试在使用React的查询页面中添加"handleRemove“函数。但当我点击“删除”按钮，我得到"deleteCustomer“不是函数。
这里是我的代码这个页面，请帮助找出解决方案。
import React, { Component } from 'react';
import gql from 'graphql-tag';
import { graphql, compose } from 'react-apoll
浏览 10提问于2018-02-28得票数 0
回答已采纳
2回答
我有一个奇怪的情况与反应路由与GraphQL。我在/users url中有一个用户，当我第一次访问用户页面时，useQuery正在工作，请求会转到服务器并给我带来一些数据。然后，如果我转到另一个页面并返回到用户页面，useQuery将无法工作，而请求将不会发送到服务器。当我重新加载页面时，useQuery正在工作，请求将转到服务器。下面是我的用户代码和查询组件：
Users.js
import React, { useState, useEffect } from "react";
import { useLazyQuery, useQuery } from '
浏览 2提问于2021-04-01得票数 0
1回答
从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
我对Apollo Client很陌生。让我们少说几句，展示一下代码。我有一台正在运行的服务器，我正在尝试使用react进行变异。
server.js突变
const RootMutationType = new GraphQLObjectType({
name: "RootMutation",
description: "Root Mutation Type.",
fields: () => ({
addBook: {
type: BookType,
args: {
authorId: { typ
浏览 3提问于2021-06-21得票数 0
回答已采纳
我在入门反应+阿波罗章节：
当我在Prisma游乐场中输入以下查询时(正如教程告诉我的那样)：
mutation CreatePrismaLink {
post(
description: "Prisma gives you a powerful database toolkit "
url: "https://prisma.io"
) {
id
}
}
mutation CreateApolloLink {
post(
description: "The best GraphQL client for
浏览 3提问于2021-03-20得票数 0
回答已采纳
我正在结合使用react-apollo和react-native-gifted-chat。
我尝试从用户获取输入，并将其传递给我的this.props.addMessageToTeam方法。
将输入值传递给我的graphql变体时遇到了困难。下面是graphql突变部分的外观：
const addMessageToTeam = gql`
mutation {
createMessage(
message: $message,
teamId: "21345667"
) {
id
message
}
}
`;
请看
浏览 9提问于2018-02-06得票数 0
回答已采纳
因为我正在使用Apollo Boost，所以我可以像这样声明式地编写GraphQL查询：
import { Query } from 'react-apollo';
const LOGGEDIN = gql`
mutation($value: Boolean) {
CurrentUserIsLoggedIn(value: $value) @client {
value
}
}
`;
const Test = () => (
<Query query={LOGGEDIN}>
浏览 2提问于2018-02-19得票数 1
回答已采纳
情况很简单。
我有用户数据的NodeJS GraphQL后端。当添加新用户时，我可以使用React Apollo重新获取更新的用户数据，而不会出现问题。但随后我向后端添加了异步操作-当我使用GraphQL添加新用户时，我会从外部源获取数据，以填充有关该用户的一些信息。除了refetch之外，一切都能正常工作，因为(我假设) refetch是在异步操作完成之前触发的。当我把一个按钮手动重新获取时，一切都正常。
我的代码是：
import { useMutation } from "@apollo/client";
const [addUser, { error }] = use
浏览 21提问于2021-02-26得票数 0
我使用Apollo Client作为前端，Graphcool作为后端。有两个查询firstQuery和secondQuery，我希望它们在页面打开时被依次调用。以下是示例代码(这里没有列出TestPage组件的定义)：
export default compose(
graphql(firstQuery, {
name: 'firstQuery'
}),
graphql(secondQuery, {
name: 'secondQuery' ,
浏览 0提问于2018-03-16得票数 25
回答已采纳
1回答
与GraphQL客户端的反应
、、、、
将React与GraphQL clients (如Apollo Client )结合使用是个好主意吗？我可以用react和新的Context API实现同样的结果。
基本上，我可以使用GraphQL API或其他任何类似的库来使用axios。对于状态管理，我可以使用react的新Context API，这非常简单。
axios.get('localhost://4000?qraphql').then((res)=>{
//do something with the response.
})
Apollo Client还有什么优势吗？如果没有Apollo client我
浏览 2提问于2019-01-06得票数 5
回答已采纳
下面有一个反应元件的突变。我将需要在多个组件和不同页面上进行相同的突变。
我如何在不重复的情况下重用我的变异代码？
这个例子并不复杂，但有些查询使用乐观UI并将其写入商店。
import React from 'react';
import { graphql, compose } from 'react-apollo';
import { gql } from 'apollo-boost';
const JoinLocation = props => {
if (props.ME.loading) return null;
浏览 1提问于2018-05-05得票数 2
回答已采纳
import { graphql, compose } from 'react-apollo'
import gql from 'graphql-tag'
const AUTHENTICATE_USER_MUTATION = gql`
query authenticateUserMutation($email: String!, $password: String!) {
login(email: $email, password: $password) {
token
}
}
浏览 0提问于2019-01-25得票数 1
回答已采纳
当构建一个新的react-apollo应用程序并试图将我的组件绑定到graphql查询时，我对最佳实践感到困惑。
例如，我在react-apollo文档中的一些地方建议我使用<Query>
const GET_ALL_DOGS = gql`
query {
dogs {
id
breed
displayImage
}
}
`;
const Feed = () => (
<Query query={GET_DOGS}>
{({ loading, error, data }) => {
浏览 1提问于2018-05-02得票数 2
我刚刚看完了阿波罗GraphQL网页上的，我(显然？)晕头转向:)
我之所以在这里，是因为在我的用例中，我有一个客户端库(我编写的，让我们称它为InnerClient)，它公开了一些在内部进行grapqhl调用的方法，它没有UI。
现在我想在一个React apollo项目( ApolloReactClient )中导入这个库，并且我想了解在这种情况下如何利用Apollo客户端的超强功能:我没有任何查询或突变需要显式执行，我想调用我的InnerClient方法，等待响应(当然它们是异步的)，然后使用Query组件返回的方便属性(如数据、加载、错误...)在ApolloReactClient中呈
浏览 1提问于2018-11-14得票数 0
我使用react-apollo来管理我的react应用程序中的客户端存储，所以没有后端graphql服务器。所有与apollo相关的东西都在客户端运行。我将所有UI状态存储在ApolloClient的缓存中。我还在客户端定义了所有的解析器。 下面是新建客户端实例的代码： new ApolloClient({
cache,
resolvers: {
Mutation: {
...cartResolvers,
},
},
typeDefs: [typeDefs]
}); 我读过这篇关于在apollo graphql变异和
浏览 17提问于2019-06-28得票数 0
1回答
我有一个使用阿波罗客户端的反应应用程序。我最初的查询是用户是否登录，它显示一个加载页面，直到服务器响应，以便它知道进入仪表板页面或登录页面。在开发过程中，一切都很好，即使我在构建项目时没有进行对接，但当我使用docker时，它显示了一次又一次请求初始查询的奇怪行为。服务器响应很好，但是useQuery在无限循环中发送另一个请求。
规范：
反应：v17.0.2apollo-client：v3.5.7node图像：v14.19.1server：django 3.2
不使用码头时的网络统计：
使用码头时的网络统计数据：
请求是无限的。
useQuery代码：
const { loadin
浏览 3提问于2022-06-14得票数 0
我使用的是最新的Apollo Hooks (v3.1.1) 我的代码看起来像- import { ApolloProvider, useMutation, useQuery } from '@apollo/react-hooks'
import ApolloClient, { gql } from 'apollo-boost'
import React from 'react'
const client = new ApolloClient({
uri: 'http://localhost:4000',
connect
浏览 10提问于2019-09-24得票数 0
回答已采纳
在阅读了许多关于如何处理Apollo React的重新身份验证的文章之后，我决定我需要编写自己的逻辑来处理检查过期的JWT、刷新令牌，然后继续操作。我不想从错误重定向到任何类型的登录页面，也不想等到错误发生才刷新我的令牌。
因此，我遵循了Apollo文档，在每个请求的头部附加了一个令牌。这个很好用：
const authLink = new ApolloLink((operation, forward) => {
operation.setContext(({ headers = {} }) => {
const token = localStorage.getItem
浏览 1提问于2019-09-18得票数 2
1回答
我刚开始使用react query，我尝试在初始加载时从post方法中获取数据，它可以工作，但是工具没有显示我的调用。有人能告诉我问题出在哪里吗？我做错什么了吗
const [snapshotData, setSnapShotData] = useState([]);
const snapshotFunc = useCallback(async () => {
const data = {
L3: null,
L4: null,
};
await axios
.post("/dashboard/snapshot/&
浏览 16提问于2022-06-20得票数 0
我正在尝试使用update:在执行变异后更新查询。问题是，存储中的查询应用了几个不同的变量，我希望更新查询并使用相同的变量返回它。
我在文档中发现，updateQueries可以选择包含queryVariables，这是执行查询时使用的最后一组变量。
我还没有找到任何描述如何从更新内部检索queryVariables或类似内容的内容。
在update内部:我可以使用
lastQuery = Object.keys(store.data.ROOT_QUERY).slice(-1)[0]
它将返回类似于"userRecipes({"first":20,"minTim
浏览 0提问于2017-08-17得票数 2
假设我有一个像这样的突变。
mutation SignInMutation($email: String!, $password: String!) {
signIn(input: {email: $email, password: $password}) {
token {
accessToken
accessTokenExpiresOn
}
}
}
如何使用react-apollo中的graphql函数类型将signIn方法添加到类中？
例如：
import SignInMutation from '~/mutations/SignI
浏览 0提问于2018-03-23得票数 7
我正在构建一个简单的购物应用程序。在加载时，我们将进行一个查询，以检查购物车是否存在。现在，这个查询总是返回null (我还没有实现逻辑来检查用户是否已经有购物车了)。然后，当用户单击"create“时，我们会做一个突变来创建它。最后，我们将在突变完成后使用refreshQueries通过ID获取购物车(及其产品)，该ID将从突变中返回。然后我们将这些产品呈现在一个纯组件中。
我遇到的问题是，在用户单击按钮并发生refreshQueries之后，没有任何重新呈现。我知道查询正在发送，并通过查看developer的网络选项卡返回一个带有产品的创建购物车。只是阿波罗似乎没有注意到这个变化。
浏览 4提问于2017-11-19得票数 0
回答已采纳
3回答
我是NextJS的新手。我有一个页面，需要显示从Hasura GraphQL后端提取的实时数据。
在其他非NextJS应用程序中，我在阿波罗客户端库中使用了GraphQL订阅。在引擎盖下，它使用websockets。
当GraphQL不使用订阅时，我可以让它在NextJS中工作。我很确定这是在服务器端运行的：
import React from "react";
import { AppProps } from "next/app";
import withApollo from 'next-with-apollo';
import { Apol
浏览 1提问于2020-05-12得票数 4
1回答
所以我在我的React Apollo应用程序上有一个表单，可以添加或更新用户。当接收到数据时，如果用户已经存在，Apollo就会知道并正确地合并/规范化数据。
如果不是，它不会做任何事情，我需要手动添加它，如下所示：
const result = await this.props.upsertPersonMutation({
variables: {
...this.state.fields,
},
update: (store, { data }) => {
浏览 7提问于2018-07-26得票数 1
回答已采纳
1回答
我使用的是Apollo Server / Client，缓存似乎不能处理更新突变。(创建、删除)。服务器得到更新，但在前端什么也没有发生。我必须重新加载页面才能显示新项目/显示项目的更改。 我遵循了Apollo docs，并模仿了他们的sandbox implementation。如果你需要更多我的代码，请告诉我，谢谢。 下面是我的代码： <form
onSubmit={(e) => {
e.preventDefault();
createUser(
{
var
浏览 33提问于2020-11-30得票数 0
我正在使用react-apollo@2.5.6
我有一个组件，当你点击它时，它将基于“选择”状态并发出add或remove操作。
目前我这样做是为了让2个突变函数注入到我的组件中。这是正确的做法吗？我可以只使用一个突变( HOC )而不是多个吗？
<Mutation mutation={ADD_STUFF}>
{(addStuff) => (
<Mutation mutation={REMOVE_STUFF}>
{(removeStuff) => {
在稍后的包装组件中，我将执行类似的操作
浏览 0提问于2019-06-07得票数 0
2回答
反应-阿波罗突变返回空反应
、、、、
我正在使用AWS Appsync，在这里，我希望从一个成功执行的突变中获得一个响应。当我在Appsync控制台中尝试安装时，我会得到一个填充的"data": { "mutateMeeting" }响应：
当我在自己的react应用程序中尝试同样的操作时，我可以在dynamodb数据库中看到，突变发生了，但是发生了反应--阿波罗没有返回突变响应。正如您在阿波罗开发工具中所看到的，"data": { "mutateMeeting" }是空：
我遗漏了什么？
相应的graphql模式读取：
input MeetingInpu
浏览 1提问于2018-08-20得票数 9
回答已采纳
2回答
贝格纳在这里。虽然使用单个端点使用在执行"ng添加阿波罗角“时使用的默认结构很好，但是当使用APOLLO_NAMED_OPTIONS添加第二个端点时，我会得到两个神秘的错误消息。会有什么问题吗？
这是我的graphql.module.ts文件
import {APOLLO_OPTIONS, APOLLO_NAMED_OPTIONS} from 'apollo-angular';
import { InMemoryCache, ApolloLink } from '@apollo/client/core';
import {HttpLink} from &
浏览 2提问于2020-12-04得票数 0
回答已采纳
我正在使用@apollo/client实现，但我没有看到任何使用react的@apollo/client的完整示例。如果我搜索，我就会得到apollo-client和apollo boost的例子。
3之间的区别是什么。，我知道@apollo/client是all的新版本。在哪里可以得到与@apollo/client react application?有关的的完整示例？
import { ApolloClient, InMemoryCache, ApolloLink, createHttpLink, defaultDataIdFromObject } from '@apollo/cl
浏览 4提问于2020-09-29得票数 8
回答已采纳
我正在使用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
我的问题的快速总结 我有一个getTracks查询，它将获取轨道数据，并接受一些参数进行排序/过滤(限制、偏移量、搜索、排序、顺序)。不幸的是，Apollo分别缓存了所有这些内容，所以当在一个视图中删除一个项目时，用户更改了排序顺序，而删除的项目仍然存在(因为它在缓存中有一组不同的参数)。 详细信息 这是getTracks查询和相关的输入类型(在我的服务器端AppSync模式中)： input SelectOptions {
limit: Int
offset: Int
sort: String
order: String
search: String
}
type Q
浏览 22提问于2019-02-25得票数 2
回答已采纳
这个问题对我来说一点意义都没有...我正在使用如下所示的变异将作者添加到数据库中：
this.props
.addAuthorMutation({
variables: {
name: this.state.name,
age: this.state.age
},
refetchQueries: [
{
query: getAuthorsQuery,
variables: {
awaitRefetch
浏览 0提问于2018-10-05得票数 2
在我的多次尝试中，我尝试使用react-apollo-hooks和formik一起使用，但似乎不太可能。表单中的数据仅在<Formik>标记中可用，否则无法在其外部访问。此外，我不能同时调用我的useMutation钩子并将参数传递给它：
const SignUp = () => {
const classes = useStyles();
// The react-apollo-hook for useMutation
// Its not hard to call this, but it seems impossible to call it,
// w
浏览 10提问于2019-07-19得票数 5
回答已采纳
也许我只是没有得到阿波罗链接状态做什么，但我想，如果我有一个“默认”值，这将显示在我的道具通过供应商。但是我找不到它。如何访问“缓存”或本地状态？
我有：
import { ApolloClient, createNetworkInterface } from 'react-apollo';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { withClientState } from 'apollo-link-state';
import dataIdFromObje
浏览 2提问于2019-02-06得票数 0
回答已采纳
2回答
GQL不会自动调用查询
、、、、
我有两个组件如下所示
SongList.js
import React, { Component } from 'react';
import gql from 'graphql-tag';
import { graphql } from 'react-apollo';
import { Link } from 'react-router';
class SongList extends Component {
renderSongs() {
return this.props.data.songs.map(song
浏览 0提问于2018-09-08得票数 0
1回答
突变两次与反应-采取
、、、、
我将react-adopt与react-apollo结合使用。这样做的简单原因是，在单个页面上进行大量查询和突变会变得非常混乱。
问题
当触发mut1时，只会发生一个突变。
当触发mut2时，mut2会触发，而mut1则会在mut2完成后触发。
如果我有一个mu3,4,5 etc，然后单击mut3，它将运行mut3 >mut2和
最后一个mut1，如果您运行mut5，它将执行4 > 3 > 2 > 1等操作.
组件
const mut1 = () => {
return (
<Mutation mutation={MUTA
浏览 0提问于2019-08-05得票数 4
我在这里使用的是快速图形库和阿波罗客户端。我正面临一个突变的问题
.......................................................................................................................
我的错误：
GraphQL错误:消息：“rootMutation”类型的"createUser“字段上的未知参数”电子邮件“，位置:对象对象，路径:未定义
当我点击注册按钮时，它会给我一个错误。我的组成部分：
import { useMutation } from "@
浏览 0提问于2019-09-08得票数 0
我正在尝试使用来自apollo/react-hooks的useMutation钩子，但一定是出了什么问题，因为它就是不能工作(我甚至没有要处理的错误) 下面是我的代码： import { useQuery, useMutation } from '@apollo/react-hooks';
import { gql } from 'apollo-boost';
import { API, graphqlOperation } from 'aws-amplify';
import { Button } from '@material-ui
浏览 22提问于2020-06-25得票数 1
当一个新的评论被创建时，我使用一个突变后的更新来更新商店。我也订阅了这个页面上的评论。
这两种方法中的任何一种都能按照自己的期望工作。但是，如果两者都有，那么创建注释的用户将在页面上看到该注释两次，并从React获得此错误：
Warning: Encountered two children with the same key,
我认为这是因为突变更新和订阅都会返回一个新节点，从而创建一个重复的条目。对此有推荐的解决方案吗？我无法在阿波罗的文档中看到任何东西，但在我看来，这并不是一个很有优势的用例。
这是具有我的订阅的组件：
import React from 'react';
浏览 0提问于2018-03-16得票数 9
回答已采纳
react-apollo中的Mutation组件在render prop函数中公开了一个方便的loading布尔值，该布尔值非常适合在发出请求时向UI添加加载器。在下面的示例中，我的Button组件在单击时调用createPlan函数，这会引发GraphQL突变。在此过程中，loading道具提供的按钮上会出现一个微调器。 <Mutation mutation={CREATE_PLAN}>
{(createPlan, { loading }) => (
<Button
onClick={() => createPlan({ variabl
浏览 40提问于2019-05-29得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
