如何在Next Auth认证后触发React Query的useQuery？遇启用标志失效及报错

问题根源 #

1. 你设置了enabled: status === "authenticated"控制查询时机，但queryFn里用session!强制断言，组件首次渲染时session可能还未加载完成，或者状态切换时enabled判断和session赋值不同步，导致queryFn执行时session仍为undefined，触发Cannot read properties of undefined (reading 'user')错误。
2. 首次加载时session为undefined，useQuery因enabled为false不会执行，直到status变为authenticated才触发查询，此时组件已完成一次渲染，所以二次渲染时数据才正常，这是React Query的正常行为，但可以优化流程。

解决方案 #

方案一：优化查询逻辑，确保Session就绪再执行 #

修改useQuery的queryKey和queryFn，移除强制断言，同时将session加入查询依赖：

const {
    data: session,
    status,
    update,
} = useSession({
    required: true,
});

useEffect(() => {
    const interval = setInterval(() => {
        update();
    }, 1000 * 60 * 60);
    return () => clearInterval(interval);
}, [update]);

const {
    isLoading,
    isError,
    error,
    data: data,
    isFetching,
    isPreviousData,
    refetch,
} = useQuery(
    [
        "/api/cashflow",
        session, // 把session加入queryKey，session变化时自动触发新查询
        pageNumber,
        filterByYear,
        filterByMonth,
        transactionType,
    ],
    () => {
        // 先判断session是否存在，避免报错
        if (!session?.user) {
            throw new Error("用户未完成认证");
        }
        return getData(
            filterByYear,
            filterByMonth,
            transactionType,
            pageNumber.toString(),
            dataPerPage.toString(),
            session.user.accessToken,
            session.user.id
        );
    },
    {
        keepPreviousData: true,
        enabled: status === "authenticated",
    }
);

// 优化refetch触发逻辑，仅在认证状态下执行
useEffect(() => {
    if (status === "authenticated") {
        refetch();
        setIsRefetch(false);
    }
}, [isRefetch, status, refetch]);

方案二：添加加载状态兜底 #

在组件渲染层根据status显示加载提示，避免未就绪时渲染数据相关内容：

// 组件渲染部分
if (status === "loading") {
    return <div>加载中...</div>;
}

// 后续渲染页面内容
return (
    // 你的页面结构
);

关键优化点 #

• 加入session到queryKey：当session从undefined变为已认证对象时，React Query会自动触发新查询，确保使用最新的认证信息。
• 移除强制断言：用条件判断替代session!，即使极端情况下enabled判断失效，也不会因session为空抛出错误。
• 限制refetch时机：只有在认证状态下才调用refetch，避免未认证时触发查询导致报错。

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