如何有条件地使用带有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]);
1条答案
按热度按时间tkqqtvp11#
问题不是
enabled
不工作。请查看错误。它指出,它不能读取
user
(从session
),因为session
是undefined
。但是你已经通过写session!
向编译器保证session
不会是undefined
。因为这不是真的,所以会遇到运行时错误。由于fetch函数失败,data
继续为undefined
。要防止
useQuery
在session
准备就绪之前调用查询函数,请将session
添加到enabled
标志。