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

【问题标题】：How do I wait for next-auth session before using useQuery()?在使用 useQuery() 之前如何等待下一个身份验证会话？
【发布时间】：2022-10-15 03:16:37
【问题描述】：

我有一个 NextJS 项目，它使用 NextAuth 进行会话管理，然后使用 React Query 在前端检索数据。

但是，使用当前格式（如下所示），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}
  );
};

【问题讨论】：

标签： node.js reactjs next.js react-query next-auth

【解决方案1】：

问题是由于在 _app.tsx 中将 Next.js getLayout 属性包装在 React Query 提供程序周围。解决方案是将这些提供程序移到包装器之外，如下所示。

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

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

【讨论】：