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

Question

所以看看文档中的 Apollo useMutation 示例 https://www.apollographql.com/docs/react/data/mutations/#tracking-loading-and-error-states

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 Hook 仅用于一次跟踪单个操作的加载、错误和结果状态。操作的变量可能会改变，它可能会被重新获取或附加到使用 fetchMore，但最终，您仍然只是处理那个操作。您不能使用单个 Hook 来跟踪多个操作的单独状态。为此，您需要多个钩子(Hook)。

对于这样的表单，如果输入字段是提前知道的，那么您可以在同一个组件中将钩子(Hook)拆分成多个:

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)

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

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] />
))