Next.js+TypeScript中使用ReactQuery如何向外部异步函数传参

当前写法存在两个核心错误：

• 直接写getProducts(1)会在组件渲染时立即执行请求函数，最终传给useQuery的是函数执行返回的Promise实例，而useQuery需要接收的是可被框架自主调用的函数引用，不符合API要求。
• 仅用字符串"products"作为查询键（query key），React Query无法感知传入的id参数变化：后续如果id修改不会自动触发重拉，也无法根据不同参数隔离缓存数据。

1. 调整useQuery的传参方式 #

把查询键改成数组格式，将动态参数放入键中；查询函数用箭头函数包裹，延迟执行时机，交由React Query自主调用：

// 查询键["products", 1]和参数绑定，id变化时键会同步变化，自动触发重新请求
const { isLoading, data, error } = useQuery(["products", 1], () => getProducts(1));

如果id是来自动态值（路由参数、组件状态等），直接替换硬编码的1即可：

const productId = 1; // 替换为实际动态值
const { isLoading, data, error } = useQuery(["products", productId], () => getProducts(productId));

2. 修正类型定义问题 #

当前getProducts请求的是单商品详情接口/products/${id}，返回值是单个商品对象而非数组，需要把返回类型从ProductApi[]改为ProductApi，避免TS类型校验报错：

export const getProducts = async (id: number) => {
    const rest = await fetch(
        `https://fakestoreapi.com/products/${id}`
    );
    // 移除数组符号，匹配接口实际返回结构
    const data: ProductApi = await rest.json();
    return data;
};

import { useQuery } from "react-query";
import { getProducts } from "../components/task-1/getProducts-0";

export const ProductsPage = () => {
  const { isLoading, data, error } = useQuery(["products", 1], () => getProducts(1));

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (!data || error) {
    return <div>Error#!</div>;
  }

  return <>...</>;
};

export default ProductsPage;

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