React Query useQuery如何延迟至Next.js路由参数user_id定义后执行？

在Next.js中，组件初始渲染时router.query的参数可能还未被解析完成，导致user_id为undefined，进而让useQuery发起无效请求。以下是几种可行的解决方法：

1. 使用useQuery的enabled选项（最推荐） #

react-query的useQuery内置了enabled参数，用于控制查询是否自动执行。只需将该参数设置为user_id存在的条件，就能确保查询仅在参数就绪后触发：

const router = useRouter();
const { user_id } = router.query;

const { isLoading, isError, isSuccess, data } = useQuery(
  ["user", user_id],
  () => getUser(user_id),
  {
    enabled: !!user_id // 仅当user_id为真值时启用查询
  }
);

初始渲染时user_id为undefined，enabled为false，useQuery不会执行；当Next.js完成路由解析、user_id有有效值后，enabled自动变为true，查询会立即触发。

2. 通过Next.js数据预取方法提前获取参数 #

如果你的页面适合服务端渲染（SSR）或静态生成（SSG），可以利用Next.js的getServerSideProps或getStaticProps提前获取路由参数，再传递给页面组件，这样组件拿到的user_id从一开始就是有效值：

服务端渲染（getServerSideProps）示例： #

export default function UserPage({ user_id }) {
  const { isLoading, isError, isSuccess, data } = useQuery(
    ["user", user_id],
    () => getUser(user_id)
  );

  // 页面渲染逻辑
}

export async function getServerSideProps(context) {
  const { user_id } = context.query;
  return {
    props: { user_id } // 将参数传递给页面组件
  };
}

这种方式下，组件在客户端渲染前就已拿到有效user_id，useQuery会直接发起正常请求，从根源上避免了初始undefined的问题。

3. 监听路由参数变化手动触发查询 #

若需要更灵活的控制，可以通过useEffect监听user_id的变化，当参数变为有效值时手动调用refetch方法触发查询：

const router = useRouter();
const { user_id } = router.query;

const { isLoading, isError, isSuccess, data, refetch } = useQuery(
  ["user", user_id],
  () => getUser(user_id),
  {
    enabled: false // 禁用自动查询
  }
);

useEffect(() => {
  if (user_id) {
    refetch();
  }
}, [user_id, refetch]);

不过这种写法相对繁琐，通常优先选择方案一。

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