突变 React Apollo 后触发了不必要的重新获取

Question

我正在使用 React Apollo 和 GraphQL 构建一个小型 ToDo 列表应用程序。为了添加新的 ToDo 项目，我单击“添加”按钮，将我重定向到具有表单的不同 URL。在提交表单时，我执行mutation 并使用update 函数更新缓存。缓存已成功更新，但当我返回带有 ToDo 列表的主页时，该组件会触发一个 http 请求以从服务器获取 ToDo 列表。如何避免该额外请求并使ToDoList 组件从缓存中提取数据？

我的AddToDo 组件：

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

还有ToDoList组件

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

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

  return (
  ...
  );
};

Answer 1

按预期工作。

为什么没有必要？另一个页面，新组件，新鲜的useQuery hook ... default(?) fetchPolicy "cache-and-network" 将使用缓存数据（如果存在）来呈现（快速，一次），但也会请求确保当前数据用过。

您可以强制"cache-only"，但如果缓存中没有数据，它可能会失败，它不会发出请求。