next.js 如何在用户会话通过身份验证时运行useQuery钩子

mwecs4sa  于 2023-10-18  发布在  其他
关注(0)|答案(1)|浏览(126)

如何有条件地使用带有React Query钩子的useQuery在会话状态经过身份验证时获取数据?我在网上找到一个答案,我必须使用启用标志,但它似乎不工作。最初,当页面加载时,会话是未定义的,从useQuery返回的数据也将是未定义的,只有当页面第二次呈现时才能工作。
我也得到了这个错误:
TypeError:Cannot read properties of undefined(阅读“user”)at CashFlow.keepPreviousData [as queryFn](index.tsx:62:14)at Object.fetchFn [as fn](query.js:300:1)at run(retryer. js:95:1)at eval(retryer.js:149:1)
我使用Next Auth进行身份验证,使用React Query在NextJS Pages目录中获取数据。

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",
        pageNumber,
        filterByYear,
        filterByMonth,
        transactionType,
    ],
    () =>
        getData(
            filterByYear,
            filterByMonth,
            transactionType,
            pageNumber.toString(),
            dataPerPage.toString(),
            session!.user.accessToken,
            session!.user.id
        ),
    {
        keepPreviousData: true,
        enabled: status === "authenticated",
    }
);
console.log(session);

useEffect(() => {
    refetch();
    setIsRefetch(false);
}, [isRefetch]);
tkqqtvp1

tkqqtvp11#

问题不是enabled不工作。请查看错误。
它指出,它不能读取user(从session),因为sessionundefined。但是你已经通过写session!向编译器保证session不会是undefined。因为这不是真的,所以会遇到运行时错误。由于fetch函数失败,data继续为undefined
要防止useQuerysession准备就绪之前调用查询函数,请将session添加到enabled标志。

useQuery(
    [
        "/api/cashflow",
        pageNumber,
        filterByYear,
        filterByMonth,
        transactionType,
    ],
    () =>
        getData(
            filterByYear,
            filterByMonth,
            transactionType,
            pageNumber.toString(),
            dataPerPage.toString(),
            session!.user.accessToken,
            session!.user.id
        ),
    {
        keepPreviousData: true,
        // disable until session is loaded
        enabled: status === "authenticated" && session !== undefined,
    }
);

相关问题