Reactjs Apollo之后会触发不必要的重新蚀刻

我正在用React Apollo和GraphQL构建一个小的待办事项列表应用程序。为了添加新的待办事项，我单击“添加”按钮，将我重定向到具有表单的其他URL。在表单提交时，我执行

变异

，并使用

更新

功能更新缓存。缓存已成功更新，但只要我返回带有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 (
  ...
  );
};

const ToDoList=（）=>{
const{data，loading，error}=useQuery（GET_TODO_LIST）；
如果（装载）返回装载。。。；
如果（错误| |！加载）返回错误；
返回(
...
);
};

按预期工作

为什么不必要？另一页，新组件，新鲜

useQuery

hook。。。默认（？）

fetchPolicy

“缓存和网络”

将使用缓存数据（如果存在）进行渲染（快速、一次性），但也会发出请求以确保使用当前数据

---

您可以强制

“仅缓存”

，但如果缓存中没有数据，它可能会失败，它不会发出请求。

但当我返回时，所有最新的项目都存储在缓存中（手动或使用history.push（）），这就是为什么我要避免网络请求它真的值得特别处理吗？你真的需要特殊的应用状态来标记它是新的/这次使用“仅缓存”？在这种状态下需要多长时间？10秒还是2分钟？其他客户端/用户可以在页面/视图更改期间更改此/某些公共/共享数据。我只是想发现一些选项。当然，这样的行为并不总是合理的，但很高兴知道您可以使用特定的工具做什么。