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钩子... default（？）fetchPolicy "cache-and-network"将使用缓存的数据（如果存在）立即（一次）呈现，但也会要求确保使用了当前数据。

您可以强制"cache-only"，但是如果缓存中没有数据，它将无法发出请求。

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

1 个答案: