阿波罗反应-突变时的奇怪效果？

Question

我已经用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"}}}

这就是我在调用控制台时希望看到的。在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的实际响应一起更新。

在返回乐观的回应后，我现在如何才能迫使阿波罗更新回应？

Answer 1

只需使用res.data即可访问返回的属性

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

Answer 2

我终于解决了这个问题，尽管解决方案并不理想。

我不得不为我的突变编写一个更新函数。这是一个准系统实现，最终为我提供了来自API的实际数据：

this.props.createReservation({
        variables,
        optimisticResponse: {
            createReservation: {
                __typename: "ReservationResponse",
                errorMessage: null,
                responseMessage: "Optimistic Success"
            }
        },
        update: (proxy, {data: {createReservation}}) => {
            console.log("Update: ", createReservation);
        }
    })
    .then(res => {
        console.log("Apllo Data: ", res);
    })

update函数被调用了三次。解决promise之前的前两次激发，包括来自optimisticResponse的数据，如我的“更新2”部分所示。第三个调用最终从API返回实际数据。

虽然这暂时有效，但请告诉我这里是否有更直接的方法。在这种情况下，我根本不希望返回乐观响应。我只希望返回我的API中的实际数据。这样，如果出现问题，我可以为我的用户提供适当的错误处理。

谢谢你，我希望我们能帮助其他有这个问题的人。

Answer 3

有两种方法可以从突变中获取数据响应：

在突变成分中：

<Mutation>{mutation, {data}}</Mutation>

或者在突变函数中：

mutate().then(data => ...)

您正在进入突变promise响应，但您期望阿波罗传递给突变组件的状态对象。

apollo传递state对象是没有意义的，因为如果变异成功解决，任何错误都会导致promise被拒绝，并且在mutate调用期间不会提供加载状态。

所以要修复代码，只需更改

this.props.createReservation(variables)
    .then(data => {