管理对同一个 Apollo 突变的多次调用

Question

因此，请查看文档 https://www.apollographql.com/docs/react/data/mutations/#tracking-loading-and-error-states 中的 Apollo useMutation 示例

function Todos() {
...
  const [
    updateTodo,
    { loading: mutationLoading, error: mutationError },
  ] = useMutation(UPDATE_TODO);
...

  return data.todos.map(({ id, type }) => {
    let input;

    return (
      <div key={id}>
        <p>{type}</p>
        <form
          onSubmit={e => {
            e.preventDefault();
            updateTodo({ variables: { id, type: input.value } });

            input.value = '';
          }}
        >
          <input
            ref={node => {
              input = node;
            }}
          />
          <button type="submit">Update Todo</button>
        </form>
        {mutationLoading && <p>Loading...</p>}
        {mutationError && <p>Error :( Please try again</p>}
      </div>
    );
  });
}

这似乎有一个重大缺陷（imo），更新任何待办事项都会显示每个待办事项的加载状态，而不仅仅是具有待处理突变的待办事项。

这似乎源于一个更大的问题：无法跟踪对同一突变的多次调用的状态。因此，即使我确实只想显示实际加载的待办事项的加载状态，也没有办法做到这一点，因为我们只有“正在加载”而不是“正在加载待办事项 X”的概念。

除了在 Apollo 之外手动跟踪加载状态之外，我能看到的唯一不错的解决方案是拆分一个单独的组件，使用它来渲染每个 Todo，而不是将代码直接放在 Todos 组件中，并让这些组件各自初始化它们的自己的突变。我不确定我认为这是一个好还是坏的设计，但无论哪种情况，我都不觉得我应该改变组件的结构来实现这一点。

这也延伸到错误处理。如果我更新一个待办事项，然后在第一次更新正在进行时更新另一个呢？如果第一次调用出错，那在从useMutation 返回的data 中是否可见？第二个电话呢？

有本地 Apollo 方法来解决这个问题吗？如果没有，是否有处理这个问题的选项可能比我提到的更好？

代码沙盒：https://codesandbox.io/s/v3mn68xxvy

Answer 1

诚然，应该重写文档中的示例以使其更清晰。它还有许多其他问题。

useQuery 和 useMutation 挂钩仅设计用于一次跟踪单个操作的加载、错误和结果状态。操作的变量可能会改变，它可能会被重新获取或附加到使用fetchMore，但最终，您仍然只是处理那个操作。您不能使用单个挂钩来跟踪多个操作的单独状态。为此，您需要多个挂钩。

在这种情况下，如果输入字段是提前知道的，那么你可以在同一个组件中将钩子分成多个：

const [updateA, { loading: loadingA, error: errorA }] = useMutation(YOUR_MUTATION)
const [updateB, { loading: loadingB, error: errorB }] = useMutation(YOUR_MUTATION)
const [updateC, { loading: loadingC, error: errorC }] = useMutation(YOUR_MUTATION)

如果您正在处理可变数量的字段，那么我们必须将此逻辑分解为一个单独的逻辑，因为我们无法在循环内声明挂钩。这不是 Apollo API 的限制，而只是钩子本身的魔法的副作用。

const ToDo = ({ id, type }) => {
  const [value, setValue] = useState('')
  const options = { variables = { id, type: value } }
  const const [updateTodo, { loading, error }] = useMutation(UPDATE_TODO, options)
  const handleChange = event => setValue(event.target.value)

  return (
    <div>
      <p>{type}</p>
      <form onSubmit={updateTodo}>
        <input
          value={value}
          onChange={handleChange}
        />
        <button type="submit">Update Todo</button>
      </form>
    </div>
  )
}

// back in our original component...

return data.todos.map(({ id, type }) => (
  <Todo key={id} id={id} type={type] />
))