一些乐观的反应不会导致页面重新呈现？ （Apollo 和 GraphQL 与 React）

Question

删除项目时，页面将立即更新为预期结果，但编辑项目时，直到实际突变成功后才会更新。

我正在使用 MERN 堆栈与朋友一起创建一个简单的锻炼跟踪应用程序。我正在使用 GraphQL 和 Apollo 来查询和改变 mongoDB。目前我们正试图让应用程序即使在互联网连接不佳时也能响应。我已经读到，实现此目的的一个好方法是在触发突变时使用乐观响应选项。在删除锻炼和练习时，我能够让它像魅力一样工作，但是在编辑这两个的枯萎时，页面实际上不会更新，直到突变真正解决。对我来说奇怪的是 optimisticResponse 似乎在工作，因为我在实际的解析器中包含了一个控制台日志，并且看到它在控制台中出现了两次，而不是当突变解决时只出现一次。

这是按预期工作的

async function handleDeleteWorkout(workoutId) {
        setSelectedWorkoutIndex("none");
        try {

            let optimisticWorkouts = [...user.workouts];
            let workoutIndexToReplace = optimisticWorkouts.findIndex(workout => workout._id.toString() === workoutId);
            optimisticWorkouts.splice(workoutIndexToReplace,1);

            const mutationResponse = await deleteWorkout({
                variables: {
                    workoutId: workoutId,
                },
                optimisticResponse: {
                    deleteWorkout: {
                        username: user.username,
                        workouts: optimisticWorkouts
                    }
                }
            });
        }
        catch (error) {
            console.log(error);
        }
    }

这里是处理编辑锻炼标题的功能，当连接不良时不会快速更新页面

async function handleWorkoutFormSubmit(event) {
        event.preventDefault();
        try {
            let optimisticWorkouts = [...user.workouts];
            optimisticWorkouts[selectedWorkoutIndex] = {...optimisticWorkouts[selectedWorkoutIndex], name:workoutEditState.workoutName}
            
            const mutationResponse = await editWorkout({
                variables: {
                    workoutId: user.workouts[selectedWorkoutIndex]._id,
                    name: workoutEditState.workoutName,
                },
                optimisticResponse: {
                    editWorkout: {
                        id: -1,
                        __typename: 'User',
                        username: user.username,
                        workouts: optimisticWorkouts
                    }
                }
            });
        }
        catch (error) {
            console.log(error);
        }
        setCurrentlyEditing('none');
    }

如果有人有任何见解，我将不胜感激。我对这一切还是有点陌生，我想我一开始就可以更好地构建我的数据。如果我在这里做了一些非常愚蠢和明显的事情，我深表歉意。

非常感谢您花时间阅读我的问题。

Answer 1

我觉得有点愚蠢，因为我没有早点意识到这一点，但问题是我正在使用 async/await，这导致

setCurrentlyEditing('none')

切换我页面上可见的内容，直到突变完成后才执行。