如何在自定义React Query Hook中优雅暴露API参数？

要让使用者能设置API调用的date参数，同时遵循React Query的最佳实践，你可以按以下方式改造自定义Hook：

• 让useGamesApi接收外部传入的date参数
• 把date作为查询键（queryKey）的一部分，确保参数变化时自动触发重新请求
• 移除手动维护的useState，直接复用React Query返回的data、请求状态等（这是React Query的核心惯例，避免冗余状态）

改造后的完整代码 #

const useGamesApi = (date: string | Date) => {
  const upcomingGamesQuery = useQuery(
    ["upcoming", date], // date作为查询键的一部分，参数变化时自动重查
    async ({ queryKey }) => {
      const [_, currentDate] = queryKey;
      return await apiGetUpcomingGames(currentDate);
    }
  );

  // 返回React Query提供的所有状态，让使用者能获取加载、错误等状态
  return {
    games: upcomingGamesQuery.data ?? [], // 空数组作为默认值避免undefined
    isLoading: upcomingGamesQuery.isLoading,
    isError: upcomingGamesQuery.isError,
    error: upcomingGamesQuery.error,
    refetch: upcomingGamesQuery.refetch // 暴露手动重查方法
  };
};

export default useGamesApi;

关键改动说明 #

1. 接收外部参数：Hook的参数直接接收使用者传入的date，这是自定义Hook传递参数的标准方式
2. 查询键绑定参数：把date加入queryKey数组，React Query会自动监听这个值的变化，一旦date更新就会重新发起请求，无需手动调用refetch
3. 移除冗余状态：不再用useState存games，因为useQuery返回的data已经是最新的请求结果，这样既简化代码又避免状态不同步的问题
4. 暴露完整请求状态：除了games，还返回isLoading、isError等状态，让使用者能处理加载中、错误等场景，这是React Query自定义Hook的常见做法

使用示例 #

// 使用者组件中
const [selectedDate, setSelectedDate] = useState(new Date());

const { games, isLoading } = useGamesApi(selectedDate);

// 当用户选择新日期时，Hook会自动重新请求
const handleDateChange = (newDate: Date) => {
  setSelectedDate(newDate);
};

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