如何在react-query的useQueries中使用onSuccess方法？

DevOps 小满

2026-8-9

实现useQueries的全局onSuccess回调

由于useQueries本身没有提供类似useQuery的全局onSuccess配置，我们可以通过React的useEffect监听所有请求的状态，在所有API调用成功完成后触发回调逻辑。

修改后的代码实现

import { useQueries } from "react-query";
import axios from "axios";
import { useEffect } from "react";

const fetchFriend = id => {
  return axios.get(`http://localhost:4000/friends/${id}`);
};

const useDynamicFriends = (friendIds, onSuccess) => {
  const queryResult = useQueries(
    friendIds.map(id => {
      return {
        queryKey: ["friends", id],
        queryFn: () => fetchFriend(parseInt(id)),
      };
    })
  );

  const isLoading = queryResult.some(result => result.isLoading);
  const allRequestsSuccess = queryResult.every(result => result.isSuccess);
  const hasError = queryResult.some(result => result.isError);

  useEffect(() => {
    // 当所有请求完成、无加载中状态、全部成功且传入了回调时执行
    if (!isLoading && allRequestsSuccess && !hasError && onSuccess) {
      const allFriendData = queryResult.map(res => res.data);
      onSuccess(allFriendData);
    }
  }, [isLoading, allRequestsSuccess, hasError, onSuccess, queryResult]);

  return { isLoading, queryResult, hasError };
};

export default useDynamicFriends;

组件中使用示例

const FriendList = () => {
  const friendIds = [1, 2, 3];

  const handleAllLoaded = (allData) => {
    console.log("所有好友数据加载完成:", allData);
    // 这里可以执行后续逻辑，比如数据聚合、状态更新等
  };

  const { isLoading, queryResult } = useDynamicFriends(friendIds, handleAllLoaded);

  if (isLoading) return <div>加载中...</div>;

  return (
    <ul>
      {queryResult.map((res, idx) => (
        <li key={idx}>{res.data?.name}</li>
      ))}
    </ul>
  );
};