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 props = await loadGenericPageProps({ urlPath: getWagtailUrlPath(url) });
-  const { data, error } = await getClient().query(genericPageByUrlPathQuery, {
+  if (!props) return null;
-    urlPath: urlPath,
+  return getSeoMetadata(props.page, parent);
-  });
-
-  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;
 }
 
 export default async function Page({ params }: { params: Params }) {
   const { url } = await params;
-  const urlPath = getWagtailUrlPath(url);
+  const props = await loadGenericPageProps({ urlPath: getWagtailUrlPath(url) });
-  const { data, error } = await getClient().query(genericPageByUrlPathQuery, {
+  if (!props) return notFound();
-    urlPath: urlPath,
+  return <GenericPageView {...props} />;
-  });
-  if (error) {
-    throw new Error(error.message);
-  }
-
-  if (!data?.page) {
-    return notFound();
-  }
-
-  const page = data?.page as GenericFragment;
-
-  return <GenericPageView page={page} />;
 }

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, {
+  const props = await loadNewsPageProps({ slug });
-    slug,
+  if (!props) return null;
-  });
+  return getSeoMetadata(props.news, parent);
-  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;
 }
 
 export default async function Page({ params }: { params: Params }) {
   const { slug } = await params;
-  const { data, error } = await getClient().query(newsBySlugQuery, {
+  const props = await loadNewsPageProps({ slug });
-    slug,
+  if (!props) return notFound();
-  });
+  return <NewsPageView {...props} />;
-
-  if (error) {
-    throw new Error(error.message);
-  }
-  if (!data?.news) {
-    return notFound();
-  }
-
-  const news = data?.news as NewsFragment;
-  return <NewsPageView news={news} />;
 }

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, {});
+  const { index } = await loadNewsIndexProps();
-  if (error) {
+  return getSeoMetadata(index, parent);
-    throw new Error(error.message);
-  }
-  if (!data?.index) {
-    return null;
-  }
-
-  const index = data.index as NewsIndexFragment;
-  const metadata = await getSeoMetadata(index, parent);
-  return metadata;
 }
 
 export default async function Page() {
-  const { data, error } = await getClient().query(newsQuery, {});
+  const props = await loadNewsIndexProps();
-  if (error) {
+  return <NewsIndexView {...props} />;
-    throw new Error(error.message);
-  }
-  const news = (data?.news ?? []) as NewsFragment[];
-  const index = data?.index as NewsIndexFragment;
-
-  return <NewsIndexView index={index} news={news} />;
 }

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, {
+  const props = await loadEventPageProps({ slug });
-    slug,
+  if (!props) return null;
-  });
+  return getSeoMetadata(props.event, parent);
-
-  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;
 }
 
 export default async function Page({ params }: { params: Params }) {
   const { slug } = await params;
-  const { data, error } = await getClient().query(eventBySlugQuery, {
+  const props = await loadEventPageProps({ slug });
-    slug,
+  if (!props) return notFound();
-  });
+  return <EventPageView {...props} />;
-
-  if (error) {
-    throw new Error(error.message);
-  }
-  if (!data?.event) {
-    return notFound();
-  }
-
-  const event = data.event as EventFragment;
-
-  return <EventPageView event={event} />;
 }

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,
+  EventIndexView,
-  eventIndexMetadataQuery,
+  loadEventIndexProps,
-  EventFragment,
+} from "@/components/events/EventIndexView";
-  EventCategory,
+import { EventIndexFragment } from "@/gql/graphql";
-  EventOrganizer,
+import { eventIndexMetadataQuery } from "@/lib/event";
-} from "@/lib/event";
-import { EventIndexFragment, VenueFragment } from "@/gql/graphql";
 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 (error) {
+  if (!data?.index) return null;
-    throw new Error(error.message);
+  return getSeoMetadata(data.index as EventIndexFragment, parent);
-  }
-  if (!data?.index) {
-    return null;
-  }
-
-  const index = data.index as EventIndexFragment;
-  const metadata = await getSeoMetadata(index, parent);
-  return metadata;
 }
 
 export default async function Page() {
-  const { data, error } = await getClient().query(eventsOverviewQuery, {});
+  const props = await loadEventIndexProps();
-  if (error) {
+  return <EventIndexView {...props} />;
-    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}
-    />
-  );
 }

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, {
+  const props = await loadAssociationPageProps({ slug });
-    slug,
+  if (!props) return null;
-  });
+  return getSeoMetadata(props.association, parent);
-
-  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;
 }
 
 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, {
+  const props = await loadAssociationPageProps({ slug });
-    slug,
+  if (!props) return notFound();
-  });
+  return <AssociationPageView {...props} />;
-
-  if (error) {
-    throw new Error(error.message);
-  }
-  if (!data?.association) {
-    return notFound();
-  }
-
-  const association = data.association as AssociationFragment;
-
-  return <AssociationPageView association={association} />;
 }

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, {});
+  const { index } = await loadAssociationIndexProps();
-
+  return getSeoMetadata(index, parent);
-  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;
 }
 
 export default async function Page() {
-  const { data, error } = await getClient().query(allAssociationsQuery, {});
+  const props = await loadAssociationIndexProps();
-
+  return <AssociationIndexView {...props} />;
-  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} />;
 }

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, {});
+  const { index } = await loadContactIndexProps();
-
+  return getSeoMetadata(index, parent);
-  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;
 }
 
 export default async function Page() {
-  const { data, error } = await getClient().query(contactQuery, {});
+  const props = await loadContactIndexProps();
-
+  return <ContactIndexView {...props} />;
-  if (error) {
-    throw new Error(error.message);
-  }
-  if (!data?.index) {
-    return notFound();
-  }
-
-  const index = data.index as ContactIndexFragment;
-
-  return <ContactIndexView index={index} />;
 }

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, {
+  const props = await loadVenuePageProps({ slug });
-    slug,
+  if (!props) return null;
-  });
+  return getSeoMetadata(props.venue, parent);
-
-  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;
 }
 
 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, {
+  const props = await loadVenuePageProps({ slug });
-    slug,
+  if (!props) return notFound();
-  });
+  return <VenuePageView {...props} />;
-
-  if (error) {
-    throw new Error(error.message);
-  }
-  if (!data?.venue) {
-    return notFound();
-  }
-
-  const venue = data.venue as VenueFragment;
-
-  return <VenuePageView venue={venue} />;
 }

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, {});
+  const { index } = await loadVenueIndexProps();
-
+  return getSeoMetadata(index, parent);
-  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;
 }
 
 export default async function Page() {
-  const { data, error } = await getClient().query(venueIndexQuery, {});
+  const props = await loadVenueIndexProps();
-
+  return <VenueIndexView {...props} />;
-  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} />;
 }

web/src/app/page.tsx

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

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 {
+import { cookies } from "next/headers";
-  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";
-
 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 GenericPage {
-      ... on StudioPage { ...Studio }
+        ...Generic
-      ... on SponsorsPage { ...SponsorsPage }
+      }
-      ... on HomePage { ...Home }
+      ... on StudioPage {
-      ... on EventPage { ...Event }
+        ...Studio
-      ... on NewsPage { ...News }
+      }
-      ... on AssociationPage { ...Association }
+      ... on SponsorsPage {
-      ... on VenuePage { ...Venue }
+        ...SponsorsPage
-      ... on NewsIndex { ...NewsIndex }
+      }
-      ... on AssociationIndex { ...AssociationIndex }
+      ... on HomePage {
-      ... on VenueIndex { ...VenueIndex }
+        ...Home
-      ... on VenueRentalIndex { ...VenueRentalIndex }
+      }
-      ... on ContactIndex { ...ContactIndex }
+      ... 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) {
+  const view = await (async () => {
-    case "GenericPage":
+    switch (page.__typename) {
-      return <GenericPageView page={page as GenericFragment} />;
+      case "GenericPage": {
-    case "StudioPage":
+        const props = await loadGenericPageProps({
-      return <StudioPageView page={page as StudioFragment} />;
+          pageOverride: page as GenericFragment,
-    case "SponsorsPage":
+        });
-      return <SponsorsPageView page={page as SponsorsPageFragment} />;
+        return <GenericPageView {...props!} />;
-    case "EventPage":
+      }
-      return <EventPageView event={page as EventFragment} />;
+      case "StudioPage": {
-    case "NewsPage":
+        const props = await loadStudioPageProps({
-      return <NewsPageView news={page as NewsFragment} />;
+          pageOverride: page as StudioFragment,
-    case "AssociationPage":
+        });
-      return <AssociationPageView association={page as AssociationFragment} />;
+        return <StudioPageView {...props} />;
-    case "VenuePage":
+      }
-      return <VenuePageView venue={page as VenueFragment} />;
+      case "SponsorsPage": {
-
+        const props = await loadSponsorsPageProps({
-    case "HomePage": {
+          pageOverride: page as SponsorsPageFragment,
-      const { data: aux } = await getClient().query(homeQuery, {});
+        });
-      const events = (aux?.events?.futureEvents ?? []) as EventFragment[];
+        return <SponsorsPageView {...props} />;
-      const news = (aux?.news ?? []) as NewsFragment[];
+      }
-      return (
+      case "EventPage": {
-        <HomePageView home={page as HomeFragment} events={events} news={news} />
+        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": {
+  return (
-      const { data: aux } = await getClient().query(eventsOverviewQuery, {});
+    <>
-      const events = (aux?.events?.futureEvents ?? []) as EventFragment[];
+      <PreviewBanner />
-      const eventCategories = (aux?.eventCategories ?? []) as EventCategory[];
+      {view}
-      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"} />;
-  }
 }

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, {});
+  const { page } = await loadSponsorsPageProps();
-
+  return getSeoMetadata(page, parent);
-  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;
 }
 
 export default async function Page() {
-  const { data, error } = await getClient().query(sponsorsPageQuery, {});
+  const props = await loadSponsorsPageProps();
-
+  return <SponsorsPageView {...props} />;
-  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} />;
 }

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, {});
+  const { page } = await loadStudioPageProps();
-
+  return getSeoMetadata(page, parent);
-  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;
 }
 
 export default async function Page() {
-  const { data, error } = await getClient().query(studioPageQuery, {});
+  const props = await loadStudioPageProps();
-
+  return <StudioPageView {...props} />;
-  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} />;
 }

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, {});
+  const { index } = await loadVenueRentalIndexProps();
-
+  return getSeoMetadata(index, parent);
-  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;
 }
 
 export default async function Page() {
-  const { data, error } = await getClient().query(venueRentalIndexQuery, {});
+  const props = await loadVenueRentalIndexProps();
-
+  return <VenueRentalIndexView {...props} />;
-  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} />;
 }

web/src/components/associations/AssociationIndexView.tsx

@@ -1,5 +1,6 @@
 import { graphql } from "@/gql";
 import { AssociationFragment, AssociationIndexFragment } from "@/gql/graphql";
+import { getClient } from "@/app/client";
 import { AssociationList } from "@/components/associations/AssociationList";
 import { PageHeader } from "@/components/general/PageHeader";
 import { PageContent } from "@/components/general/PageContent";
@@ -40,7 +41,7 @@ const AssociationFragmentDefinition = graphql(`
   }
 `);
 
-export const allAssociationsQuery = graphql(`
+const allAssociationsQuery = graphql(`
   query allAssociations {
     index: associationIndex {
       ... on AssociationIndex {
@@ -58,13 +59,27 @@ export const allAssociationsQuery = graphql(`
   }
 `);
 
+export type AssociationIndexViewProps = {
+  index: AssociationIndexFragment;
+  associations: AssociationFragment[];
+};
+
+export async function loadAssociationIndexProps(overrides?: {
+  indexOverride?: AssociationIndexFragment;
+}): Promise<AssociationIndexViewProps> {
+  const { data, error } = await getClient().query(allAssociationsQuery, {});
+  if (error) throw new Error(error.message);
+  const index =
+    overrides?.indexOverride ?? (data?.index as AssociationIndexFragment | undefined);
+  if (!index) throw new Error("Failed to load /foreninger");
+  const associations = (data?.associations ?? []) as AssociationFragment[];
+  return { index, associations };
+}
+
 export function AssociationIndexView({
   index,
   associations,
-}: {
+}: AssociationIndexViewProps) {
-  index: AssociationIndexFragment;
-  associations: AssociationFragment[];
-}) {
   return (
     <main className="site-main" id="main">
       <PageHeader heading={index.title} lead={index.lead} />

web/src/components/associations/AssociationPageView.tsx

@@ -1,9 +1,10 @@
 import { graphql } from "@/gql";
 import { AssociationFragment } from "@/gql/graphql";
+import { getClient } from "@/app/client";
 import { AssociationHeader } from "@/components/associations/AssociationHeader";
 import { PageContent } from "@/components/general/PageContent";
 
-export const associationBySlugQuery = graphql(`
+const associationBySlugQuery = graphql(`
   query associationBySlug($slug: String!) {
     association: page(
       contentType: "associations.AssociationPage"
@@ -16,11 +17,26 @@ export const associationBySlugQuery = graphql(`
   }
 `);
 
-export function AssociationPageView({
+export type AssociationPageViewProps = { association: AssociationFragment };
-  association,
+
-}: {
+export async function loadAssociationPageProps(args: {
-  association: AssociationFragment;
+  slug?: string;
-}) {
+  associationOverride?: AssociationFragment;
+}): Promise<AssociationPageViewProps | null> {
+  if (args.associationOverride) {
+    return { association: args.associationOverride };
+  }
+  if (!args.slug) throw new Error("loadAssociationPageProps needs slug or associationOverride");
+  const { data, error } = await getClient().query(associationBySlugQuery, {
+    slug: args.slug,
+  });
+  if (error) throw new Error(error.message);
+  const association = data?.association as AssociationFragment | undefined;
+  if (!association) return null;
+  return { association };
+}
+
+export function AssociationPageView({ association }: AssociationPageViewProps) {
   return (
     <main className="site-main" id="main">
       <AssociationHeader association={association} />

web/src/components/contact/ContactIndexView.tsx

@@ -1,5 +1,6 @@
 import { graphql } from "@/gql";
 import { ContactIndexFragment } from "@/gql/graphql";
+import { getClient } from "@/app/client";
 import { GeneralContactBlock } from "@/components/blocks/GeneralContactBlock";
 import { PageContent } from "@/components/general/PageContent";
 import { PageHeader } from "@/components/general/PageHeader";
@@ -17,7 +18,7 @@ const ContactIndexDefinition = graphql(`
   }
 `);
 
-export const contactQuery = graphql(`
+const contactQuery = graphql(`
   query contacts {
     index: contactIndex {
       ... on ContactIndex {
@@ -27,7 +28,22 @@ export const contactQuery = graphql(`
   }
 `);
 
-export function ContactIndexView({ index }: { index: ContactIndexFragment }) {
+export type ContactIndexViewProps = { index: ContactIndexFragment };
+
+export async function loadContactIndexProps(overrides?: {
+  indexOverride?: ContactIndexFragment;
+}): Promise<ContactIndexViewProps> {
+  if (overrides?.indexOverride) {
+    return { index: overrides.indexOverride };
+  }
+  const { data, error } = await getClient().query(contactQuery, {});
+  if (error) throw new Error(error.message);
+  const index = data?.index as ContactIndexFragment | undefined;
+  if (!index) throw new Error("Failed to load /kontakt");
+  return { index };
+}
+
+export function ContactIndexView({ index }: ContactIndexViewProps) {
   return (
     <main className="site-main" id="main">
       <PageHeader heading={index.title} lead={index.lead} />

web/src/components/events/EventIndexView.tsx

@@ -1,20 +1,48 @@
 import { Suspense } from "react";
 import { VenueFragment } from "@/gql/graphql";
+import { getClient } from "@/app/client";
 import { EventContainer } from "@/components/events/EventContainer";
 import { PageHeader } from "@/components/general/PageHeader";
-import { EventCategory, EventFragment, EventOrganizer } from "@/lib/event";
+import {
+  EventCategory,
+  EventFragment,
+  EventOrganizer,
+  eventsOverviewQuery,
+} from "@/lib/event";
+
+export type EventIndexViewProps = {
+  events: EventFragment[];
+  eventCategories: EventCategory[];
+  eventOrganizers: EventOrganizer[];
+  venues: VenueFragment[];
+};
+
+export async function loadEventIndexProps(): Promise<EventIndexViewProps> {
+  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 load /arrangementer");
+  }
+  return {
+    events: data.events.futureEvents as EventFragment[],
+    eventCategories: data.eventCategories as EventCategory[],
+    eventOrganizers: data.eventOrganizers as EventOrganizer[],
+    venues: data.venues as VenueFragment[],
+  };
+}
 
 export function EventIndexView({
   events,
   eventCategories,
   eventOrganizers,
   venues,
-}: {
+}: EventIndexViewProps) {
-  events: EventFragment[];
-  eventCategories: EventCategory[];
-  eventOrganizers: EventOrganizer[];
-  venues: VenueFragment[];
-}) {
   return (
     <main className="site-main" id="main">
       <PageHeader heading="Dette skjer på Chateau Neuf" align="left" />

web/src/components/events/EventPageView.tsx

@@ -1,12 +1,13 @@
 import { graphql } from "@/gql";
 import { EventFragment } from "@/gql/graphql";
+import { getClient } from "@/app/client";
 import { EventDetails } from "@/components/events/EventDetails";
 import { EventHeader } from "@/components/events/EventHeader";
 import { BgPig } from "@/components/general/BgPig";
 import { PageContent } from "@/components/general/PageContent";
 import { getEventPig } from "@/lib/event";
 
-export const eventBySlugQuery = graphql(`
+const eventBySlugQuery = graphql(`
   query eventBySlug($slug: String!) {
     event: page(contentType: "events.EventPage", slug: $slug) {
       ... on EventPage {
@@ -16,7 +17,26 @@ export const eventBySlugQuery = graphql(`
   }
 `);
 
-export function EventPageView({ event }: { event: EventFragment }) {
+export type EventPageViewProps = { event: EventFragment };
+
+export async function loadEventPageProps(args: {
+  slug?: string;
+  eventOverride?: EventFragment;
+}): Promise<EventPageViewProps | null> {
+  if (args.eventOverride) {
+    return { event: args.eventOverride };
+  }
+  if (!args.slug) throw new Error("loadEventPageProps needs slug or eventOverride");
+  const { data, error } = await getClient().query(eventBySlugQuery, {
+    slug: args.slug,
+  });
+  if (error) throw new Error(error.message);
+  const event = data?.event as EventFragment | undefined;
+  if (!event) return null;
+  return { event };
+}
+
+export function EventPageView({ event }: EventPageViewProps) {
   const eventPig = getEventPig(event);
 
   return (

web/src/components/general/GenericPageView.tsx

@@ -1,5 +1,6 @@
 import { graphql } from "@/gql";
 import { GenericFragment } from "@/gql/graphql";
+import { getClient } from "@/app/client";
 import { PageHeader } from "@/components/general/PageHeader";
 import { PageContent } from "@/components/general/PageContent";
 import { BgPig } from "@/components/general/BgPig";
@@ -20,7 +21,7 @@ const GenericFragmentDefinition = graphql(`
   }
 `);
 
-export const genericPageByUrlPathQuery = graphql(`
+const genericPageByUrlPathQuery = graphql(`
   query genericPageByUrl($urlPath: String!) {
     page: page(contentType: "generic.GenericPage", urlPath: $urlPath) {
       ... on GenericPage {
@@ -30,7 +31,26 @@ export const genericPageByUrlPathQuery = graphql(`
   }
 `);
 
-export function GenericPageView({ page }: { page: GenericFragment }) {
+export type GenericPageViewProps = { page: GenericFragment };
+
+export async function loadGenericPageProps(args: {
+  urlPath?: string;
+  pageOverride?: GenericFragment;
+}): Promise<GenericPageViewProps | null> {
+  if (args.pageOverride) {
+    return { page: args.pageOverride };
+  }
+  if (!args.urlPath) throw new Error("loadGenericPageProps needs urlPath or pageOverride");
+  const { data, error } = await getClient().query(genericPageByUrlPathQuery, {
+    urlPath: args.urlPath,
+  });
+  if (error) throw new Error(error.message);
+  const page = data?.page as GenericFragment | undefined;
+  if (!page) return null;
+  return { page };
+}
+
+export function GenericPageView({ page }: GenericPageViewProps) {
   return (
     <>
       <main className="site-main" id="main">

web/src/components/home/HomePageView.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { graphql } from "@/gql";
 import { HomeFragment } from "@/gql/graphql";
+import { getClient } from "@/app/client";
 import { EventFragment } from "@/lib/event";
 import { NewsFragment } from "@/lib/news";
 import { FeaturedEvents } from "@/components/events/FeaturedEvents";
@@ -21,7 +22,7 @@ const HomeFragmentDefinition = graphql(`
   }
 `);
 
-export const homeQuery = graphql(`
+const homeQuery = graphql(`
   query home {
     events: eventIndex {
       ... on EventIndex {
@@ -45,15 +46,25 @@ export const homeQuery = graphql(`
   }
 `);
 
-export function HomePageView({
+export type HomePageViewProps = {
-  home,
-  events,
-  news,
-}: {
   home: HomeFragment;
   events: EventFragment[];
   news: NewsFragment[];
-}) {
+};
+
+export async function loadHomePageProps(overrides?: {
+  homeOverride?: HomeFragment;
+}): Promise<HomePageViewProps> {
+  const { data, error } = await getClient().query(homeQuery, {});
+  if (error) throw new Error(error.message);
+  const home = overrides?.homeOverride ?? (data?.home as HomeFragment | undefined);
+  if (!home) throw new Error("Failed to load /");
+  const events = (data?.events?.futureEvents ?? []) as EventFragment[];
+  const news = (data?.news ?? []) as NewsFragment[];
+  return { home, events, news };
+}
+
+export function HomePageView({ home, events, news }: HomePageViewProps) {
   const featuredEventIds = home.featuredEvents.map((x) => x.id);
   const featuredEvents = [
     ...events.filter((x) => featuredEventIds.includes(x.id)),

web/src/components/news/NewsIndexView.tsx

@@ -1,14 +1,25 @@
+import { getClient } from "@/app/client";
 import { PageHeader } from "@/components/general/PageHeader";
 import { NewsList } from "@/components/news/NewsList";
-import { NewsFragment, NewsIndexFragment } from "@/lib/news";
+import { NewsFragment, NewsIndexFragment, newsQuery } from "@/lib/news";
 
-export function NewsIndexView({
+export type NewsIndexViewProps = {
-  index,
-  news,
-}: {
   index: NewsIndexFragment;
   news: NewsFragment[];
-}) {
+};
+
+export async function loadNewsIndexProps(overrides?: {
+  indexOverride?: NewsIndexFragment;
+}): Promise<NewsIndexViewProps> {
+  const { data, error } = await getClient().query(newsQuery, {});
+  if (error) throw new Error(error.message);
+  const index = overrides?.indexOverride ?? (data?.index as NewsIndexFragment | undefined);
+  if (!index) throw new Error("Failed to load /aktuelt");
+  const news = (data?.news ?? []) as NewsFragment[];
+  return { index, news };
+}
+
+export function NewsIndexView({ index, news }: NewsIndexViewProps) {
   return (
     <main className="site-main" id="main">
       <PageHeader heading={index.title} lead={index.lead} align="left" />

web/src/components/news/NewsPageView.tsx

@@ -1,11 +1,12 @@
 import { graphql } from "@/gql";
 import { NewsFragment } from "@/gql/graphql";
+import { getClient } from "@/app/client";
 import { Breadcrumb } from "@/components/general/Breadcrumb";
 import { ImageFigure } from "@/components/general/Image";
 import { PageContent } from "@/components/general/PageContent";
 import { formatDate } from "@/lib/date";
 
-export const newsBySlugQuery = graphql(`
+const newsBySlugQuery = graphql(`
   query newsBySlug($slug: String!) {
     news: page(contentType: "news.NewsPage", slug: $slug) {
       ... on NewsPage {
@@ -15,7 +16,26 @@ export const newsBySlugQuery = graphql(`
   }
 `);
 
-export function NewsPageView({ news }: { news: NewsFragment }) {
+export type NewsPageViewProps = { news: NewsFragment };
+
+export async function loadNewsPageProps(args: {
+  slug?: string;
+  newsOverride?: NewsFragment;
+}): Promise<NewsPageViewProps | null> {
+  if (args.newsOverride) {
+    return { news: args.newsOverride };
+  }
+  if (!args.slug) throw new Error("loadNewsPageProps needs slug or newsOverride");
+  const { data, error } = await getClient().query(newsBySlugQuery, {
+    slug: args.slug,
+  });
+  if (error) throw new Error(error.message);
+  const news = data?.news as NewsFragment | undefined;
+  if (!news) return null;
+  return { news };
+}
+
+export function NewsPageView({ news }: NewsPageViewProps) {
   const featuredImage: any = news.featuredImage;
   return (
     <main className="site-main" id="main">

web/src/components/sponsor/SponsorsPageView.tsx

@@ -1,5 +1,6 @@
 import { graphql } from "@/gql";
 import { type SponsorFragment, type SponsorsPageFragment } from "@/gql/graphql";
+import { getClient } from "@/app/client";
 import { PageHeader } from "@/components/general/PageHeader";
 import { PageContent } from "@/components/general/PageContent";
 import { SponsorList } from "@/components/sponsor/SponsorList";
@@ -22,7 +23,7 @@ const SponsorsPageFragmentDefinition = graphql(`
   }
 `);
 
-export const sponsorsPageQuery = graphql(`
+const sponsorsPageQuery = graphql(`
   query sponsors {
     page: sponsorsPage {
       ... on SponsorsPage {
@@ -32,7 +33,22 @@ export const sponsorsPageQuery = graphql(`
   }
 `);
 
-export function SponsorsPageView({ page }: { page: SponsorsPageFragment }) {
+export type SponsorsPageViewProps = { page: SponsorsPageFragment };
+
+export async function loadSponsorsPageProps(overrides?: {
+  pageOverride?: SponsorsPageFragment;
+}): Promise<SponsorsPageViewProps> {
+  if (overrides?.pageOverride) {
+    return { page: overrides.pageOverride };
+  }
+  const { data, error } = await getClient().query(sponsorsPageQuery, {});
+  if (error) throw new Error(error.message);
+  const page = data?.page as SponsorsPageFragment | undefined;
+  if (!page) throw new Error("Failed to load /sponsorer");
+  return { page };
+}
+
+export function SponsorsPageView({ page }: SponsorsPageViewProps) {
   return (
     <main className="site-main" id="main">
       <PageHeader heading={page.title} lead={page.lead} />

web/src/components/studio/StudioPageView.tsx

@@ -1,5 +1,6 @@
 import { graphql } from "@/gql";
 import { type StudioFragment } from "@/gql/graphql";
+import { getClient } from "@/app/client";
 import { PageContent } from "@/components/general/PageContent";
 import { BgPig } from "@/components/general/BgPig";
 import { StudioHeader } from "@/components/studio/StudioHeader";
@@ -25,7 +26,7 @@ const StudioFragmentDefinition = graphql(`
   }
 `);
 
-export const studioPageQuery = graphql(`
+const studioPageQuery = graphql(`
   query studio {
     page: studioPage {
       ... on StudioPage {
@@ -35,7 +36,22 @@ export const studioPageQuery = graphql(`
   }
 `);
 
-export function StudioPageView({ page }: { page: StudioFragment }) {
+export type StudioPageViewProps = { page: StudioFragment };
+
+export async function loadStudioPageProps(overrides?: {
+  pageOverride?: StudioFragment;
+}): Promise<StudioPageViewProps> {
+  if (overrides?.pageOverride) {
+    return { page: overrides.pageOverride };
+  }
+  const { data, error } = await getClient().query(studioPageQuery, {});
+  if (error) throw new Error(error.message);
+  const page = data?.page as StudioFragment | undefined;
+  if (!page) throw new Error("Failed to load /studio");
+  return { page };
+}
+
+export function StudioPageView({ page }: StudioPageViewProps) {
   return (
     <>
       <main className="site-main" id="main">

web/src/components/venues/VenueIndexView.tsx

@@ -1,5 +1,6 @@
 import { graphql } from "@/gql";
 import { VenueFragment, VenueIndexFragment } from "@/gql/graphql";
+import { getClient } from "@/app/client";
 import { PageContent } from "@/components/general/PageContent";
 import { PageHeader } from "@/components/general/PageHeader";
 import { VenueList } from "@/components/venues/VenueList";
@@ -53,7 +54,7 @@ const VenueFragmentDefinition = graphql(`
   }
 `);
 
-export const venueIndexQuery = graphql(`
+const venueIndexQuery = graphql(`
   query venueIndex {
     index: venueIndex {
       ... on VenueIndex {
@@ -68,13 +69,23 @@ export const venueIndexQuery = graphql(`
   }
 `);
 
-export function VenueIndexView({
+export type VenueIndexViewProps = {
-  index,
-  venues,
-}: {
   index: VenueIndexFragment;
   venues: VenueFragment[];
-}) {
+};
+
+export async function loadVenueIndexProps(overrides?: {
+  indexOverride?: VenueIndexFragment;
+}): Promise<VenueIndexViewProps> {
+  const { data, error } = await getClient().query(venueIndexQuery, {});
+  if (error) throw new Error(error.message);
+  const index = overrides?.indexOverride ?? (data?.index as VenueIndexFragment | undefined);
+  if (!index) throw new Error("Failed to load /lokaler");
+  const venues = (data?.venues ?? []) as VenueFragment[];
+  return { index, venues };
+}
+
+export function VenueIndexView({ index, venues }: VenueIndexViewProps) {
   const visibleVenues = venues.filter((x) => x.showInOverview);
 
   return (

web/src/components/venues/VenuePageView.tsx

@@ -1,4 +1,5 @@
 import { VenueFragment } from "@/gql/graphql";
+import { getClient } from "@/app/client";
 import {
   ImageSliderBlock,
   ImageSliderBlockFragmentDefinition,
@@ -9,7 +10,7 @@ import { NeufMap } from "@/components/venues/NeufMap";
 import { VenueInfo } from "@/components/venues/VenueInfo";
 import { graphql, unmaskFragment } from "@/gql";
 
-export const venueBySlugQuery = graphql(`
+const venueBySlugQuery = graphql(`
   query venueBySlug($slug: String!) {
     venue: page(contentType: "venues.VenuePage", slug: $slug) {
       ... on VenuePage {
@@ -19,7 +20,26 @@ export const venueBySlugQuery = graphql(`
   }
 `);
 
-export function VenuePageView({ venue }: { venue: VenueFragment }) {
+export type VenuePageViewProps = { venue: VenueFragment };
+
+export async function loadVenuePageProps(args: {
+  slug?: string;
+  venueOverride?: VenueFragment;
+}): Promise<VenuePageViewProps | null> {
+  if (args.venueOverride) {
+    return { venue: args.venueOverride };
+  }
+  if (!args.slug) throw new Error("loadVenuePageProps needs slug or venueOverride");
+  const { data, error } = await getClient().query(venueBySlugQuery, {
+    slug: args.slug,
+  });
+  if (error) throw new Error(error.message);
+  const venue = data?.venue as VenueFragment | undefined;
+  if (!venue) return null;
+  return { venue };
+}
+
+export function VenuePageView({ venue }: VenuePageViewProps) {
   return (
     <main className="site-main" id="main">
       {venue.images?.[0]?.__typename === "ImageSliderBlock" && (

web/src/components/venues/VenueRentalIndexView.tsx

@@ -1,5 +1,6 @@
 import { graphql } from "@/gql";
 import { VenueFragment, VenueRentalIndexFragment } from "@/gql/graphql";
+import { getClient } from "@/app/client";
 import { BgPig } from "@/components/general/BgPig";
 import { PageContent } from "@/components/general/PageContent";
 import { PageHeader } from "@/components/general/PageHeader";
@@ -18,7 +19,7 @@ const VenueRentalIndexDefinition = graphql(`
   }
 `);
 
-export const venueRentalIndexQuery = graphql(`
+const venueRentalIndexQuery = graphql(`
   query venueRentalIndex {
     index: venueRentalIndex {
       ... on VenueRentalIndex {
@@ -33,13 +34,27 @@ export const venueRentalIndexQuery = graphql(`
   }
 `);
 
+export type VenueRentalIndexViewProps = {
+  index: VenueRentalIndexFragment;
+  venues: VenueFragment[];
+};
+
+export async function loadVenueRentalIndexProps(overrides?: {
+  indexOverride?: VenueRentalIndexFragment;
+}): Promise<VenueRentalIndexViewProps> {
+  const { data, error } = await getClient().query(venueRentalIndexQuery, {});
+  if (error) throw new Error(error.message);
+  const index =
+    overrides?.indexOverride ?? (data?.index as VenueRentalIndexFragment | undefined);
+  if (!index) throw new Error("Failed to load /utleie");
+  const venues = (data?.venues ?? []) as VenueFragment[];
+  return { index, venues };
+}
+
 export function VenueRentalIndexView({
   index,
   venues,
-}: {
+}: VenueRentalIndexViewProps) {
-  index: VenueRentalIndexFragment;
-  venues: VenueFragment[];
-}) {
   const bookableVenues = venues.filter((venue) => venue.showAsBookable);
 
   return (

web/src/gql/gql.ts

@@ -19,7 +19,7 @@ type Documents = {
     "\n    query allEventSlugs {\n      pages(contentType: \"events.EventPage\") {\n        id\n        slug\n      }\n    }\n  ": typeof types.AllEventSlugsDocument,
     "\n    query allAssociationSlugs {\n      pages(contentType: \"associations.AssociationPage\") {\n        id\n        slug\n      }\n    }\n  ": typeof types.AllAssociationSlugsDocument,
     "\n    query allVenueSlugs {\n      pages(contentType: \"venues.VenuePage\", limit: 100) {\n        id\n        slug\n      }\n    }\n  ": typeof types.AllVenueSlugsDocument,
-    "\n  query previewPage($token: String!) {\n    page: page(token: $token) {\n      __typename\n      ... on GenericPage { ...Generic }\n      ... on StudioPage { ...Studio }\n      ... on SponsorsPage { ...SponsorsPage }\n      ... on HomePage { ...Home }\n      ... on EventPage { ...Event }\n      ... on NewsPage { ...News }\n      ... on AssociationPage { ...Association }\n      ... on VenuePage { ...Venue }\n      ... on NewsIndex { ...NewsIndex }\n      ... on AssociationIndex { ...AssociationIndex }\n      ... on VenueIndex { ...VenueIndex }\n      ... on VenueRentalIndex { ...VenueRentalIndex }\n      ... on ContactIndex { ...ContactIndex }\n    }\n  }\n": typeof types.PreviewPageDocument,
+    "\n  query previewPage($token: String!) {\n    page: page(token: $token) {\n      __typename\n      ... on GenericPage {\n        ...Generic\n      }\n      ... on StudioPage {\n        ...Studio\n      }\n      ... on SponsorsPage {\n        ...SponsorsPage\n      }\n      ... on HomePage {\n        ...Home\n      }\n      ... on EventPage {\n        ...Event\n      }\n      ... on NewsPage {\n        ...News\n      }\n      ... on AssociationPage {\n        ...Association\n      }\n      ... on VenuePage {\n        ...Venue\n      }\n      ... on NewsIndex {\n        ...NewsIndex\n      }\n      ... on AssociationIndex {\n        ...AssociationIndex\n      }\n      ... on VenueIndex {\n        ...VenueIndex\n      }\n      ... on VenueRentalIndex {\n        ...VenueRentalIndex\n      }\n      ... on ContactIndex {\n        ...ContactIndex\n      }\n    }\n  }\n": typeof types.PreviewPageDocument,
     "\n      query search($query: String) {\n        results: search(query: $query) {\n          __typename\n          ... on PageInterface {\n            slug\n          }\n          ... on NewsPage {\n            id\n            title\n          }\n          ... on EventPage {\n            id\n            title\n          }\n          ... on GenericPage {\n            id\n            title\n          }\n          ... on VenuePage {\n            id\n            title\n          }\n          ... on AssociationPage {\n            id\n            title\n            associationType\n          }\n        }\n      }\n    ": typeof types.SearchDocument,
     "\n  fragment AssociationIndex on AssociationIndex {\n    __typename\n    title\n    seoTitle\n    searchDescription\n    lead\n    body {\n      ...Blocks\n    }\n  }\n": typeof types.AssociationIndexFragmentDoc,
     "\n  fragment Association on AssociationPage {\n    __typename\n    id\n    slug\n    title\n    seoTitle\n    searchDescription\n    excerpt\n    lead\n    body {\n      ...Blocks\n    }\n    logo {\n      url\n      width\n      height\n    }\n    associationType\n    websiteUrl\n  }\n": typeof types.AssociationFragmentDoc,
@@ -83,7 +83,7 @@ const documents: Documents = {
     "\n    query allEventSlugs {\n      pages(contentType: \"events.EventPage\") {\n        id\n        slug\n      }\n    }\n  ": types.AllEventSlugsDocument,
     "\n    query allAssociationSlugs {\n      pages(contentType: \"associations.AssociationPage\") {\n        id\n        slug\n      }\n    }\n  ": types.AllAssociationSlugsDocument,
     "\n    query allVenueSlugs {\n      pages(contentType: \"venues.VenuePage\", limit: 100) {\n        id\n        slug\n      }\n    }\n  ": types.AllVenueSlugsDocument,
-    "\n  query previewPage($token: String!) {\n    page: page(token: $token) {\n      __typename\n      ... on GenericPage { ...Generic }\n      ... on StudioPage { ...Studio }\n      ... on SponsorsPage { ...SponsorsPage }\n      ... on HomePage { ...Home }\n      ... on EventPage { ...Event }\n      ... on NewsPage { ...News }\n      ... on AssociationPage { ...Association }\n      ... on VenuePage { ...Venue }\n      ... on NewsIndex { ...NewsIndex }\n      ... on AssociationIndex { ...AssociationIndex }\n      ... on VenueIndex { ...VenueIndex }\n      ... on VenueRentalIndex { ...VenueRentalIndex }\n      ... on ContactIndex { ...ContactIndex }\n    }\n  }\n": types.PreviewPageDocument,
+    "\n  query previewPage($token: String!) {\n    page: page(token: $token) {\n      __typename\n      ... on GenericPage {\n        ...Generic\n      }\n      ... on StudioPage {\n        ...Studio\n      }\n      ... on SponsorsPage {\n        ...SponsorsPage\n      }\n      ... on HomePage {\n        ...Home\n      }\n      ... on EventPage {\n        ...Event\n      }\n      ... on NewsPage {\n        ...News\n      }\n      ... on AssociationPage {\n        ...Association\n      }\n      ... on VenuePage {\n        ...Venue\n      }\n      ... on NewsIndex {\n        ...NewsIndex\n      }\n      ... on AssociationIndex {\n        ...AssociationIndex\n      }\n      ... on VenueIndex {\n        ...VenueIndex\n      }\n      ... on VenueRentalIndex {\n        ...VenueRentalIndex\n      }\n      ... on ContactIndex {\n        ...ContactIndex\n      }\n    }\n  }\n": types.PreviewPageDocument,
     "\n      query search($query: String) {\n        results: search(query: $query) {\n          __typename\n          ... on PageInterface {\n            slug\n          }\n          ... on NewsPage {\n            id\n            title\n          }\n          ... on EventPage {\n            id\n            title\n          }\n          ... on GenericPage {\n            id\n            title\n          }\n          ... on VenuePage {\n            id\n            title\n          }\n          ... on AssociationPage {\n            id\n            title\n            associationType\n          }\n        }\n      }\n    ": types.SearchDocument,
     "\n  fragment AssociationIndex on AssociationIndex {\n    __typename\n    title\n    seoTitle\n    searchDescription\n    lead\n    body {\n      ...Blocks\n    }\n  }\n": types.AssociationIndexFragmentDoc,
     "\n  fragment Association on AssociationPage {\n    __typename\n    id\n    slug\n    title\n    seoTitle\n    searchDescription\n    excerpt\n    lead\n    body {\n      ...Blocks\n    }\n    logo {\n      url\n      width\n      height\n    }\n    associationType\n    websiteUrl\n  }\n": types.AssociationFragmentDoc,
@@ -179,7 +179,7 @@ export function graphql(source: "\n    query allVenueSlugs {\n      pages(conten
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  query previewPage($token: String!) {\n    page: page(token: $token) {\n      __typename\n      ... on GenericPage { ...Generic }\n      ... on StudioPage { ...Studio }\n      ... on SponsorsPage { ...SponsorsPage }\n      ... on HomePage { ...Home }\n      ... on EventPage { ...Event }\n      ... on NewsPage { ...News }\n      ... on AssociationPage { ...Association }\n      ... on VenuePage { ...Venue }\n      ... on NewsIndex { ...NewsIndex }\n      ... on AssociationIndex { ...AssociationIndex }\n      ... on VenueIndex { ...VenueIndex }\n      ... on VenueRentalIndex { ...VenueRentalIndex }\n      ... on ContactIndex { ...ContactIndex }\n    }\n  }\n"): (typeof documents)["\n  query previewPage($token: String!) {\n    page: page(token: $token) {\n      __typename\n      ... on GenericPage { ...Generic }\n      ... on StudioPage { ...Studio }\n      ... on SponsorsPage { ...SponsorsPage }\n      ... on HomePage { ...Home }\n      ... on EventPage { ...Event }\n      ... on NewsPage { ...News }\n      ... on AssociationPage { ...Association }\n      ... on VenuePage { ...Venue }\n      ... on NewsIndex { ...NewsIndex }\n      ... on AssociationIndex { ...AssociationIndex }\n      ... on VenueIndex { ...VenueIndex }\n      ... on VenueRentalIndex { ...VenueRentalIndex }\n      ... on ContactIndex { ...ContactIndex }\n    }\n  }\n"];
+export function graphql(source: "\n  query previewPage($token: String!) {\n    page: page(token: $token) {\n      __typename\n      ... on GenericPage {\n        ...Generic\n      }\n      ... on StudioPage {\n        ...Studio\n      }\n      ... on SponsorsPage {\n        ...SponsorsPage\n      }\n      ... on HomePage {\n        ...Home\n      }\n      ... on EventPage {\n        ...Event\n      }\n      ... on NewsPage {\n        ...News\n      }\n      ... on AssociationPage {\n        ...Association\n      }\n      ... on VenuePage {\n        ...Venue\n      }\n      ... on NewsIndex {\n        ...NewsIndex\n      }\n      ... on AssociationIndex {\n        ...AssociationIndex\n      }\n      ... on VenueIndex {\n        ...VenueIndex\n      }\n      ... on VenueRentalIndex {\n        ...VenueRentalIndex\n      }\n      ... on ContactIndex {\n        ...ContactIndex\n      }\n    }\n  }\n"): (typeof documents)["\n  query previewPage($token: String!) {\n    page: page(token: $token) {\n      __typename\n      ... on GenericPage {\n        ...Generic\n      }\n      ... on StudioPage {\n        ...Studio\n      }\n      ... on SponsorsPage {\n        ...SponsorsPage\n      }\n      ... on HomePage {\n        ...Home\n      }\n      ... on EventPage {\n        ...Event\n      }\n      ... on NewsPage {\n        ...News\n      }\n      ... on AssociationPage {\n        ...Association\n      }\n      ... on VenuePage {\n        ...Venue\n      }\n      ... on NewsIndex {\n        ...NewsIndex\n      }\n      ... on AssociationIndex {\n        ...AssociationIndex\n      }\n      ... on VenueIndex {\n        ...VenueIndex\n      }\n      ... on VenueRentalIndex {\n        ...VenueRentalIndex\n      }\n      ... on ContactIndex {\n        ...ContactIndex\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */