如何在使用useQuery()之前等待下一次身份验证会话？

p5cysglq 于 2022-10-15 发布在 React

关注(0)|答案(1)|浏览(147)

我有一个NextJS项目，它使用NextAuth进行会话管理，然后响应查询以在前端检索数据。
然而，在当前格式下(如下所示)，useSession()将在检查会话是否经过身份验证时返回undefined，然后在reactQuery中使用此undefined，该查询本身将返回undefined。如何确保仅在成功检索会话并包含用户ID之后才调用useQuery，然后可以将其传递给useQuery？

const AirdropsPage = () => {
  const { data: session } = useSession();

  const { isLoading, isError, data } = useQuery(["airdropsData"], () =>
    fetch(`/api/airdrops?id=${session?.user?.id}`).then((res) => res.json()) //id is undefined
  );

  return (
    {isLoading ? (
      <Loader />
    ) : data ? (
      <Table data={data.airdrops} columns={columns} />
    ) : null}
  );
};

reactjs

来源：https://stackoverflow.com/questions/74063463/how-do-i-wait-for-next-auth-session-before-using-usequery

1条答案

按热度按时间

p8h8hvxi1#

该问题是由于在_app.tsx中 Package 了React查询提供程序的Next.js getLayout属性造成的。解决方案是将这些提供程序移到 Package 器之外，如下所示。

function MyApp({ Component, pageProps }: AppPropsWithLayout<{ session: Session; }>) {
    const getLayout = Component.getLayout || ((page: any) => page);

    return 
        <SessionProvider session={pageProps.session}>
            {getLayout(
                <>
                    <Header />
                    <Component {...pageProps} />
                </>
             )}
        </SessionProvider>
    );
}```

赞(0）回复(0）举报 2022-10-15

我来回答

如何在使用useQuery()之前等待下一次身份验证会话？

1条答案

相关问题

热门标签

最新问答