Unnecessary refetch is triggered after mutation React Apollo

Question

I'm building a small ToDo list app with React Apollo and GraphQL. In order to add a new ToDo item I click "Add" button that redirects me to a different URL that has a form. On form submit I perform a mutation and update the cache using update function. The cache gets updated successfully but as soon as I return to the main page with ToDo list, the component triggers an http request to get the ToDo list from the server. How do I avoid that additional request and make ToDoList component pull data from the cache ?

My AddToDo component:

const AddToDo = () => {
  const { inputValue, handleInputChange } = useFormInput();

  const history = useHistory();
  const [addToDo] = useMutation(ADD_TODO);

  const onFormSubmit = (e) => {
    e.preventDefault();
    addToDo({
      variables: { title: inputValue },
      update: (cache, { data: { addToDo } }) => {
        const data = cache.readQuery({ query: GET_TODO_LIST });
        cache.writeQuery({
          query: GET_TODO_LIST,
          data: {
            todos: [...data.todos, addTodo],
          },
        });
        history.push("/");
      },
    });
  };

  return (
    ...
  );
};

And ToDoList component

 const ToDoList = () => {
 const { data, loading, error } = useQuery(GET_TODO_LIST);

  if (loading) return <div>Loading...</div>;
  if (error || !loading) return <p>ERROR</p>;
  

  return (
  ...
  );
};

xadm xadm · Accepted Answer · 2020-07-01T18:30:49

Works as expected.

Why unecessary? Another page, new component, fresh useQuery hook ... default(?) fetchPolicy "cache-and-network" will use cached data (if exists) to render (quickly, at once) but also will make request to be sure current data used.

You can force "cache-only" but it can fail if no data in cache, it won't make a request.

Unnecessary refetch is triggered after mutation React Apollo

1 Answers