如何在useMutation的onSuccess中调用useQuery并等待其结果？

方案1：利用refetch的异步返回值（推荐） #

refetch()方法本身返回一个Promise，会在查询完成后返回结果，直接在onSuccess里用async/await等待查询结束，就能拿到最新的查询数据，不用依赖组件的data变量。

修改后的代码：

const { data, refetch } = useQuery(["tracks"], getTracks, {
  enabled: false,
});

const { mutate, isLoading, isError, error } = useMutation(login, {
  async onSuccess(d, v, c) {
    Cookies.set("cookieToken", d?.access);

    const token = Cookies.get("cookieToken");
    const { user_type: type } = parseJwt(token);
    
    // 等待refetch完成，直接获取查询结果
    const { data: tracksData } = await refetch();

    if (tracksData) {
      const targetPath = `/${tracksData.object[0].id}?type=${type === 5 || type === 6 ? 'prio' : 'filtering'}`;
      navigate(targetPath);
    }
  },
});

方案2：通过状态监听实现跳转 #

如果不想用异步语法，可以把用户类型存在组件状态里，然后监听查询数据和用户类型的变化，当两者都就绪时触发跳转。

修改后的代码：

import { useState, useEffect } from 'react';

// ...

const [userType, setUserType] = useState(null);
const { data: tracksData, refetch } = useQuery(["tracks"], getTracks, {
  enabled: false,
});

const { mutate, isLoading, isError, error } = useMutation(login, {
  onSuccess(d, v, c) {
    Cookies.set("cookieToken", d?.access);

    const token = Cookies.get("cookieToken");
    const { user_type: type } = parseJwt(token);
    setUserType(type);
    
    // 触发数据查询
    refetch();
  },
});

// 监听数据和用户类型，满足条件时跳转
useEffect(() => {
  if (tracksData && userType) {
    const targetPath = `/${tracksData.object[0].id}?type=${userType === 5 || userType === 6 ? 'prio' : 'filtering'}`;
    navigate(targetPath);
  }
}, [tracksData, userType, navigate]);

两种方案各有适用场景：方案1逻辑更集中，适合一次性完成的流程；方案2把状态拆分，方便后续在组件其他地方复用用户类型或查询数据。

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