Помощник AWS Appsync graphqlMutation не обновляет запрос - PullRequest
Новая
       35

Помощник AWS Appsync graphqlMutation не обновляет запрос

1 голос
/ 19 марта 2019

Я слежу за этим уроком: https://egghead.io/lessons/react-execute-mutations-to-an-aws-appsync-graphql-api-from-a-react-application

У меня есть простое приложение, реагирующее на реакцию, подключенное к 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

Что я делаю не так, что мой запрос не обновлен?

1 Ответ

0 голосов
/ 15 мая 2019

Ваш вход содержит только свойства name и completed.Инструмент graphqlMutation автоматически добавит id.

Код не содержит запроса списка, я могу предположить, что запрос был запрошен для большего количества данных, чем name, completed и id.

Таким образом, элемент не будет добавлен в список из-за отсутствия необходимой информации.

Решение - добавить все перечисленные свойства в createTodo.

...