How to notify other components of GraphQL mutation

Question

Let's imagine I'm developing a simple todo app, and in terms of react components it's structured like this (not actual react code)

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

TodoList component is wrapped in graphql(gql '..some query') HOC, and also into graphql(qql'..some mutation') to handle querying of todo items and toggling their done state; When a mutation is invoked TodoList component knows to rerender itself with fresh data.

AddTodo is wrapped with another HOC adding another mutation to add new todo item. However triggering it doesn't re-render TodoList.

This little app doesn't have any state management like redux, my understanding is that React-Apollo is meant to replace redux. Why does refresh happen automatically in TodoList and how to propagate refresh from AddTodo ?

tuan.tran tuan.tran · Accepted Answer · 2018-04-12T03:19:56

There are many way to notify TodoList that a new Todo is added

Update your cache store after you do mutation by update option. Example:

...
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})
 }
})
...

Use Subscription and subscribeToMore option follow the instruction here

How to notify other components of GraphQL mutation

1 Answers