React-Query Async Await 在错误的顺序循环中触发

Question

我正在批处理变更请求并用 Promise.all 触发它们，但是回调有时会在变更发生之前触发。我只能在删除单个项目时重现问题。我知道在循环中执行 async/await 时会遇到一些问题，但我不确定这是否是导致我出现问题的原因。

我想要完成的事情：

收集所有需要运行的mutation（增、删、改端点不同，必须单独发送）
触发所有突变并等待它们全部成功完成。

重新获取应用了所有更新的列表

 useQuery('todos', () => getTodosList(), {
     onSuccess: ({ todos }) => {
         setOriginalList(todos);
     },
 });

const saveUpdates = useCallback(async () => {

    const mutations = [];

    for (let i = 0; i < list.length; i++) {
        const entry = list[i];

        if (entry.modified) {

            let mutation;
            const { modified, id } = entry;

            if (modified === MODIFICATION.Deleted) {
                mutation = await deleteMutation.mutateAsync(id);
            } else if (modified === MODIFICATION.Updated) {
                mutation = await updateMutation.mutateAsync(entry);
            } else if (modified === MODIFICATION.Added) {
                mutation = await createMutation.mutateAsync(entry);
            }

            mutations.push(mutation);
        }
    }

    await Promise.all(mutations).then(() => {
        queryClient.invalidateQueries('todos');
    });
},[...all the dependencies]);

Answer 1

在您的 if/else 中，您没有将 Promise 分配给突变，而是分配了 Promise 的结果。然后你在下面用 await Promise.all

解决它们

你应该在循环的分配中等待

而不是

if (modified === MODIFICATION.Deleted) {
  mutation = await deleteMutation.mutateAsync(id);
} else if (modified === MODIFICATION.Updated) {
  mutation = await updateMutation.mutateAsync(entry);
} else if (modified === MODIFICATION.Added) {
  mutation = await createMutation.mutateAsync(entry);
}

你应该写

if (modified === MODIFICATION.Deleted) {
  mutation = deleteMutation.mutateAsync(id);
} else if (modified === MODIFICATION.Updated) {
  mutation = updateMutation.mutateAsync(entry);
} else if (modified === MODIFICATION.Added) {
  mutation = createMutation.mutateAsync(entry);
}

React-Query Async Await 在错误的顺序循环中触发

React-Query Async Await firing in wrong order loop

javascript

async-await

es6-promise

react-query