React-Apollo Mutation 返回空响应 [英] React-Apollo Mutation returns empty response
问题描述
我正在使用 AWS Appsync，我想从成功执行的突变中获得响应.当我在 Appsync Graphql 控制台中尝试设置时，我得到一个填充的 "data": { "mutateMeeting" } 响应:
当我在我的 react 应用程序中尝试相同的操作时，我可以在 dynamodb 数据库中看到发生了突变，但是 react-apollo 不会返回突变响应.正如您在 apollo 开发工具中看到的，"data": { "mutateMeeting" } 是 null :
我错过了什么?
对应的graphql schema如下:
input MeetingInput {id:字符串，开始:字符串！，结束:字符串！，协议:[协议输入]！}输入会议{id:字符串！开始:字符串！结束:字符串！协议:【协议】}类型突变{变异会议(公司 ID:字符串！，会议:会议输入！): 会议！}graphql-tag 突变如下:
从'graphql-tag'导入gql导出默认 gql`突变 mutateMeeting($companyId: String!, $meeting: MeetingInput!) {mutateMeeting(companyId: $companyId, meeting: $meeting) {ID，开始，结尾}}`和 react-apollo 暗示是:
import React, { Component } from 'react'//蚂蚁从'antd'导入{旋转}//图形从反应阿波罗"导入 { compose, graphql }从'../queries/mutateMeeting'导入mutateMeeting类 MeetingStatus 扩展组件 {componentDidMount() {const { mutateMeeting, meeting } = this.propsconsole.log(会议)常量变量 = {companyId:会议.company.id，会议: {开始:meeting.start.toISOString(),结束:meeting.end.toISOString(),协议:会议.协议，}}控制台日志(变量)mutateMeeting({变量}).then(({data}) => console.log('got data', data)).catch(err => console.log(err))}使成为() {控制台日志(this.props)返回<div>convocado</div>}}const MeetingStatusWithInfo = compose(graphql(mutateMeeting，{名称:'mutateMeeting'}))(会议状态)导出默认值 (MeetingStatusWithInfo)应用同步请求
#set($uuid = $util.autoId())#set($batchData = [])#set( $meeting = ${context.arguments.meeting} )## 公司#set( $meetingMap = {PK":$context.arguments.companyId，"SK" : "会议-$uuid",开始":$meeting.start，结束":$meeting.end})$util.qr($batchData.add($util.dynamodb.toMapValues($meetingMap)))## 会议$util.qr($meetingMap.put("PK", $meetingMap.SK))$util.qr($batchData.add($util.dynamodb.toMapValues($meetingMap)))## 协议#foreach($meeting.agreements 中的 $agreement)#set( $agreementId = $util.autoId())#set( $agreementMap = {"PK" : $meetingMap.SK,"SK": "Agreement-$agreementId",名称":$agreement.name})$util.qr($batchData.add($util.dynamodb.toMapValues($agreementMap)))#结尾{"版本": "2018-05-29","操作" : "BatchPutItem",表":{"Vysae": $utils.toJson($batchData)}}Appsync 响应:
#set( $meeting = $context.result.data.Vysae[1] ){"id": "$meeting.PK","start": "$meeting.start","end": "$meeting.end"}看起来这个 bug 有一个未解决的问题 此处.这个原始问题中还有其他详细信息.
<块引用>SessionQuery 中的用户信息最初会被 UserProfile 组件缓存和监视.当 UpdateAvatarMutation 执行并返回时，UserProfile 组件中的查询将收到空数据.其他几个人也观察到了这种行为，并且都将其追溯到查询/缓存字段与突变返回的字段之间的不完美重叠(在此示例中，突变返回结果的用户节点中缺少电子邮件.
换句话说，如果您有一个返回相同类型对象的查询，并且查询和突变之间的字段不匹配，那么您最终可能会得到空数据.这不是预期的行为，但如果这是这种情况下的潜在问题，您可以尝试确保查询和突变的请求字段相同.
I am using AWS Appsync where I want to get a response from a successfully executed mutation. When I try my setup in the Appsync Graphql console I get a filled "data": { "mutateMeeting" } response:
When I try the same in my react application I can see in the dynamodb database, that the mutations happen, but react-apollo does not return the mutation response. As you can see in the apollo dev tool, the "data": { "mutateMeeting" } is null :
What am I missing?
The corresponding graphql schema reads:
input MeetingInput {
id: String,
start: String!,
end: String!,
agreements: [AgreementInput]!
}
type Meeting {
id: String!
start: String!
end: String!
agreements: [Agreement]
}
type Mutation {
mutateMeeting (
companyId: String!,
meeting: MeetingInput!
): Meeting!
}
the graphql-tag mutation reads:
import gql from 'graphql-tag'
export default gql`
mutation mutateMeeting($companyId: String!, $meeting: MeetingInput!) {
mutateMeeting(companyId: $companyId, meeting: $meeting) {
id,
start,
end
}
}
`
and the react-apollo inklusion is given by:
import React, { Component } from 'react'
// antd
import { Spin } from 'antd'
// graphql
import { compose, graphql } from 'react-apollo'
import mutateMeeting from '../queries/mutateMeeting'
class MeetingStatus extends Component {
componentDidMount() {
const { mutateMeeting, meeting } = this.props
console.log(meeting)
const variables = {
companyId: meeting.company.id,
meeting: {
start: meeting.start.toISOString(),
end: meeting.end.toISOString(),
agreements: meeting.agreements,
}
}
console.log(variables)
mutateMeeting({
variables
}).then(({data}) => console.log('got data', data))
.catch(err => console.log(err))
}
render() {
console.log(this.props)
return <div>convocado</div>
}
}
const MeetingStatusWithInfo = compose(
graphql(mutateMeeting, { name: 'mutateMeeting' })
)(MeetingStatus)
export default (MeetingStatusWithInfo)
Appsync request
#set($uuid = $util.autoId())
#set($batchData = [])
#set( $meeting = ${context.arguments.meeting} )
## Company
#set( $meetingMap = {
"PK" : $context.arguments.companyId,
"SK" : "Meeting-$uuid",
"start" : $meeting.start,
"end" : $meeting.end
} )
$util.qr($batchData.add($util.dynamodb.toMapValues($meetingMap)))
## Meeting
$util.qr($meetingMap.put("PK", $meetingMap.SK))
$util.qr($batchData.add($util.dynamodb.toMapValues($meetingMap)))
## Agreements
#foreach($agreement in $meeting.agreements)
#set( $agreementId = $util.autoId())
#set( $agreementMap = {
"PK" : $meetingMap.SK,
"SK" : "Agreement-$agreementId",
"name" : $agreement.name
} )
$util.qr($batchData.add($util.dynamodb.toMapValues($agreementMap)))
#end
{
"version" : "2018-05-29",
"operation" : "BatchPutItem",
"tables": {
"Vysae": $utils.toJson($batchData)
}
}
Appsync response:
#set( $meeting = $context.result.data.Vysae[1] )
{
"id": "$meeting.PK",
"start": "$meeting.start",
"end": "$meeting.end"
}
Looks like there's an open issue for this bug here. There's additional details in this original issue as well.
The user information in the SessionQuery will initially be cached and watched by the UserProfile component. When the UpdateAvatarMutation executes and returns, the query in the UserProfile component will receive empty data. Several others have also observed this behavior and all traced it to an imperfect overlap between the queried/cached fields and the fields returned on the mutation (in this example, email is missing from the User node on the mutation's returned results.
In other words, if you have a query that returns the same type of object, and there's a mismatch in the fields between the query and the mutation, it's possible you will end up with null data. It's not expected behavior, but if this is the underlying issue in this case, you could try to ensure the requested fields are the same for both your query and mutation.
这篇关于React-Apollo Mutation 返回空响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
