如何在RTK Query所有请求完成后关闭模态框？

当前工作流程 #

• 点击模态框表单的提交按钮，触发createFace mutation发送POST请求
• 请求响应成功后立即关闭模态框
• RTK Query自动发送GET请求获取最新数据
• 数据返回后渲染UI
  问题：模态框关闭后，用户需要等待几秒才能看到新建内容，因为GET请求尚未完成

期望流程 #

• 点击提交按钮，触发POST请求
• 请求成功后不关闭模态框，等待GET请求响应完成
• 数据更新完成后再关闭模态框，用户可立即看到新建内容

API定义 #

getAllFaces: builder.query<Face[], void>({
  query: () => 'face/',
  transformResponse: (response: Face[]) => {
    response.sort((a, b) => new Date(b.created_date).valueOf() - new Date(a.created_date).valueOf());
    return handleObjDate(response);
  },
  providesTags: (result) =>
    result
      ? [...result.map(({ id }) => ({ type: 'Faces' as const, id })), { type: 'Faces', id: 'LIST' }]
      : [{ type: 'Faces', id: 'LIST' }],
}),
createFace: builder.mutation<Face, Pick<Face, 'name'>>({
  query: (body) => ({
    url: 'face/',
    method: 'POST',
    body,
  }),
  invalidatesTags: [{ type: 'Faces', id: 'LIST' }],
}),

提交函数 #

const onSubmit = async (data: FormValues) => {
  await createFace(data);
  onClose();
};

以下两种方式可实现需求：

方法一：监听查询状态等待数据更新 #

在组件中同时获取getAllFaces的查询状态，当createFace成功且getAllFaces完成重新获取后再关闭模态框：

import { useState, useEffect } from 'react';
import { useGetAllFacesQuery, useCreateFaceMutation } from './api';

// ...组件其他逻辑
const [shouldCloseModal, setShouldCloseModal] = useState(false);
const { isSuccess: isGetSuccess, isFetching: isGetFetching } = useGetAllFacesQuery();
const [createFace, { isSuccess: isPostSuccess }] = useCreateFaceMutation();

// 监听POST成功且GET请求完成的状态
useEffect(() => {
  if (isPostSuccess && !isGetFetching && isGetSuccess) {
    setShouldCloseModal(true);
  }
}, [isPostSuccess, isGetFetching, isGetSuccess]);

// 关闭模态框并重置状态
useEffect(() => {
  if (shouldCloseModal) {
    onClose();
    setShouldCloseModal(false);
  }
}, [shouldCloseModal, onClose]);

const onSubmit = async (data: FormValues) => {
  await createFace(data);
};

方法二：手动触发查询并等待结果 #

利用RTK Query的refetch方法，在createFace成功后主动触发getAllFaces重新获取，等待完成后关闭模态框：

import { useGetAllFacesQuery, useCreateFaceMutation } from './api';

// ...组件其他逻辑
const { refetch } = useGetAllFacesQuery();
const [createFace] = useCreateFaceMutation();
const [isSubmitting, setIsSubmitting] = useState(false);

const onSubmit = async (data: FormValues) => {
  setIsSubmitting(true);
  try {
    // 执行POST请求
    await createFace(data).unwrap();
    // 主动触发GET请求并等待完成
    await refetch();
    // 关闭模态框
    onClose();
  } finally {
    setIsSubmitting(false);
  }
};

额外优化 #

等待过程中可给模态框添加加载状态（比如禁用提交按钮、显示加载动画），避免用户重复操作：

{/* 模态框内的提交按钮 */}
<button type="submit" disabled={isSubmitting}>
  {isSubmitting ? '处理中...' : '提交'}
</button>

内容的提问来源于stack exchange，提问作者qweezz