Question

让我们想象一下，我正在开发一个简单的待办事项应用程序，就反应组件而言，它的结构是这样的（不是实际的反应代码）

<AddTodo />
<TodoList>
  <TodoItem ..>
  <TodoItem ..>
</TodoList>

TodoList组件包含在graphql(gql '..some query') HOC中，也包含在graphql(qql'..some mutation')中，用于处理待办事项和切换其done状态;当调用变异时，TodoList组件知道用新数据重新渲染自己。

AddTodo包含另一个HOC，添加另一个突变以添加新的待办事项。但触发它不会重新渲染TodoList。

这个小应用程序没有像redux这样的状态管理，我的理解是React-Apollo意味着要取代redux。为什么在TodoList中自动进行刷新以及如何从AddTodo传播刷新？

Answer 1

有很多方法可以通知TodoList添加了新的Todo

按update选项进行变异后更新缓存存储。例如：

...
this.props.addTodo({
 variables: {
  content: text,
 },
 update: (store, { data: { addTodo } }) => {
  const data = store.readQuery({query: your_query_name})
  // do update store here ...
  store.writeQuery({query: your_query_name, data})
 }
})
...

使用Subscription和subscribeToMore选项，按照说明here

如何通知GraphQL突变的其他组件

1 个答案: