Apollo Optimistic UI 在 Mutation 组件中不起作用

Java

Apollo Optimistic UI 在 Mutation 组件中不起作用？

在使用 Apollo Client 进行数据管理和状态管理时，我们经常会遇到需要进行数据更新和变更的情况。对于这种情况，Apollo 提供了 Optimistic UI（乐观 UI）的功能，使得我们可以在进行数据变更时，提前更新 UI，从而提高用户体验。然而，有时候我们可能会发现，在 Mutation 组件中使用 Optimistic UI 并不起作用。本文将探讨为什么在某些情况下 Apollo Optimistic UI 在 Mutation 组件中不起作用，并提供解决方案。

案例代码

为了更好地理解问题和解决方案，我们先来看一个简单的案例代码。假设我们有一个简单的 TodoList 应用，我们可以通过 Mutation 组件添加一个新的 Todo 项，并使用 Optimistic UI 提前更新 UI。

首先，我们需要定义一个 Mutation：

Javascript
const ADD_TODO = gql<code>
  mutation AddTodo($text: String!) {
    addTodo(text: $text) {
      id
      text
    }
  }
</code>;

接下来，我们使用 Mutation 组件来执行这个 Mutation：

Javascript
const AddTodoForm = () => {
  const [text, setText] = useState('');
  const [addTodo, { loading }] = useMutation(ADD_TODO, {
    optimisticResponse: {
      __typename: 'Mutation',
      addTodo: {
        __typename: 'Todo',
        id: -1,
        text: text,
      },
    },
    update: (cache, { data: { addTodo } }) => {
      const { todos } = cache.readQuery({ query: GET_TODOS });
      cache.writeQuery({
        query: GET_TODOS,
        data: { todos: [...todos, addTodo] },
      });
    },
  });
  const handleSubmit = (e) => {
    e.preventDefault();
    addTodo({ variables: { text } });
    setText('');
  };
  return (
    <form onSubmit={handleSubmit}>
      <input</p>        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <button type="submit" disabled={loading}>
        Add Todo
      </button>
    </form>
  );
};

在上面的代码中，我们使用了 optimisticResponse 属性来指定乐观响应，以提前更新 UI。我们假设新增的 Todo 的 id 为 -1，并将其添加到缓存中。

为什么 Optimistic UI 在 Mutation 组件中不起作用？

在上面的代码中，我们使用了 Mutation 组件来执行我们的 Mutation，但是却发现 Optimistic UI 并没有起作用。这是因为在 Mutation 组件中，Apollo Client 默认会使用 update 函数来更新缓存，而不是直接使用 optimisticResponse。

在我们的案例代码中，我们使用了 update 函数来手动更新缓存，而没有直接使用 optimisticResponse。这就导致了 Optimistic UI 并不起作用的问题。

解决方案

为了解决这个问题，我们需要使用 Apollo Client 提供的另一个组件：useMutation。useMutation 允许我们直接使用 optimisticResponse，从而在 Mutation 组件中实现 Optimistic UI。

修改我们的案例代码，使用 useMutation：

Javascript
const [addTodo, { loading }] = useMutation(ADD_TODO, {
  optimisticResponse: {
    __typename: 'Mutation',
    addTodo: {
      __typename: 'Todo',
      id: -1,
      text: text,
    },
  },
  update: (cache, { data: { addTodo } }) => {
    const { todos } = cache.readQuery({ query: GET_TODOS });
    cache.writeQuery({
      query: GET_TODOS,
      data: { todos: [...todos, addTodo] },
    });
  },
});

现在，我们在 useMutation 的配置中直接使用了 optimisticResponse，这样就可以正确地实现 Optimistic UI 了。

在使用 Apollo Client 的 Mutation 组件时，如果发现 Optimistic UI 不起作用，可以尝试使用 useMutation 组件，并在配置中直接使用 optimisticResponse。这样就能够正确地实现在 Mutation 组件中的 Optimistic UI，提前更新 UI，提高用户体验。

希望本文能够帮助到正在使用 Apollo Client 进行数据管理的开发者们，解决在 Mutation 组件中 Optimistic UI 不起作用的问题。祝大家编码愉快！