web-dev-qa-db-ja.com

React-ApolloMutationは空の応答を返します

正常に実行されたミューテーションから応答を取得したいAWSAppsyncを使用しています。 Appsync Graphqlコンソールでセットアップを試してみると、"data": { "mutateMeeting" }の応答がいっぱいになります： Appsync mutation

Dynamodbデータベースで確認できるreactアプリケーションで同じことを試してみると、ミューテーションが発生しますが、react-apolloはミューテーション応答を返しません。 apollo devツールでわかるように、"data": { "mutateMeeting" }はnull： enter image description here

何が足りないのですか？

対応するgraphqlスキーマは次のようになります。

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!
}

graphql-tagミューテーションは次のようになります。

import gql from 'graphql-tag'

export default gql`
  mutation mutateMeeting($companyId: String!, $meeting: MeetingInput!) {
    mutateMeeting(companyId: $companyId, meeting: $meeting) {
      id,
      start,
      end
    }
  }
`

そしてreact-apolloインクリュージョンは次のように与えられます：

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リクエスト

#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応答：

#set( $meeting = $context.result.data.Vysae[1] )
{
  "id": "$meeting.PK",
  "start": "$meeting.start",
  "end": "$meeting.end"
}
reactjsgraphqlapolloreact-apolloaws-appsync
9
Knowledge

このバグには未解決の問題があるようです ここ 。 この元の問題 にも追加の詳細があります。

SessionQueryのユーザー情報は、最初にキャッシュされ、UserProfileコンポーネントによって監視されます。 UpdateAvatarMutationが実行されて返されると、UserProfileコンポーネントのクエリは空のデータを受け取ります。他のいくつかもこの動作を観察し、クエリされた/キャッシュされたフィールドとミューテーションで返されるフィールドの間の不完全なオーバーラップにそれを追跡しました（この例では、ミューテーションの返された結果でユーザーノードから電子メールが欠落しています。

つまり、同じタイプのオブジェクトを返すクエリがあり、クエリとミューテーションの間のフィールドに不一致がある場合、データがnullになる可能性があります。これは予期された動作ではありませんが、これがこの場合の根本的な問題である場合は、要求されたフィールドがクエリとミューテーションの両方で同じであることを確認してみてください。

1
Daniel Rearden

私の場合、データを返すために、ミューテーションにupdate関数を記述する必要がありました。

ミューテーションをこれに変更してみて、コンソールを見て、これが何かを変更するかどうかを確認してください。

mutateMeeting({
  variables,
  update: (proxy, {data: {mutateMeeting}}) => {
     console.log("Update: ", mutateMeeting);
  }
}).then(({data}) => console.log('got data', data))
  .catch(err => console.log(err))
}

update関数は数回呼び出される可能性がありますが、最終的には期待どおりにデータが返されるはずです。

これは私のために働いたものです。必要に応じて、私の質問を見て、それが役立つかどうかを確認できます： React Apollo-突然変異を起こすときの奇妙な効果？

1
Z_z_Z