在突变期间显示加载按钮

Question

我有一个组件可以创建使用自定义挂钩进行突变的公告 -

function CreateAnnouncement() {
    const [text, setText] = useState('')
    const [isCreating, setIsCreating] = useState(false)
    const { mutate } = useCreateAnnouncement()

    const handleSubmit = () => {
        const body = { text }
        mutate({ body }, {
            onMutate: () => {
                setIsCreating(true)
            },
            onSuccess: () => {
                setIsCreating(false)
            }
        })
    }

    return (
        <form onSubmit={handleSubmit}>
            <LoadingButton
                variant="contained"
                loadingIndicator="Saving..."
                loading={isCreating}
            >
                Create Announcement
            </LoadingButton >
        </form>
    )
}

当突变开始时，我想在LoadingButton中将loading设置为true。
但是，mutate 没有 onMutate 副作用。

那么，有没有办法知道突变何时开始使用 mutate？

更新

接受的答案显示了解决问题的一种方法。
我发现了一个更简单的方法 - 在 LoadingButton 组件内使用 useMutation 挂钩中的 isLoading -

const { mutate, isLoading } = useCreateAnnouncement()
<LoadingButton
   loadingIndicator="Saving..."
   loading={isLoading}
>
    Create Announcement
</LoadingButton >

Answer 1

当执行作为 onMutate 选项传递的回调时切换加载标志应该是正确的，所以您做对了。您可以使用 onSettled 取消设置标志，以便在成功和错误时停止指示加载。

错误可能出在 LoadingButton 中吗？您可以在 onSuccess 函数内部和 CreateAnnouncement returns 之前的行中添加 console.log() 语句并记录 isCreating?

更新

如果您想在组件中定义 onMutate，您的自定义挂钩需要将这些选项转发给 useMutation 调用：

const createProjectError = 'SOME ERROR MESSAGE';

type Error = ErrorType<typeof createProjectError>;

export const useCreateProject = (
    config?: MutationOptions<Project, Error, CreateProject>
) => {
    // invoke some other hooks

    return useMutation<Project, Error, CreateProject>(
        async createModel => {
            const response = await api.createProject(createModel);

            if (!response.ok) {
                throw new Error(createProjectError);
            }

            await queryClient.invalidateQueries(QueryKeys.GET_PROJECTS);

            return response.body;
        },
        {
            onError: () => {
               // some side effect
            },
            onSuccess: () => {
                // some side effect
            },
            ...config,
        }
    );
};

在突变期间显示加载按钮

Show loading button during mutation

react-query

更新