我已经使用 React-Apollo 设置了一个 React 应用程序，并且可以成功查询我的 API。

但是，当我进行突变时，会出现奇怪的效果。我成功取回了所有数据（如 Chrome 开发工具的网络选项卡中所示），但是在尝试获取console.log数据时，它说它是null.

这是相关的代码：

// mutation file

import gql from "graphql-tag";
export default gql`
  mutation CreateReservation($name: String!, $time: String!, $persons: String, $specialMessage: String, $email: String!) {
    createReservation(input: {
        name: $name,
        time: $time,
        persons: $persons,
        specialMessage: $specialMessage,
        email: $email
    }) {
        __typename
        error
        data
    }
  }
`;

// component file

import React from "react";
import {graphql, compose} from "react-apollo";
import CreateReservationMutation from "../../graphql/mutations/api/CreateReservation";

class Reservations extends React.Component {
testGraphQL = ({ reservationName, reservationTime, reservationEmail, reservationPartySize, reservationMessage}) => {

    const variables = {
        name: reservationName,
        time: reservationTime,
        persons: reservationPartySize,
        specialMessage: reservationMessage,
        email: reservationEmail
    };

    this.props.createReservation(variables)
    .then(({data}) => {
        console.log("Data received: ", data); // Here is the problem
    }).catch((err) => {
        console.log("Error sending data: ", err);
    })
}
render() {
    return (
        <div>
            ...
            <div>
                <Form 
                    ...
                    submitFunc={this.testGraphQL}
                />
            </div>
            ...
            </div>
        </div>
    )
  }
}

export default compose(
    graphql(CreateReservationMutation, {
        props: ({mutate}) => ({
            createReservation: (variables) => mutate({variables})
        })
    })
)(Reservations);

因此，当我调用该testGraphQL函数时，我在控制台中收到以下信息：

Data received:  {createReservation: null}

但是在查看网络选项卡时，我发现数据实际上就在那里，而且正是我正在寻找的。此外，我的数据库已正确更新了所有预订详细信息，因此我确信正在执行更改。

这是我从“网络”选项卡中看到的：

{"data":{"createReservation":{"__typename":"ReservationResponse","error":null,"data":"Success"}}}

这就是我希望看到，当我打电话console.log在testGraphQL。

所以我知道我的模式、我的 Apollo 客户端或我的突变文件没有任何错误。

相反，问题必须在于我如何设置我的compose陈述或我如何调用突变本身。

如果您在这里发现错误，请告诉我。谢谢

更新

我应该提到我使用 AWS AppSync 作为我的 GraphQL 提供程序。

突变调用执行以下操作的 lambda 函数：

...
Promise.all([dynamodbPromise, snsPromise, sesPromise])
    .then((data) => {
        callback(null, {data: "Success"});
    })
    .catch((err) => {
        callback(null, {error: err});
    });

这是我对此突变的解析器：

// request mapping template

{
  "version" : "2017-02-28",
  "operation": "Invoke",
  "payload": $util.toJson($ctx.args.input)
}

//  response mapping template

$util.toJson($context.result)

更新 2

optimisticResonse像这样配置和重写我的突变：

this.props.createReservation({
        variables,
        optimisticResponse: {
            createReservation: {
                __typename: "ReservationResponse",
                errorMessage: null,
                responseMessage: "_TEST_"
            }
        }
    })
    .then(res => {
        console.log("Apllo Data: ", res);
    })

导致我只从乐观响应中获取数据，即：

{data:
  createReservation: {
    __typename: "ReservationResponse", 
    errorMessage: null, 
    responseMessage: "Optimistic Success"
}

因此，返回的数据不得使用来自 API 的实际响应进行更新。

在返回乐观响应后，我现在如何强制 Apollo 更新响应？