Question

我正在关注本教程：https://egghead.io/lessons/react-execute-mutations-to-an-aws-appsync-graphql-api-from-a-react-application

我有一个简单的todo react应用，可通过放大连接到AppSync。查询和突变由Amplify自动生成。

使用graphqlMutation帮助程序，应该可以在运行我的变异后自动更新我的查询，但是它不起作用。刷新后，我确实看到了这些突变正在更新AppSync后端，但我也希望它能以乐观的响应立即更新。

代码如下：

import React, { Component } from "react";
import gql from "graphql-tag";
import { compose, graphql } from "react-apollo";
import { graphqlMutation } from "aws-appsync-react";
import { listTodos } from "./graphql/queries";
import { createTodo, deleteTodo } from "./graphql/mutations";

class App extends Component {
  state = { todo: "" };

  addTodo = async () => {
    if (this.state.todo === "") {
      return;
    }

    const response = await this.props.createTodo({
      input: {
        name: this.state.todo,
        completed: false
      }
    });

    this.setState({ todo: "" });
    console.log("response", response);
  };

  deleteTodo = async id => {
    const response = await this.props.deleteTodo({ input: { id } });
    console.log("response", response);
  };

  render() {
    return (
      <div>
        <div>
          <input
            onChange={e => this.setState({ todo: e.target.value })}
            value={this.state.todo}
            placeholder="Enter a name..."
          />
          <button onClick={this.addTodo}>Add</button>
        </div>
        {this.props.todos.map(item => (
          <div key={item.id}>
            {item.name}{" "}
            <button onClick={this.deleteTodo.bind(this, item.id)}>
              remove
            </button>
          </div>
        ))}
      </div>
    );
  }
}

export default compose(
  graphqlMutation(gql(createTodo), gql(listTodos), "Todo"),
  graphqlMutation(gql(deleteTodo), gql(listTodos), "Todo"),
  graphql(gql(listTodos), {
    options: {
      fetchPolicy: "cache-and-network"
    },
    props: props => ({
      todos: props.data.listTodos ? props.data.listTodos.items : []
    })
  })
)(App);

包含代码库的存储库在这里：https://github.com/jbrown/appsync-todo

在这里我的查询没有更新，这是怎么做的？

Answer 1

您的输入仅包含属性name和completed。工具graphqlMutation将自动添加id。

代码不包含列表查询，我猜想比查询请求的数据要多于name，completed和id。

因此，由于缺少必填信息，因此不会将其添加到列表中。

解决方案是将所有列出的属性添加到createTodo。

AWS Appsync graphqlMutation助手未更新查询

1 个答案: