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

Question

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

但是，使用当前格式（如下所示）， useSession() 将undefined在检查会话是否已通过身份验证时返回，然后undefined在reactQuery中使用它，它本身将返回undefined. 如何确保仅在成功检索会话并包含 userID 之后才调用 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}
  );
};

Answer 1

一般来说，您想要的是将在 queryFn 中使用的所有内容添加为 queryKey。然后，当您的依赖项尚未准备好时，您可以禁用查询：

const { data: session } = useSession();
const id = session?.user?.id

const { isLoading, isError, data } = useQuery(
  ["airdropsData", id],
  () =>
    fetch(`/api/airdrops?id=${id}`).then((res) => res.json())
  ),
  {
    enabled: !!id
  }
)

一旦useSession返回 id，查询就会启用并开始获取。此处记录了这一点。