Next.js Discord

Discord Forum

useQuery inside Async Component

Unanswered
African Slender-snouted Crocodil… posted this in #help-forum
Open in Discord
African Slender-snouted CrocodileOP
How can I use a useQuery inside an async component?

export default async function Page(props: {
  params?: Promise<{
    id?: string;
  }>;
}) {
  const { params } = props;

  if (!params) {
    throw new Error("No params provided");
  }

  const { id } = await params;

  if (!id) {
    throw new Error("No id provided");
  }

  const { data: paper, isPending, error } = useGetPaperDetailsQuery(id);

  if (isPending) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div className="flex flex-col justify-center pb-4">
      <LoadedPaper paper={paper} />
    </div>
  );
}

4 Replies

Asian black bear
You can't.
Async components must be server components wherein components relying on conventional hooks must be client components.
If you truly want to use client-side data fetching for some really good reason you have to move it to a client component.
Southeastern blueberry bee
I recommend following this documentation, it's a bit long, but it's really worth it to understand how to integrate React Query with nextjs properly. https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr