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

当我在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更新响应？

Answer 1

您有两种选择来获取突变的数据响应：

在“突变”组件中：

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

或在变异函数中：

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

您正在获得mutate promise响应，但是您希望apollo传递给Mutation组件的状态对象。

阿波罗传递状态对象是没有意义的，因为如果突变成功解决，那么任何错误都会使诺言被拒绝，并且在mutate调用期间不会提供任何加载状态。

因此，要修复您的代码，只需更改此内容

this.props.createReservation(variables)
    .then(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);
    })

更新函数被调用了三次。如我的“更新2”部分所示，在兑现承诺之前的前两次触发包括optimisticResponse中的数据。最后，第三个调用从API返回实际数据。

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

谢谢，我希望我们能帮助遇到此问题的其他人。

Answer 3

您只需使用 res.data

即可访问返回的属性。

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

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

3 个答案: