web: centralize prop fetching for live + preview, fix preview banner breakage

web/src/app/[...url]/page.tsx

@@ -1,11 +1,10 @@
 import { graphql } from "@/gql";
-import { GenericFragment } from "@/gql/graphql";
 import { getClient } from "@/app/client";
 import { Metadata, ResolvingMetadata } from "next";
 import { notFound } from "next/navigation";
 import {
   GenericPageView,
-  genericPageByUrlPathQuery,
+  loadGenericPageProps,
 } from "@/components/general/GenericPageView";
 import { getSeoMetadata } from "@/lib/seo";
 
@@ -53,38 +52,14 @@ export async function generateMetadata(
   parent: ResolvingMetadata
 ): Promise<Metadata | null> {
   const { url } = await params;
-  const urlPath = getWagtailUrlPath(url);
-  const { data, error } = await getClient().query(genericPageByUrlPathQuery, {
-    urlPath: urlPath,
-  });
-
-  if (error) {
-    throw new Error(error.message);
-  }
-  if (!data?.page) {
-    return null;
-  }
-
-  const page = data.page as GenericFragment;
-  const metadata = await getSeoMetadata(page, parent);
-  return metadata;
+  const props = await loadGenericPageProps({ urlPath: getWagtailUrlPath(url) });
+  if (!props) return null;
+  return getSeoMetadata(props.page, parent);
 }
 
 export default async function Page({ params }: { params: Params }) {
   const { url } = await params;
-  const urlPath = getWagtailUrlPath(url);
-  const { data, error } = await getClient().query(genericPageByUrlPathQuery, {
-    urlPath: urlPath,
-  });
-  if (error) {
-    throw new Error(error.message);
-  }
-
-  if (!data?.page) {
-    return notFound();
-  }
-
-  const page = data?.page as GenericFragment;
-
-  return <GenericPageView page={page} />;
+  const props = await loadGenericPageProps({ urlPath: getWagtailUrlPath(url) });
+  if (!props) return notFound();
+  return <GenericPageView {...props} />;
 }

web/src/app/aktuelt/[slug]/page.tsx

@@ -3,10 +3,9 @@ import { notFound } from "next/navigation";
 import { getClient } from "@/app/client";
 import {
   NewsPageView,
-  newsBySlugQuery,
+  loadNewsPageProps,
 } from "@/components/news/NewsPageView";
 import { graphql } from "@/gql";
-import { NewsFragment } from "@/gql/graphql";
 import { getSeoMetadata } from "@/lib/seo";
 
 export async function generateStaticParams() {
@@ -41,33 +40,14 @@ export async function generateMetadata(
   parent: ResolvingMetadata
 ): Promise<Metadata | null> {
   const { slug } = await params;
-  const { data, error } = await getClient().query(newsBySlugQuery, {
-    slug,
-  });
-  if (error) {
-    throw new Error(error.message);
-  }
-  if (!data?.news) {
-    return null;
-  }
-  const news = data.news as NewsFragment;
-  const metadata = await getSeoMetadata(news, parent);
-  return metadata;
+  const props = await loadNewsPageProps({ slug });
+  if (!props) return null;
+  return getSeoMetadata(props.news, parent);
 }
 
 export default async function Page({ params }: { params: Params }) {
   const { slug } = await params;
-  const { data, error } = await getClient().query(newsBySlugQuery, {
-    slug,
-  });
-
-  if (error) {
-    throw new Error(error.message);
-  }
-  if (!data?.news) {
-    return notFound();
-  }
-
-  const news = data?.news as NewsFragment;
-  return <NewsPageView news={news} />;
+  const props = await loadNewsPageProps({ slug });
+  if (!props) return notFound();
+  return <NewsPageView {...props} />;
 }

web/src/app/aktuelt/page.tsx

@@ -1,33 +1,19 @@
-import { getClient } from "@/app/client";
-import { NewsIndexView } from "@/components/news/NewsIndexView";
 import { Metadata, ResolvingMetadata } from "next";
-import { newsQuery, NewsFragment, NewsIndexFragment } from "@/lib/news";
+import {
+  NewsIndexView,
+  loadNewsIndexProps,
+} from "@/components/news/NewsIndexView";
 import { getSeoMetadata } from "@/lib/seo";
 
 export async function generateMetadata(
-  { params }: { params: Promise<{}> },
+  _: unknown,
   parent: ResolvingMetadata
 ): Promise<Metadata | null> {
-  const { data, error } = await getClient().query(newsQuery, {});
-  if (error) {
-    throw new Error(error.message);
-  }
-  if (!data?.index) {
-    return null;
-  }
-
-  const index = data.index as NewsIndexFragment;
-  const metadata = await getSeoMetadata(index, parent);
-  return metadata;
+  const { index } = await loadNewsIndexProps();
+  return getSeoMetadata(index, parent);
 }
 
 export default async function Page() {
-  const { data, error } = await getClient().query(newsQuery, {});
-  if (error) {
-    throw new Error(error.message);
-  }
-  const news = (data?.news ?? []) as NewsFragment[];
-  const index = data?.index as NewsIndexFragment;
-
-  return <NewsIndexView index={index} news={news} />;
+  const props = await loadNewsIndexProps();
+  return <NewsIndexView {...props} />;
 }

web/src/app/arrangementer/[slug]/page.tsx

@@ -3,10 +3,9 @@ import { notFound } from "next/navigation";
 import { getClient } from "@/app/client";
 import {
   EventPageView,
-  eventBySlugQuery,
+  loadEventPageProps,
 } from "@/components/events/EventPageView";
 import { graphql } from "@/gql";
-import { EventFragment } from "@/gql/graphql";
 import { getSeoMetadata } from "@/lib/seo";
 
 export async function generateStaticParams() {
@@ -41,36 +40,14 @@ export async function generateMetadata(
   parent: ResolvingMetadata
 ): Promise<Metadata | null> {
   const { slug } = await params;
-  const { data, error } = await getClient().query(eventBySlugQuery, {
-    slug,
-  });
-
-  if (error) {
-    throw new Error(error.message);
-  }
-  if (!data?.event) {
-    return null;
-  }
-
-  const event = data.event as EventFragment;
-  const metadata = await getSeoMetadata(event, parent);
-  return metadata;
+  const props = await loadEventPageProps({ slug });
+  if (!props) return null;
+  return getSeoMetadata(props.event, parent);
 }
 
 export default async function Page({ params }: { params: Params }) {
   const { slug } = await params;
-  const { data, error } = await getClient().query(eventBySlugQuery, {
-    slug,
-  });
-
-  if (error) {
-    throw new Error(error.message);
-  }
-  if (!data?.event) {
-    return notFound();
-  }
-
-  const event = data.event as EventFragment;
-
-  return <EventPageView event={event} />;
+  const props = await loadEventPageProps({ slug });
+  if (!props) return notFound();
+  return <EventPageView {...props} />;
 }

web/src/app/arrangementer/page.tsx

@@ -1,60 +1,24 @@
 import { Metadata, ResolvingMetadata } from "next";
 import { getClient } from "@/app/client";
-import { EventIndexView } from "@/components/events/EventIndexView";
 import {
-  eventsOverviewQuery,
-  eventIndexMetadataQuery,
-  EventFragment,
-  EventCategory,
-  EventOrganizer,
-} from "@/lib/event";
-import { EventIndexFragment, VenueFragment } from "@/gql/graphql";
+  EventIndexView,
+  loadEventIndexProps,
+} from "@/components/events/EventIndexView";
+import { EventIndexFragment } from "@/gql/graphql";
+import { eventIndexMetadataQuery } from "@/lib/event";
 import { getSeoMetadata } from "@/lib/seo";
 
 export async function generateMetadata(
-  { params }: { params: Promise<{}> },
+  _: unknown,
   parent: ResolvingMetadata
 ): Promise<Metadata | null> {
   const { data, error } = await getClient().query(eventIndexMetadataQuery, {});
-
-  if (error) {
-    throw new Error(error.message);
-  }
-  if (!data?.index) {
-    return null;
-  }
-
-  const index = data.index as EventIndexFragment;
-  const metadata = await getSeoMetadata(index, parent);
-  return metadata;
+  if (error) throw new Error(error.message);
+  if (!data?.index) return null;
+  return getSeoMetadata(data.index as EventIndexFragment, parent);
 }
 
 export default async function Page() {
-  const { data, error } = await getClient().query(eventsOverviewQuery, {});
-  if (error) {
-    throw new Error(error.message);
-  }
-  if (
-    !data?.index ||
-    !data?.events?.futureEvents ||
-    !data?.eventCategories ||
-    !data?.eventOrganizers ||
-    !data?.venues
-  ) {
-    throw new Error("Failed to render /arrangementer");
-  }
-
-  const events = (data?.events?.futureEvents ?? []) as EventFragment[];
-  const eventCategories = (data?.eventCategories ?? []) as EventCategory[];
-  const eventOrganizers = (data?.eventOrganizers ?? []) as EventOrganizer[];
-  const venues = (data?.venues ?? []) as VenueFragment[];
-
-  return (
-    <EventIndexView
-      events={events}
-      eventCategories={eventCategories}
-      eventOrganizers={eventOrganizers}
-      venues={venues}
-    />
-  );
+  const props = await loadEventIndexProps();
+  return <EventIndexView {...props} />;
 }

web/src/app/foreninger/[slug]/page.tsx

@@ -3,10 +3,9 @@ import { notFound } from "next/navigation";
 import { getClient } from "@/app/client";
 import {
   AssociationPageView,
-  associationBySlugQuery,
+  loadAssociationPageProps,
 } from "@/components/associations/AssociationPageView";
 import { graphql } from "@/gql";
-import { AssociationFragment } from "@/gql/graphql";
 import { getSeoMetadata } from "@/lib/seo";
 
 type Params = Promise<{ slug: string }>;
@@ -16,20 +15,9 @@ export async function generateMetadata(
   parent: ResolvingMetadata
 ): Promise<Metadata | null> {
   const { slug } = await params;
-  const { data, error } = await getClient().query(associationBySlugQuery, {
-    slug,
-  });
-
-  if (error) {
-    throw new Error(error.message);
-  }
-  if (!data?.association) {
-    return null;
-  }
-
-  const association = data.association as AssociationFragment;
-  const metadata = await getSeoMetadata(association, parent);
-  return metadata;
+  const props = await loadAssociationPageProps({ slug });
+  if (!props) return null;
+  return getSeoMetadata(props.association, parent);
 }
 
 export async function generateStaticParams() {
@@ -59,18 +47,7 @@ export async function generateStaticParams() {
 
 export default async function Page({ params }: { params: Params }) {
   const { slug } = await params;
-  const { data, error } = await getClient().query(associationBySlugQuery, {
-    slug,
-  });
-
-  if (error) {
-    throw new Error(error.message);
-  }
-  if (!data?.association) {
-    return notFound();
-  }
-
-  const association = data.association as AssociationFragment;
-
-  return <AssociationPageView association={association} />;
+  const props = await loadAssociationPageProps({ slug });
+  if (!props) return notFound();
+  return <AssociationPageView {...props} />;
 }

web/src/app/foreninger/page.tsx

@@ -1,42 +1,19 @@
 import { Metadata, ResolvingMetadata } from "next";
-import { AssociationFragment, AssociationIndexFragment } from "@/gql/graphql";
-import { getClient } from "@/app/client";
 import {
   AssociationIndexView,
-  allAssociationsQuery,
+  loadAssociationIndexProps,
 } from "@/components/associations/AssociationIndexView";
 import { getSeoMetadata } from "@/lib/seo";
 
 export async function generateMetadata(
-  { params }: { params: Promise<{}> },
+  _: unknown,
   parent: ResolvingMetadata
 ): Promise<Metadata | null> {
-  const { data, error } = await getClient().query(allAssociationsQuery, {});
-
-  if (error) {
-    throw new Error(error.message);
-  }
-  if (!data?.index) {
-    return null;
-  }
-
-  const index = data.index as AssociationIndexFragment;
-  const metadata = await getSeoMetadata(index, parent);
-  return metadata;
+  const { index } = await loadAssociationIndexProps();
+  return getSeoMetadata(index, parent);
 }
 
 export default async function Page() {
-  const { data, error } = await getClient().query(allAssociationsQuery, {});
-
-  if (error) {
-    throw new Error(error.message);
-  }
-  if (!data?.associations || !data.index) {
-    throw new Error("Failed to render /foreninger");
-  }
-
-  const associations = data.associations as AssociationFragment[];
-  const index = data.index as AssociationIndexFragment;
-
-  return <AssociationIndexView index={index} associations={associations} />;
+  const props = await loadAssociationIndexProps();
+  return <AssociationIndexView {...props} />;
 }

web/src/app/kontakt/page.tsx

@@ -1,42 +1,19 @@
 import { Metadata, ResolvingMetadata } from "next";
-import { notFound } from "next/navigation";
-import { ContactIndexFragment } from "@/gql/graphql";
-import { getClient } from "@/app/client";
 import {
   ContactIndexView,
-  contactQuery,
+  loadContactIndexProps,
 } from "@/components/contact/ContactIndexView";
 import { getSeoMetadata } from "@/lib/seo";
 
 export async function generateMetadata(
-  { params }: { params: Promise<{}> },
+  _: unknown,
   parent: ResolvingMetadata
 ): Promise<Metadata | null> {
-  const { data, error } = await getClient().query(contactQuery, {});
-
-  if (error) {
-    throw new Error(error.message);
-  }
-  if (!data?.index) {
-    return null;
-  }
-
-  const index = data.index as ContactIndexFragment;
-  const metadata = await getSeoMetadata(index, parent);
-  return metadata;
+  const { index } = await loadContactIndexProps();
+  return getSeoMetadata(index, parent);
 }
 
 export default async function Page() {
-  const { data, error } = await getClient().query(contactQuery, {});
-
-  if (error) {
-    throw new Error(error.message);
-  }
-  if (!data?.index) {
-    return notFound();
-  }
-
-  const index = data.index as ContactIndexFragment;
-
-  return <ContactIndexView index={index} />;
+  const props = await loadContactIndexProps();
+  return <ContactIndexView {...props} />;
 }

web/src/app/layout.tsx

@@ -1,9 +1,7 @@
 import "@/css/main.scss";
 import { Header } from "@/components/layout/Header";
 import { Footer } from "@/components/layout/Footer";
-import { PreviewBanner } from "@/components/general/PreviewBanner";
 import { Metadata } from "next";
-import { draftMode } from "next/headers";
 import { NuqsAdapter } from "nuqs/adapters/next/app";
 
 const baseUrlMetadata = process.env.URL
@@ -28,12 +26,11 @@ export const metadata: Metadata = {
   ...baseUrlMetadata,
 };
 
-export default async function RootLayout({
+export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const isPreview = (await draftMode()).isEnabled;
   return (
     <html lang="no">
       <head>
@@ -47,7 +44,6 @@ export default async function RootLayout({
         )}
       </head>
       <body>
-        {isPreview && <PreviewBanner />}
         <NuqsAdapter>
           <Header />
           {children}

web/src/app/lokaler/[slug]/page.tsx

@@ -3,10 +3,9 @@ import { notFound } from "next/navigation";
 import { getClient } from "@/app/client";
 import {
   VenuePageView,
-  venueBySlugQuery,
+  loadVenuePageProps,
 } from "@/components/venues/VenuePageView";
 import { graphql } from "@/gql";
-import { VenueFragment } from "@/gql/graphql";
 import { getSeoMetadata } from "@/lib/seo";
 
 type Params = Promise<{ slug: string }>;
@@ -16,20 +15,9 @@ export async function generateMetadata(
   parent: ResolvingMetadata
 ): Promise<Metadata | null> {
   const { slug } = await params;
-  const { data, error } = await getClient().query(venueBySlugQuery, {
-    slug,
-  });
-
-  if (error) {
-    throw new Error(error.message);
-  }
-  if (!data?.venue) {
-    return null;
-  }
-
-  const venue = data.venue as VenueFragment;
-  const metadata = await getSeoMetadata(venue, parent);
-  return metadata;
+  const props = await loadVenuePageProps({ slug });
+  if (!props) return null;
+  return getSeoMetadata(props.venue, parent);
 }
 
 export async function generateStaticParams() {
@@ -59,18 +47,7 @@ export async function generateStaticParams() {
 
 export default async function Page({ params }: { params: Params }) {
   const { slug } = await params;
-  const { data, error } = await getClient().query(venueBySlugQuery, {
-    slug,
-  });
-
-  if (error) {
-    throw new Error(error.message);
-  }
-  if (!data?.venue) {
-    return notFound();
-  }
-
-  const venue = data.venue as VenueFragment;
-
-  return <VenuePageView venue={venue} />;
+  const props = await loadVenuePageProps({ slug });
+  if (!props) return notFound();
+  return <VenuePageView {...props} />;
 }

web/src/app/lokaler/page.tsx

@@ -1,42 +1,19 @@
 import { Metadata, ResolvingMetadata } from "next";
-import { VenueFragment, VenueIndexFragment } from "@/gql/graphql";
-import { getClient } from "@/app/client";
 import {
   VenueIndexView,
-  venueIndexQuery,
+  loadVenueIndexProps,
 } from "@/components/venues/VenueIndexView";
 import { getSeoMetadata } from "@/lib/seo";
 
 export async function generateMetadata(
-  { params }: { params: Promise<{}> },
+  _: unknown,
   parent: ResolvingMetadata
 ): Promise<Metadata | null> {
-  const { data, error } = await getClient().query(venueIndexQuery, {});
-
-  if (error) {
-    throw new Error(error.message);
-  }
-  if (!data?.index) {
-    return null;
-  }
-
-  const index = (data?.index ?? []) as VenueIndexFragment;
-  const metadata = await getSeoMetadata(index, parent);
-  return metadata;
+  const { index } = await loadVenueIndexProps();
+  return getSeoMetadata(index, parent);
 }
 
 export default async function Page() {
-  const { data, error } = await getClient().query(venueIndexQuery, {});
-
-  if (error) {
-    throw new Error(error.message);
-  }
-  if (!data?.index || !data?.venues) {
-    throw new Error("Failed to render /lokaler");
-  }
-
-  const index = data.index as VenueIndexFragment;
-  const venues = (data?.venues ?? []) as VenueFragment[];
-
-  return <VenueIndexView index={index} venues={venues} />;
+  const props = await loadVenueIndexProps();
+  return <VenueIndexView {...props} />;
 }

web/src/app/page.tsx

@@ -1,14 +1,9 @@
-import { EventFragment } from "@/lib/event";
-import { NewsFragment } from "@/lib/news";
-import { HomeFragment } from "@/gql/graphql";
-import { getClient } from "@/app/client";
-import { HomePageView, homeQuery } from "@/components/home/HomePageView";
+import {
+  HomePageView,
+  loadHomePageProps,
+} from "@/components/home/HomePageView";
 
 export default async function Home() {
-  const { data, error } = await getClient().query(homeQuery, {});
-  const home = (data?.home ?? []) as HomeFragment;
-  const events = (data?.events?.futureEvents ?? []) as EventFragment[];
-  const news = (data?.news ?? []) as NewsFragment[];
-
-  return <HomePageView home={home} events={events} news={news} />;
+  const props = await loadHomePageProps();
+  return <HomePageView {...props} />;
 }

web/src/app/preview/render/page.tsx

@@ -1,5 +1,61 @@
-import { cookies } from "next/headers";
 import { getClient } from "@/app/client";
+import { PreviewBanner } from "@/components/general/PreviewBanner";
+import {
+  AssociationIndexView,
+  loadAssociationIndexProps,
+} from "@/components/associations/AssociationIndexView";
+import {
+  AssociationPageView,
+  loadAssociationPageProps,
+} from "@/components/associations/AssociationPageView";
+import {
+  ContactIndexView,
+  loadContactIndexProps,
+} from "@/components/contact/ContactIndexView";
+import {
+  EventIndexView,
+  loadEventIndexProps,
+} from "@/components/events/EventIndexView";
+import {
+  EventPageView,
+  loadEventPageProps,
+} from "@/components/events/EventPageView";
+import {
+  GenericPageView,
+  loadGenericPageProps,
+} from "@/components/general/GenericPageView";
+import {
+  HomePageView,
+  loadHomePageProps,
+} from "@/components/home/HomePageView";
+import {
+  NewsIndexView,
+  loadNewsIndexProps,
+} from "@/components/news/NewsIndexView";
+import {
+  NewsPageView,
+  loadNewsPageProps,
+} from "@/components/news/NewsPageView";
+import {
+  SponsorsPageView,
+  loadSponsorsPageProps,
+} from "@/components/sponsor/SponsorsPageView";
+import {
+  StudioPageView,
+  loadStudioPageProps,
+} from "@/components/studio/StudioPageView";
+import {
+  VenueIndexView,
+  loadVenueIndexProps,
+} from "@/components/venues/VenueIndexView";
+import {
+  VenuePageView,
+  loadVenuePageProps,
+} from "@/components/venues/VenuePageView";
+import {
+  VenueRentalIndexView,
+  loadVenueRentalIndexProps,
+} from "@/components/venues/VenueRentalIndexView";
 import { graphql } from "@/gql";
 import {
   AssociationFragment,
@@ -16,36 +72,7 @@ import {
   VenueIndexFragment,
   VenueRentalIndexFragment,
 } from "@/gql/graphql";
-import {
-  AssociationIndexView,
-  allAssociationsQuery,
-} from "@/components/associations/AssociationIndexView";
-import { AssociationPageView } from "@/components/associations/AssociationPageView";
-import { ContactIndexView } from "@/components/contact/ContactIndexView";
-import { EventIndexView } from "@/components/events/EventIndexView";
-import { EventPageView } from "@/components/events/EventPageView";
-import { GenericPageView } from "@/components/general/GenericPageView";
-import { HomePageView, homeQuery } from "@/components/home/HomePageView";
-import { NewsIndexView } from "@/components/news/NewsIndexView";
-import { NewsPageView } from "@/components/news/NewsPageView";
-import { SponsorsPageView } from "@/components/sponsor/SponsorsPageView";
-import { StudioPageView } from "@/components/studio/StudioPageView";
-import {
-  VenueIndexView,
-  venueIndexQuery,
-} from "@/components/venues/VenueIndexView";
-import { VenuePageView } from "@/components/venues/VenuePageView";
-import {
-  VenueRentalIndexView,
-  venueRentalIndexQuery,
-} from "@/components/venues/VenueRentalIndexView";
-import {
-  EventCategory,
-  EventOrganizer,
-  eventsOverviewQuery,
-} from "@/lib/event";
-import { newsQuery } from "@/lib/news";
-
+import { cookies } from "next/headers";
 export const dynamic = "force-dynamic";
 export const revalidate = 0;
 
@@ -53,19 +80,45 @@ const previewPageQuery = graphql(`
   query previewPage($token: String!) {
     page: page(token: $token) {
       __typename
-      ... on GenericPage { ...Generic }
-      ... on StudioPage { ...Studio }
-      ... on SponsorsPage { ...SponsorsPage }
-      ... on HomePage { ...Home }
-      ... on EventPage { ...Event }
-      ... on NewsPage { ...News }
-      ... on AssociationPage { ...Association }
-      ... on VenuePage { ...Venue }
-      ... on NewsIndex { ...NewsIndex }
-      ... on AssociationIndex { ...AssociationIndex }
-      ... on VenueIndex { ...VenueIndex }
-      ... on VenueRentalIndex { ...VenueRentalIndex }
-      ... on ContactIndex { ...ContactIndex }
+      ... on GenericPage {
+        ...Generic
+      }
+      ... on StudioPage {
+        ...Studio
+      }
+      ... on SponsorsPage {
+        ...SponsorsPage
+      }
+      ... on HomePage {
+        ...Home
+      }
+      ... on EventPage {
+        ...Event
+      }
+      ... on NewsPage {
+        ...News
+      }
+      ... on AssociationPage {
+        ...Association
+      }
+      ... on VenuePage {
+        ...Venue
+      }
+      ... on NewsIndex {
+        ...NewsIndex
+      }
+      ... on AssociationIndex {
+        ...AssociationIndex
+      }
+      ... on VenueIndex {
+        ...VenueIndex
+      }
+      ... on VenueRentalIndex {
+        ...VenueRentalIndex
+      }
+      ... on ContactIndex {
+        ...ContactIndex
+      }
     }
   }
 `);
@@ -105,87 +158,99 @@ export default async function PreviewRender() {
   }
 
   const page = data.page;
-  switch (page.__typename) {
-    case "GenericPage":
-      return <GenericPageView page={page as GenericFragment} />;
-    case "StudioPage":
-      return <StudioPageView page={page as StudioFragment} />;
-    case "SponsorsPage":
-      return <SponsorsPageView page={page as SponsorsPageFragment} />;
-    case "EventPage":
-      return <EventPageView event={page as EventFragment} />;
-    case "NewsPage":
-      return <NewsPageView news={page as NewsFragment} />;
-    case "AssociationPage":
-      return <AssociationPageView association={page as AssociationFragment} />;
-    case "VenuePage":
-      return <VenuePageView venue={page as VenueFragment} />;
-
-    case "HomePage": {
-      const { data: aux } = await getClient().query(homeQuery, {});
-      const events = (aux?.events?.futureEvents ?? []) as EventFragment[];
-      const news = (aux?.news ?? []) as NewsFragment[];
-      return (
-        <HomePageView home={page as HomeFragment} events={events} news={news} />
-      );
+  const view = await (async () => {
+    switch (page.__typename) {
+      case "GenericPage": {
+        const props = await loadGenericPageProps({
+          pageOverride: page as GenericFragment,
+        });
+        return <GenericPageView {...props!} />;
+      }
+      case "StudioPage": {
+        const props = await loadStudioPageProps({
+          pageOverride: page as StudioFragment,
+        });
+        return <StudioPageView {...props} />;
+      }
+      case "SponsorsPage": {
+        const props = await loadSponsorsPageProps({
+          pageOverride: page as SponsorsPageFragment,
+        });
+        return <SponsorsPageView {...props} />;
+      }
+      case "EventPage": {
+        const props = await loadEventPageProps({
+          eventOverride: page as EventFragment,
+        });
+        return <EventPageView {...props!} />;
+      }
+      case "NewsPage": {
+        const props = await loadNewsPageProps({
+          newsOverride: page as NewsFragment,
+        });
+        return <NewsPageView {...props!} />;
+      }
+      case "AssociationPage": {
+        const props = await loadAssociationPageProps({
+          associationOverride: page as AssociationFragment,
+        });
+        return <AssociationPageView {...props!} />;
+      }
+      case "VenuePage": {
+        const props = await loadVenuePageProps({
+          venueOverride: page as VenueFragment,
+        });
+        return <VenuePageView {...props!} />;
+      }
+      case "HomePage": {
+        const props = await loadHomePageProps({
+          homeOverride: page as HomeFragment,
+        });
+        return <HomePageView {...props} />;
+      }
+      case "EventIndex": {
+        const props = await loadEventIndexProps();
+        return <EventIndexView {...props} />;
+      }
+      case "NewsIndex": {
+        const props = await loadNewsIndexProps({
+          indexOverride: page as NewsIndexFragment,
+        });
+        return <NewsIndexView {...props} />;
+      }
+      case "AssociationIndex": {
+        const props = await loadAssociationIndexProps({
+          indexOverride: page as AssociationIndexFragment,
+        });
+        return <AssociationIndexView {...props} />;
+      }
+      case "VenueIndex": {
+        const props = await loadVenueIndexProps({
+          indexOverride: page as VenueIndexFragment,
+        });
+        return <VenueIndexView {...props} />;
+      }
+      case "VenueRentalIndex": {
+        const props = await loadVenueRentalIndexProps({
+          indexOverride: page as VenueRentalIndexFragment,
+        });
+        return <VenueRentalIndexView {...props} />;
+      }
+      case "ContactIndex": {
+        const props = await loadContactIndexProps({
+          indexOverride: page as ContactIndexFragment,
+        });
+        return <ContactIndexView {...props} />;
+      }
+      default:
+        return <UnsupportedType typename={page.__typename ?? "unknown"} />;
     }
+  })();
 
-    case "EventIndex": {
-      const { data: aux } = await getClient().query(eventsOverviewQuery, {});
-      const events = (aux?.events?.futureEvents ?? []) as EventFragment[];
-      const eventCategories = (aux?.eventCategories ?? []) as EventCategory[];
-      const eventOrganizers = (aux?.eventOrganizers ?? []) as EventOrganizer[];
-      const venues = (aux?.venues ?? []) as VenueFragment[];
-      return (
-        <EventIndexView
-          events={events}
-          eventCategories={eventCategories}
-          eventOrganizers={eventOrganizers}
-          venues={venues}
-        />
-      );
-    }
-
-    case "NewsIndex": {
-      const { data: aux } = await getClient().query(newsQuery, {});
-      const news = (aux?.news ?? []) as NewsFragment[];
-      return <NewsIndexView index={page as NewsIndexFragment} news={news} />;
-    }
-
-    case "AssociationIndex": {
-      const { data: aux } = await getClient().query(allAssociationsQuery, {});
-      const associations = (aux?.associations ?? []) as AssociationFragment[];
-      return (
-        <AssociationIndexView
-          index={page as AssociationIndexFragment}
-          associations={associations}
-        />
-      );
-    }
-
-    case "VenueIndex": {
-      const { data: aux } = await getClient().query(venueIndexQuery, {});
-      const venues = (aux?.venues ?? []) as VenueFragment[];
-      return (
-        <VenueIndexView index={page as VenueIndexFragment} venues={venues} />
-      );
-    }
-
-    case "VenueRentalIndex": {
-      const { data: aux } = await getClient().query(venueRentalIndexQuery, {});
-      const venues = (aux?.venues ?? []) as VenueFragment[];
-      return (
-        <VenueRentalIndexView
-          index={page as VenueRentalIndexFragment}
-          venues={venues}
-        />
-      );
-    }
-
-    case "ContactIndex":
-      return <ContactIndexView index={page as ContactIndexFragment} />;
-
-    default:
-      return <UnsupportedType typename={page.__typename ?? "unknown"} />;
-  }
+  return (
+    <>
+      <PreviewBanner />
+      {view}
+    </>
+  );
 }

web/src/app/sponsorer/page.tsx

@@ -1,41 +1,19 @@
 import { Metadata, ResolvingMetadata } from "next";
-import { type SponsorsPageFragment } from "@/gql/graphql";
-import { getClient } from "@/app/client";
 import {
   SponsorsPageView,
-  sponsorsPageQuery,
+  loadSponsorsPageProps,
 } from "@/components/sponsor/SponsorsPageView";
 import { getSeoMetadata } from "@/lib/seo";
 
 export async function generateMetadata(
-  { params }: { params: Promise<{}> },
+  _: unknown,
   parent: ResolvingMetadata
 ): Promise<Metadata | null> {
-  const { data, error } = await getClient().query(sponsorsPageQuery, {});
-
-  if (error) {
-    throw new Error(error.message);
-  }
-  if (!data?.page) {
-    return null;
-  }
-
-  const index = data.page as SponsorsPageFragment;
-  const metadata = await getSeoMetadata(index, parent);
-  return metadata;
+  const { page } = await loadSponsorsPageProps();
+  return getSeoMetadata(page, parent);
 }
 
 export default async function Page() {
-  const { data, error } = await getClient().query(sponsorsPageQuery, {});
-
-  if (error) {
-    throw new Error(error.message);
-  }
-  if (!data?.page) {
-    throw new Error("Failed to render /sponsorer");
-  }
-
-  const page = data.page as SponsorsPageFragment;
-
-  return <SponsorsPageView page={page} />;
+  const props = await loadSponsorsPageProps();
+  return <SponsorsPageView {...props} />;
 }

web/src/app/studio/page.tsx

@@ -1,41 +1,19 @@
 import { Metadata, ResolvingMetadata } from "next";
-import { type StudioFragment } from "@/gql/graphql";
-import { getClient } from "@/app/client";
 import {
   StudioPageView,
-  studioPageQuery,
+  loadStudioPageProps,
 } from "@/components/studio/StudioPageView";
 import { getSeoMetadata } from "@/lib/seo";
 
 export async function generateMetadata(
-  { params }: { params: Promise<{}> },
+  _: unknown,
   parent: ResolvingMetadata
 ): Promise<Metadata | null> {
-  const { data, error } = await getClient().query(studioPageQuery, {});
-
-  if (error) {
-    throw new Error(error.message);
-  }
-  if (!data?.page) {
-    return null;
-  }
-
-  const page = data.page as StudioFragment;
-  const metadata = await getSeoMetadata(page, parent);
-  return metadata;
+  const { page } = await loadStudioPageProps();
+  return getSeoMetadata(page, parent);
 }
 
 export default async function Page() {
-  const { data, error } = await getClient().query(studioPageQuery, {});
-
-  if (error) {
-    throw new Error(error.message);
-  }
-  if (!data?.page) {
-    throw new Error("Failed to render /studio");
-  }
-
-  const page = data.page as StudioFragment;
-
-  return <StudioPageView page={page} />;
+  const props = await loadStudioPageProps();
+  return <StudioPageView {...props} />;
 }

web/src/app/utleie/page.tsx

@@ -1,42 +1,19 @@
 import { Metadata, ResolvingMetadata } from "next";
-import { VenueFragment, VenueRentalIndexFragment } from "@/gql/graphql";
-import { getClient } from "@/app/client";
 import {
   VenueRentalIndexView,
-  venueRentalIndexQuery,
+  loadVenueRentalIndexProps,
 } from "@/components/venues/VenueRentalIndexView";
 import { getSeoMetadata } from "@/lib/seo";
 
 export async function generateMetadata(
-  { params }: { params: Promise<{}> },
+  _: unknown,
   parent: ResolvingMetadata
 ): Promise<Metadata | null> {
-  const { data, error } = await getClient().query(venueRentalIndexQuery, {});
-
-  if (error) {
-    throw new Error(error.message);
-  }
-  if (!data?.index) {
-    return null;
-  }
-
-  const index = data.index as VenueRentalIndexFragment;
-  const metadata = await getSeoMetadata(index, parent);
-  return metadata;
+  const { index } = await loadVenueRentalIndexProps();
+  return getSeoMetadata(index, parent);
 }
 
 export default async function Page() {
-  const { data, error } = await getClient().query(venueRentalIndexQuery, {});
-
-  if (error) {
-    throw new Error(error.message);
-  }
-  if (!data?.index || !data?.venues) {
-    throw new Error("Failed to render /utleie");
-  }
-
-  const index = data.index as VenueRentalIndexFragment;
-  const venues = (data?.venues ?? []) as VenueFragment[];
-
-  return <VenueRentalIndexView index={index} venues={venues} />;
+  const props = await loadVenueRentalIndexProps();
+  return <VenueRentalIndexView {...props} />;
 }