web-dev-qa-db-fra.com

React-Apollo Mutation renvoie une réponse vide

J'utilise AWS Appsync pour lequel je souhaite obtenir une réponse d'une mutation exécutée avec succès. Lorsque je teste ma configuration dans la console Appsync Graphql, la réponse "data": { "mutateMeeting" } est remplie:  Appsync mutation

Lorsque j'essaie la même chose dans mon application react, je vois dans la base de données dynamodb que les mutations se produisent, mais react-apollo ne renvoie pas la réponse à la mutation. Comme vous pouvez le voir dans l'outil de développement apollo, le "data": { "mutateMeeting" } est null :  enter image description here

Qu'est-ce que je rate?

Le schéma graphql correspondant lit:

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

la mutation graphql-tag lit:

import gql from 'graphql-tag'

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

et le react-apollo inklusion est donné par:

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)

Demande 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)
  }
}

Réponse Appsync :

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

On dirait qu'il y a un problème en suspens pour ce bogue ici . Il y a des détails supplémentaires dans ce numéro original aussi.

Les informations utilisateur dans SessionQuery seront initialement mises en cache et surveillées par le composant UserProfile. Lorsque la propriété UpdateAvatarMutation est exécutée et renvoyée, la requête du composant UserProfile recevra des données vides. Plusieurs autres ont également observé ce comportement et l'ont tous attribué à un chevauchement imparfait entre les champs interrogés/mis en cache et les champs renvoyés sur la mutation (dans cet exemple, il manque du courrier électronique dans le nœud Utilisateur sur les résultats renvoyés.

En d'autres termes, si vous avez une requête qui renvoie le même type d'objet et que les champs entre la requête et la mutation ne correspondent pas, il est possible que vous obteniez des données nulles. Son comportement n'est pas attendu, mais s'il s'agit du problème sous-jacent dans ce cas, vous pouvez essayer de vous assurer que les champs demandés sont les mêmes pour votre requête et votre mutation. 

1
Daniel Rearden

Dans mon cas, j'ai dû écrire une fonction update dans la mutation afin d'obtenir les données retournées.

Essayez de changer votre mutation à ceci et regardez dans la console pour voir si cela change quoi que ce soit:

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

La fonction update peut être appelée plusieurs fois, mais vous devriez éventuellement voir vos données être renvoyées comme prévu.

C'est ce qui a fonctionné pour moi. Si vous le souhaitez, vous pouvez consulter ma question et voir si cela aide: Réagir Apollo - Effet étrange lors de la mutation?

0
Z_z_Z