Example of Hygraph in Next 14

page.tsx

import { Suspense } from "react";
import MaterialsSections from "./components/MaterialsSections";
import PageHeader from "./components/PageHeader";
import { Loader2 } from "lucide-react";

export default async function Home() {
  const { errors, data } = await fetch(process.env.HYGRAPH_URL as string, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      query: `
        {
        sessions(first: 100) {
            duration
            id
            publishedAt
            title
            updatedAt
            language
            sessionMaterials {
              canvaLink
              file {
                url
                mimeType
              }
              title
              id
            }
            promotionalMaterials {
              canvaLink
              file {
                url
                mimeType
              }
              title
              id
            }
          }
        }
      `,
    }),
  }).then((res) => res.json());

  if (errors) {
    console.error(errors);
    return <div className="p10">Error fetching data</div>;
  }

  return (
    <main className="flex min-h-screen flex-col items-center px-3 md:px-10">
      <PageHeader page="materials" />
      <Suspense
        fallback={<Loader2 className="animate-spin text-brown-200 size-8" />}
      >
        <MaterialsSections sessionData={data.sessions} />
      </Suspense>
    </main>
  );
}