与 Apollo GraphQL 存储的交互不起作用答案

【问题标题】：Interaction with Apollo GraphQL Store not Working与 Apollo GraphQL 存储的交互不起作用
【发布时间】：2020-04-21 19:01:39
【问题描述】：

我正在尝试通过使用 React 为前端和 Material-UI 开发一个简单的待办事项列表应用程序来学习 GraphQL。我现在需要在查询执行后实时更新 Web 应用程序上的信息。我编写了代码来更新商店，但由于某种原因它不起作用。这是App.js 的代码。

const TodosQuery = gql`{
  todos {
    id
    text
    complete
  }
}`;

const UpdateMutation = gql`mutation($id: ID!, $complete: Boolean!) {
  updateTodo(id: $id, complete: $complete)
}`;

const RemoveMutation = gql`mutation($id: ID!) {
  removeTodo(id: $id)
}`;

const CreateMutation = gql`mutation($text: String!) {
  createTodo(text: $text) {
    id
    text
    complete
  }
}`;

class App extends Component {
  updateTodo = async todo => {
    await this.props.updateTodo({
      variables: {
        id: todo.id,
        complete: !todo.complete,
      },
      update: (store) => {
        const data = store.readQuery({ query: TodosQuery });
        data.todos = data.todos.map(existingTodo => existingTodo.id === todo.id ? {
          ...todo,
          complete: !todo.complete,
        } : existingTodo);
        store.writeQuery({ query: TodosQuery, data })
      }
    });
  };
  
  removeTodo = async todo => {
    await this.props.removeTodo({
      variables: {
        id: todo.id,
      },
      update: (store) => {
        const data = store.readQuery({ query: TodosQuery });
        data.todos = data.todos.filter(existingTodo => existingTodo.id !== todo.id);
        store.writeQuery({ query: TodosQuery, data })
      }
    });
  };

  createTodo = async (text) => {
    await this.props.createTodo({
      variables: {
        text,
      },
      update: (store, { data: { createTodo } }) => {
        const data = store.readQuery({ query: TodosQuery });
        data.todos.unshift(createTodo);
        store.writeQuery({ query: TodosQuery, data })
      },
    });
  }

  render() {
    const { data: { loading, error, todos } } = this.props;
    if(loading) return <p>Loading...</p>;
    if(error) return <p>Error...</p>;

    return(
      <div style={{ display: 'flex' }}>
        <div style={{ margin: 'auto', width: 400 }}>
          <Paper elevation={3}>
            <Form submit={this.createTodo} />
            <List>
              {todos.map(todo => 
                <ListItem key={todo.id} role={undefined} dense button onClick={() => this.updateTodo(todo)}>
                  <ListItemIcon>
                    <Checkbox checked={todo.complete} tabIndex={-1} disableRipple />
                  </ListItemIcon>
                  <ListItemText primary={todo.text} />
                  <ListItemSecondaryAction>
                    <IconButton onClick={() => this.removeTodo(todo)}>
                        <CloseIcon />
                    </IconButton>
                  </ListItemSecondaryAction>
                </ListItem>
              )}
            </List>
          </Paper>
        </div>
      </div>
    );
  }
}

export default compose(
  graphql(CreateMutation, { name: 'createTodo' }),
  graphql(UpdateMutation, { name: 'updateTodo' }),
  graphql(RemoveMutation, { name: 'removeTodo' }),
  graphql(TodosQuery)
)(App);

另外，我想创建一些列表项，但这也不起作用。我正在尝试使用输入字段的onKeyDown 中的处理函数handleOnKeyDown() 实时获取输入字段中输入的文本。我将事件e 作为参数传递给handleOnKeyDown(e)，当我console.log(e) 它时，它没有记录输入的文本，而是返回一个我不需要的奇怪对象。这是处理表单操作的代码：

export default class Form extends React.Component{
    state = {
        text: '',
    }

    handleChange = (e) => {
        const newText = e.target.value;
        this.setState({
            text: newText,
        });
    };

    handleKeyDown = (e) => {
        console.log(e);
        if(e.key === 'enter') {
            this.props.submit(this.state.text);
            this.setState({ text: '' });
        }
    };

    render() {
        const { text } = this.state;
        return (<TextField onChange={this.handleChange} onKeyDown={this.handleKeyDown} label="To-Do" margin='normal' value={text} fullWidth />);
    }
}

上面的代码文件包含在我的App.js 中。

我无法找出问题所在。请帮忙。

【问题讨论】：

标签： reactjs graphql apollo react-apollo

【解决方案1】：

我遇到了类似的问题。为我解决的问题是将 update 替换为 refetchQueries 为：

updateTodo = async todo => {
    await this.props.updateTodo({
      variables: {
        id: todo.id,
        complete: !todo.complete
      },
      refetchQueries: [{
        query: TodosQuery,
        variables: {
          id: todo.id,
          complete: !todo.complete
        }
      }]
    });
  };

对于第二个问题，尝试将“enter”中的“e”大写为“Enter”。希望这会有所帮助！

【讨论】：