web: change preview banner styling

dnscms/associations/models.py

@@ -10,13 +10,14 @@ from wagtail.admin.panels import FieldPanel
 from wagtail.fields import RichTextField
 from wagtail.models import Page
 from wagtail.search import index
+from wagtail_headless_preview.models import HeadlessMixin
 
 from dnscms.fields import CommonStreamField
 from dnscms.wordpress.models import WPImportedPageMixin
 
 
 @register_singular_query_field("associationIndex")
-class AssociationIndex(Page):
+class AssociationIndex(HeadlessMixin, Page):
     max_count = 1
     subpage_types = ["associations.AssociationPage"]
 
@@ -37,7 +38,7 @@ class AssociationIndex(Page):
     search_fields = Page.search_fields
 
 
-class AssociationPage(WPImportedPageMixin, Page):
+class AssociationPage(HeadlessMixin, WPImportedPageMixin, Page):
     subpage_types = []
     parent_page_types = ["associations.AssociationIndex"]
     show_in_menus = False

dnscms/contacts/models.py

@@ -11,6 +11,7 @@ from wagtail.fields import RichTextField, StreamField
 from wagtail.models import Page
 from wagtail.search import index
 from wagtail.snippets.models import register_snippet
+from wagtail_headless_preview.models import HeadlessMixin
 
 from contacts.blocks import ContactSectionBlock
 from dnscms.blocks import BASE_BLOCKS
@@ -22,7 +23,7 @@ PHONE_REGEX_VALIDATOR = RegexValidator(
 
 
 @register_singular_query_field("contactIndex")
-class ContactIndex(Page):
+class ContactIndex(HeadlessMixin, Page):
     max_count = 1
     subpage_types = []
 

dnscms/dnscms/settings/base.py

@@ -41,6 +41,7 @@ INSTALLED_APPS = [
     # end cms apps
     "grapple",
     "graphene_django",
+    "wagtail_headless_preview",
     "wagtail.contrib.forms",
     "wagtail.contrib.redirects",
     "wagtail.contrib.settings",
@@ -185,11 +186,22 @@ WAGTAILSEARCH_BACKENDS = {
 }
 
 # Base URL to use when referring to full URLs within the Wagtail admin backend -
-# e.g. in notification emails. Don't include '/admin' or a trailing slash
+# e.g. in notification emails. Don't include '/admin' or a trailing slash.
-WAGTAILADMIN_BASE_URL = "http://example.com"
+# Also used by wagtail-grapple to make image URLs absolute.
+WAGTAIL_BASE_URL = os.environ.get("WAGTAIL_BASE_URL", "http://127.0.0.1:8000").rstrip("/")
+WAGTAILADMIN_BASE_URL = WAGTAIL_BASE_URL
+BASE_URL = WAGTAIL_BASE_URL
 
-# Required by wagtail-grapple to make image URLs absolute
+# Public URL of the Next.js frontend. Used to direct preview iframes and to
-BASE_URL = "http://example.com"
+# redirect "View Live" clicks on the CMS host over to the headless frontend.
+FRONTEND_BASE_URL = os.environ.get("FRONTEND_BASE_URL", "http://localhost:3000").rstrip("/")
+
+WAGTAIL_HEADLESS_PREVIEW = {
+    "CLIENT_URLS": {"default": f"{FRONTEND_BASE_URL}/api/preview"},
+    "SERVE_BASE_URL": FRONTEND_BASE_URL,
+    "ENFORCE_TRAILING_SLASH": False,
+    "REDIRECT_ON_PREVIEW": False,
+}
 
 # https://docs.wagtail.org/en/latest/releases/6.4.html#data-upload-max-number-fields-update
 DATA_UPLOAD_MAX_NUMBER_FIELDS = 10_000

dnscms/dnscms/settings/dev.py

@@ -11,13 +11,6 @@ ALLOWED_HOSTS = ["*"]
 
 EMAIL_BACKEND = "django.core.mail.backends.console.EmailBackend"
 
-# Base URL to use when referring to full URLs within the Wagtail admin backend -
-# e.g. in notification emails. Don't include '/admin' or a trailing slash
-WAGTAILADMIN_BASE_URL = "http://127.0.0.1:8000"
-
-# Required by wagtail-grapple to make image URLs absolute
-BASE_URL = "http://127.0.0.1:8000"
-
 try:
     from .local import *
 except ImportError:

dnscms/events/models.py

@@ -30,6 +30,7 @@ from wagtail.fields import RichTextField
 from wagtail.models import Orderable, Page, PageManager, PageQuerySet
 from wagtail.search import index
 from wagtail.snippets.models import register_snippet
+from wagtail_headless_preview.models import HeadlessMixin
 
 from associations.widgets import AssociationChooserWidget
 from dnscms.fields import CommonStreamField
@@ -39,7 +40,7 @@ from venues.models import VenuePage
 
 
 @register_singular_query_field("eventIndex")
-class EventIndex(Page):
+class EventIndex(HeadlessMixin, Page):
     max_count = 1
     subpage_types = ["events.EventPage"]
 
@@ -220,7 +221,7 @@ class EventPageQuerySet(PageQuerySet):
 EventPageManager = PageManager.from_queryset(EventPageQuerySet)
 
 
-class EventPage(WPImportedPageMixin, Page):
+class EventPage(HeadlessMixin, WPImportedPageMixin, Page):
     subpage_types = []
     parent_page_types = ["events.EventIndex"]
     show_in_menus = False
@@ -358,7 +359,7 @@ class EventPage(WPImportedPageMixin, Page):
         GraphQLImage("featured_image"),
         GraphQLRichText("lead"),
         GraphQLStreamfield("body"),
-        GraphQLString("pig"),
+        GraphQLString("pig", required=True),
         GraphQLString("ticket_url"),
         GraphQLString("facebook_url"),
         GraphQLBoolean("free"),

dnscms/generic/models.py

@@ -4,13 +4,14 @@ from wagtail.admin.panels import FieldPanel
 from wagtail.fields import RichTextField, StreamField
 from wagtail.models import Page
 from wagtail.search import index
+from wagtail_headless_preview.models import HeadlessMixin
 
 from dnscms.blocks import PageSectionBlock
 from dnscms.fields import BASE_BLOCKS
 from dnscms.options import ALL_PIGS
 
 
-class GenericPage(Page):
+class GenericPage(HeadlessMixin, Page):
     subpage_types = ["generic.GenericPage"]
     show_in_menus = True
 

dnscms/home/models.py

@@ -10,9 +10,10 @@ from wagtail.admin.panels import (
     PageChooserPanel,
 )
 from wagtail.models import Orderable, Page
+from wagtail_headless_preview.models import HeadlessMixin
 
 
-class HomePage(Page):
+class HomePage(HeadlessMixin, Page):
     max_count = 1
 
     content_panels = Page.content_panels + [

dnscms/news/models.py

@@ -5,13 +5,14 @@ from wagtail.admin.panels import FieldPanel
 from wagtail.fields import RichTextField
 from wagtail.models import Page
 from wagtail.search import index
+from wagtail_headless_preview.models import HeadlessMixin
 
 from dnscms.fields import CommonStreamField
 from dnscms.wordpress.models import WPImportedPageMixin
 
 
 @register_singular_query_field("newsIndex")
-class NewsIndex(Page):
+class NewsIndex(HeadlessMixin, Page):
     max_count = 1
     subpage_types = ["news.NewsPage"]
 
@@ -28,7 +29,7 @@ class NewsIndex(Page):
     search_fields = []
 
 
-class NewsPage(WPImportedPageMixin, Page):
+class NewsPage(HeadlessMixin, WPImportedPageMixin, Page):
     subpage_types = []
     parent_page_types = ["news.NewsIndex"]
     show_in_menus = False

dnscms/pyproject.toml

@@ -7,6 +7,7 @@ requires-python = ">=3.14, <3.15"
 dependencies = [
     "wagtail>=7.4,<8",
     "wagtail-grapple>=0.31.0,<0.32",
+    "wagtail-headless-preview>=0.8,<0.9",
     "django>=6.0.5,<7",
     "django-extensions>=4.1,<5",
     "psycopg2-binary>=2.9.12,<3",

dnscms/sponsors/models.py

@@ -8,6 +8,7 @@ from wagtail.fields import RichTextField, StreamField
 from wagtail.images.blocks import ImageChooserBlock
 from wagtail.models import Page
 from wagtail.search import index
+from wagtail_headless_preview.models import HeadlessMixin
 
 from dnscms.blocks import BASE_BLOCKS
 
@@ -34,7 +35,7 @@ class SponsorBlock(blocks.StructBlock):
 
 
 @register_singular_query_field("sponsorsPage")
-class SponsorsPage(Page):
+class SponsorsPage(HeadlessMixin, Page):
     max_count = 1
     subpage_types = []
 

dnscms/studio/models.py

@@ -10,13 +10,14 @@ from wagtail.admin.panels import FieldPanel
 from wagtail.fields import RichTextField, StreamField
 from wagtail.models import Page
 from wagtail.search import index
+from wagtail_headless_preview.models import HeadlessMixin
 
 from dnscms.blocks import BASE_BLOCKS, PageSectionBlock
 from dnscms.options import ALL_PIGS
 
 
 @register_singular_query_field("studioPage")
-class StudioPage(Page):
+class StudioPage(HeadlessMixin, Page):
     max_count = 1
     subpage_types = []
     show_in_menus = True

dnscms/tests/test_preview.py

@@ -0,0 +1,37 @@
+"""Round-trip tests for wagtail-headless-preview token resolution via grapple."""
+
+from generic.models import GenericPage
+from tests.conftest import GenericPageFactory
+
+
+def test_generic_page_preview_token_resolves_draft(home_page, graphql_post):
+    """A minted preview token returns the unsaved draft via grapple's page(token: …)."""
+    # Publish a baseline so there's a live revision to diverge from.
+    page = GenericPageFactory(parent=home_page, title="Original title", slug="generic-preview")
+
+    # Mutate in-memory to simulate unsaved editor state, then mint a token.
+    # create_page_preview() snapshots the current to_json() into a PagePreview row.
+    page.title = "Edited title (draft)"
+    preview = page.create_page_preview()
+
+    response, body = graphql_post(
+        """
+        query previewPage($token: String!) {
+          page: page(token: $token) {
+            __typename
+            ... on GenericPage {
+              title
+            }
+          }
+        }
+        """,
+        variables={"token": preview.token},
+    )
+
+    assert response.status_code == 200
+    assert "errors" not in body, body
+    assert body["data"]["page"]["__typename"] == "GenericPage"
+    assert body["data"]["page"]["title"] == "Edited title (draft)"
+
+    # Live revision is unchanged — token short-circuits the published query.
+    assert GenericPage.objects.get(pk=page.pk).title == "Original title"

dnscms/uv.lock

@@ -255,6 +255,7 @@ dependencies = [
     { name = "psycopg2-binary" },
     { name = "wagtail" },
     { name = "wagtail-grapple" },
+    { name = "wagtail-headless-preview" },
     { name = "whitenoise" },
 ]
 
@@ -275,6 +276,7 @@ requires-dist = [
     { name = "psycopg2-binary", specifier = ">=2.9.12,<3" },
     { name = "wagtail", specifier = ">=7.4,<8" },
     { name = "wagtail-grapple", specifier = ">=0.31.0,<0.32" },
+    { name = "wagtail-headless-preview", specifier = ">=0.8,<0.9" },
     { name = "whitenoise", specifier = ">=6.12.0,<7" },
 ]
 

dnscms/venues/models.py

@@ -11,6 +11,7 @@ from wagtail.admin.panels import FieldPanel, FieldRowPanel, MultiFieldPanel
 from wagtail.fields import RichTextField, StreamField
 from wagtail.models import Page
 from wagtail.search import index
+from wagtail_headless_preview.models import HeadlessMixin
 
 from dnscms.blocks import ImageSliderBlock
 from dnscms.fields import CommonStreamField
@@ -18,7 +19,7 @@ from dnscms.wordpress.models import WPImportedPageMixin
 
 
 @register_singular_query_field("venueIndex")
-class VenueIndex(Page):
+class VenueIndex(HeadlessMixin, Page):
     # there can only be one venue index page
     max_count = 1
     subpage_types = ["venues.VenuePage"]
@@ -35,7 +36,7 @@ class VenueIndex(Page):
 
 
 @register_singular_query_field("venueRentalIndex")
-class VenueRentalIndex(Page):
+class VenueRentalIndex(HeadlessMixin, Page):
     # there can only be one venue index page
     max_count = 1
     subpage_types = []
@@ -51,7 +52,7 @@ class VenueRentalIndex(Page):
     graphql_fields = [GraphQLRichText("lead"), GraphQLStreamfield("body")]
 
 
-class VenuePage(WPImportedPageMixin, Page):
+class VenuePage(HeadlessMixin, WPImportedPageMixin, Page):
     # no children
     subpage_types = []
     parent_page_types = ["venues.VenueIndex"]

web/.env

@@ -1,2 +1,2 @@
-GRAPHQL_ENDPOINT=https://cms.neuf.no/api/graphql/
+WAGTAIL_BASE_URL=https://cms.neuf.no
 URL=http://localhost:3000

web/codegen.ts

@@ -3,8 +3,14 @@ import { CodegenConfig } from "@graphql-codegen/cli";
 import { loadEnvConfig } from "@next/env";
 loadEnvConfig(process.cwd());
 
+const wagtailBaseUrl = process.env.WAGTAIL_BASE_URL;
+if (!wagtailBaseUrl) {
+  throw new Error("WAGTAIL_BASE_URL is not set");
+}
+const graphqlEndpoint = `${wagtailBaseUrl.replace(/\/$/, "")}/api/graphql/`;
+
 const config: CodegenConfig = {
-  schema: process.env.GRAPHQL_ENDPOINT,
+  schema: graphqlEndpoint,
   documents: ["src/**/*.tsx", "src/**/*.ts"],
   ignoreNoDocuments: true, // for better experience with the watcher
   generates: {

web/next.config.mjs

@@ -16,6 +16,7 @@ const nextConfig = {
         hostname: "**",
       },
     ],
+    dangerouslyAllowLocalIP: process.env.NODE_ENV === "development",
   },
   turbopack: {
     root: __dirname,

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/api/preview/disable/route.ts

@@ -0,0 +1,7 @@
+import { cookies, draftMode } from "next/headers";
+
+export async function POST() {
+  (await draftMode()).disable();
+  (await cookies()).delete("preview-token");
+  return new Response(null, { status: 204 });
+}

web/src/app/api/preview/route.ts

@@ -0,0 +1,25 @@
+import { cookies, draftMode } from "next/headers";
+import { redirect } from "next/navigation";
+import { NextRequest } from "next/server";
+
+// Wagtail-headless-preview directs the editor's preview iframe here with
+// ?content_type=app.Model&token=<signed>. We stash the token in a cookie,
+// enable Next.js draft mode, and redirect to the type-dispatching renderer.
+export async function GET(req: NextRequest) {
+  const token = req.nextUrl.searchParams.get("token");
+  const contentType = req.nextUrl.searchParams.get("content_type");
+  if (!token || !contentType) {
+    return new Response("missing token/content_type", { status: 400 });
+  }
+
+  (await draftMode()).enable();
+  (await cookies()).set("preview-token", token, {
+    httpOnly: true,
+    sameSite: "lax",
+    secure: process.env.NODE_ENV === "production",
+    maxAge: 60 * 60 * 24,
+    path: "/",
+  });
+
+  redirect("/preview/render");
+}

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/client.ts

@@ -3,9 +3,15 @@ import "server-only";
 import { cacheExchange, createClient, fetchExchange } from "@urql/core";
 import { registerUrql } from "@urql/next/rsc";
 
+const wagtailBaseUrl = process.env.WAGTAIL_BASE_URL;
+if (!wagtailBaseUrl) {
+  throw new Error("WAGTAIL_BASE_URL is not set");
+}
+const graphqlEndpoint = `${wagtailBaseUrl.replace(/\/$/, "")}/api/graphql/`;
+
 const makeClient = () => {
   return createClient({
-    url: process.env.GRAPHQL_ENDPOINT ?? "",
+    url: graphqlEndpoint,
     exchanges: [cacheExchange, fetchExchange],
     // requestPolicy: "network-only",
     fetchOptions: { next: { revalidate: 0 } },

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/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

@@ -0,0 +1,256 @@
+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,
+  AssociationIndexFragment,
+  ContactIndexFragment,
+  EventFragment,
+  GenericFragment,
+  HomeFragment,
+  NewsFragment,
+  NewsIndexFragment,
+  SponsorsPageFragment,
+  StudioFragment,
+  VenueFragment,
+  VenueIndexFragment,
+  VenueRentalIndexFragment,
+} from "@/gql/graphql";
+import { cookies } from "next/headers";
+export const dynamic = "force-dynamic";
+export const revalidate = 0;
+
+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
+      }
+    }
+  }
+`);
+
+function ExpiredPreview() {
+  return (
+    <main className="site-main" id="main">
+      <h1>Preview session expired</h1>
+      <p>Click Preview again in the Wagtail admin to start a new session.</p>
+    </main>
+  );
+}
+
+function UnsupportedType({ typename }: { typename: string }) {
+  return (
+    <main className="site-main" id="main">
+      <h1>Preview not available</h1>
+      <p>
+        Type <code>{typename}</code> cannot be previewed.
+      </p>
+    </main>
+  );
+}
+
+export default async function PreviewRender() {
+  const token = (await cookies()).get("preview-token")?.value;
+  if (!token) {
+    return <ExpiredPreview />;
+  }
+
+  const { data, error } = await getClient().query(previewPageQuery, { token });
+  if (error) {
+    throw new Error(error.message);
+  }
+  if (!data?.page) {
+    return <ExpiredPreview />;
+  }
+
+  const page = data.page;
+  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"} />;
+    }
+  })();
+
+  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, {});
+  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,19 +1,19 @@
 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";
 
 const AssociationIndexDefinition = graphql(`
   fragment AssociationIndex on AssociationIndex {
-    ... on AssociationIndex {
+    __typename
-      title
+    title
-      seoTitle
+    seoTitle
-      searchDescription
+    searchDescription
-      lead
+    lead
-      body {
+    body {
-        ...Blocks
+      ...Blocks
-      }
     }
   }
 `);
@@ -41,7 +41,7 @@ const AssociationFragmentDefinition = graphql(`
   }
 `);
 
-export const allAssociationsQuery = graphql(`
+const allAssociationsQuery = graphql(`
   query allAssociations {
     index: associationIndex {
       ... on AssociationIndex {
@@ -59,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,24 +1,24 @@
 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";
 
 const ContactIndexDefinition = graphql(`
   fragment ContactIndex on ContactIndex {
-    ... on ContactIndex {
+    __typename
-      title
+    title
-      seoTitle
+    seoTitle
-      searchDescription
+    searchDescription
-      lead
+    lead
-      body {
+    body {
-        ...Blocks
+      ...Blocks
-      }
     }
   }
 `);
 
-export const contactQuery = graphql(`
+const contactQuery = graphql(`
   query contacts {
     index: contactIndex {
       ... on ContactIndex {
@@ -28,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/general/PreviewBanner.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import styles from "./previewBanner.module.scss";
+
+export function PreviewBanner() {
+  return (
+    <div className={styles.previewBanner} role="status">
+      <span className={styles.label}>Forhåndsvisning</span>
+      <button
+        type="button"
+        className="tertiary"
+        onClick={async () => {
+          await fetch("/api/preview/disable", { method: "POST" });
+          window.location.reload();
+        }}
+      >
+        Avslutt forhåndsvisning
+      </button>
+    </div>
+  );
+}

web/src/components/general/previewBanner.module.scss

@@ -0,0 +1,22 @@
+.previewBanner {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-s);
+  padding: var(--spacing-xs) var(--spacing-s);
+  background: color-mix(in srgb, var(--color-deepBrick) 60%, transparent);
+  backdrop-filter: blur(4px);
+  color: var(--color-betongGray);
+  font-family: var(--font-main-demi);
+  font-size: var(--font-size-caption);
+}
+
+.label {
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}

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";
@@ -14,15 +15,14 @@ import { NewsList } from "@/components/news/NewsList";
 
 const HomeFragmentDefinition = graphql(`
   fragment Home on HomePage {
-    ... on HomePage {
+    __typename
-      featuredEvents {
+    featuredEvents {
-        id
+      id
-      }
     }
   }
 `);
 
-export const homeQuery = graphql(`
+const homeQuery = graphql(`
   query home {
     events: eventIndex {
       ... on EventIndex {
@@ -46,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,29 +1,29 @@
 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";
 
 const SponsorsPageFragmentDefinition = graphql(`
   fragment SponsorsPage on SponsorsPage {
-    ... on SponsorsPage {
+    __typename
-      title
+    title
-      seoTitle
+    seoTitle
-      searchDescription
+    searchDescription
-      lead
+    lead
-      body {
+    body {
-        ...Blocks
+      ...Blocks
-      }
+    }
-      sponsors {
+    sponsors {
-        ... on SponsorBlock {
+      ... on SponsorBlock {
-          ...Sponsor
+        ...Sponsor
-        }
       }
     }
   }
 `);
 
-export const sponsorsPageQuery = graphql(`
+const sponsorsPageQuery = graphql(`
   query sponsors {
     page: sponsorsPage {
       ... on SponsorsPage {
@@ -33,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,19 +1,19 @@
 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";
 
 const VenueIndexDefinition = graphql(`
   fragment VenueIndex on VenueIndex {
-    ... on VenueIndex {
+    __typename
-      title
+    title
-      seoTitle
+    seoTitle
-      searchDescription
+    searchDescription
-      lead
+    lead
-      body {
+    body {
-        ...Blocks
+      ...Blocks
-      }
     }
   }
 `);
@@ -54,7 +54,7 @@ const VenueFragmentDefinition = graphql(`
   }
 `);
 
-export const venueIndexQuery = graphql(`
+const venueIndexQuery = graphql(`
   query venueIndex {
     index: venueIndex {
       ... on VenueIndex {
@@ -69,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";
@@ -7,19 +8,18 @@ import { VenueList } from "@/components/venues/VenueList";
 
 const VenueRentalIndexDefinition = graphql(`
   fragment VenueRentalIndex on VenueRentalIndex {
-    ... on VenueRentalIndex {
+    __typename
-      title
+    title
-      seoTitle
+    seoTitle
-      searchDescription
+    searchDescription
-      lead
+    lead
-      body {
+    body {
-        ...Blocks
+      ...Blocks
-      }
     }
   }
 `);
 
-export const venueRentalIndexQuery = graphql(`
+const venueRentalIndexQuery = graphql(`
   query venueRentalIndex {
     index: venueRentalIndex {
       ... on VenueRentalIndex {
@@ -34,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,8 +19,9 @@ 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 {\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    ... on AssociationIndex {\n      title\n      seoTitle\n      searchDescription\n      lead\n      body {\n        ...Blocks\n      }\n    }\n  }\n": typeof types.AssociationIndexFragmentDoc,
+    "\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,
     "\n  query allAssociations {\n    index: associationIndex {\n      ... on AssociationIndex {\n        ...AssociationIndex\n      }\n    }\n    associations: pages(\n      contentType: \"associations.AssociationPage\"\n      limit: 1000\n    ) {\n      ... on AssociationPage {\n        ...Association\n      }\n    }\n  }\n": typeof types.AllAssociationsDocument,
     "\n  query associationBySlug($slug: String!) {\n    association: page(\n      contentType: \"associations.AssociationPage\"\n      slug: $slug\n    ) {\n      ... on AssociationPage {\n        ...Association\n      }\n    }\n  }\n": typeof types.AssociationBySlugDocument,
@@ -38,24 +39,24 @@ type Documents = {
     "\n  fragment ImageWithTextBlock on ImageWithTextBlock {\n    image {\n      ...Image\n    }\n    imageFormat\n    text\n  }\n": typeof types.ImageWithTextBlockFragmentDoc,
     "\n  fragment PageSectionBlock on PageSectionBlock {\n    title\n    backgroundColor\n    icon\n    body {\n      id\n      blockType\n    }\n  }\n": typeof types.PageSectionBlockFragmentDoc,
     "\n  fragment RichTextBlock on RichTextBlock {\n    rawValue\n    value\n  }\n": typeof types.RichTextBlockFragmentDoc,
-    "\n  fragment ContactIndex on ContactIndex {\n    ... on ContactIndex {\n      title\n      seoTitle\n      searchDescription\n      lead\n      body {\n        ...Blocks\n      }\n    }\n  }\n": typeof types.ContactIndexFragmentDoc,
+    "\n  fragment ContactIndex on ContactIndex {\n    __typename\n    title\n    seoTitle\n    searchDescription\n    lead\n    body {\n      ...Blocks\n    }\n  }\n": typeof types.ContactIndexFragmentDoc,
     "\n  query contacts {\n    index: contactIndex {\n      ... on ContactIndex {\n        ...ContactIndex\n      }\n    }\n  }\n": typeof types.ContactsDocument,
     "\n  query eventBySlug($slug: String!) {\n    event: page(contentType: \"events.EventPage\", slug: $slug) {\n      ... on EventPage {\n        ...Event\n      }\n    }\n  }\n": typeof types.EventBySlugDocument,
     "\n  fragment Generic on GenericPage {\n    __typename\n    id\n    urlPath\n    seoTitle\n    searchDescription\n    title\n    lead\n    pig\n    body {\n      ...Blocks\n    }\n  }\n": typeof types.GenericFragmentDoc,
     "\n  query genericPageByUrl($urlPath: String!) {\n    page: page(contentType: \"generic.GenericPage\", urlPath: $urlPath) {\n      ... on GenericPage {\n        ...Generic\n      }\n    }\n  }\n": typeof types.GenericPageByUrlDocument,
-    "\n  fragment Home on HomePage {\n    ... on HomePage {\n      featuredEvents {\n        id\n      }\n    }\n  }\n": typeof types.HomeFragmentDoc,
+    "\n  fragment Home on HomePage {\n    __typename\n    featuredEvents {\n      id\n    }\n  }\n": typeof types.HomeFragmentDoc,
     "\n  query home {\n    events: eventIndex {\n      ... on EventIndex {\n        futureEvents {\n          ... on EventPage {\n            ...Event\n          }\n        }\n      }\n    }\n    home: page(contentType: \"home.HomePage\", urlPath: \"/home/\") {\n      ... on HomePage {\n        ...Home\n      }\n    }\n    news: pages(contentType: \"news.newsPage\", order: \"-first_published_at\", limit: 4) {\n      ... on NewsPage {\n        ...News\n      }\n    }\n  }\n": typeof types.HomeDocument,
     "\n  query newsBySlug($slug: String!) {\n    news: page(contentType: \"news.NewsPage\", slug: $slug) {\n      ... on NewsPage {\n        ...News\n      }\n    }\n  }\n": typeof types.NewsBySlugDocument,
     "\n  fragment Sponsor on SponsorBlock {\n    id\n    name\n    logo {\n      ...Image\n    }\n    text\n    website\n  }\n": typeof types.SponsorFragmentDoc,
-    "\n  fragment SponsorsPage on SponsorsPage {\n    ... on SponsorsPage {\n      title\n      seoTitle\n      searchDescription\n      lead\n      body {\n        ...Blocks\n      }\n      sponsors {\n        ... on SponsorBlock {\n          ...Sponsor\n        }\n      }\n    }\n  }\n": typeof types.SponsorsPageFragmentDoc,
+    "\n  fragment SponsorsPage on SponsorsPage {\n    __typename\n    title\n    seoTitle\n    searchDescription\n    lead\n    body {\n      ...Blocks\n    }\n    sponsors {\n      ... on SponsorBlock {\n        ...Sponsor\n      }\n    }\n  }\n": typeof types.SponsorsPageFragmentDoc,
     "\n  query sponsors {\n    page: sponsorsPage {\n      ... on SponsorsPage {\n        ...SponsorsPage\n      }\n    }\n  }\n": typeof types.SponsorsDocument,
     "\n  fragment Studio on StudioPage {\n    __typename\n    id\n    title\n    seoTitle\n    searchDescription\n    lead\n    pig\n    logo {\n      url\n      width\n      height\n      alt\n    }\n    body {\n      ...Blocks\n    }\n  }\n": typeof types.StudioFragmentDoc,
     "\n  query studio {\n    page: studioPage {\n      ... on StudioPage {\n        ...Studio\n      }\n    }\n  }\n": typeof types.StudioDocument,
-    "\n  fragment VenueIndex on VenueIndex {\n    ... on VenueIndex {\n      title\n      seoTitle\n      searchDescription\n      lead\n      body {\n        ...Blocks\n      }\n    }\n  }\n": typeof types.VenueIndexFragmentDoc,
+    "\n  fragment VenueIndex on VenueIndex {\n    __typename\n    title\n    seoTitle\n    searchDescription\n    lead\n    body {\n      ...Blocks\n    }\n  }\n": typeof types.VenueIndexFragmentDoc,
     "\n  fragment Venue on VenuePage {\n    __typename\n    id\n    slug\n    title\n    seoTitle\n    searchDescription\n    images {\n      __typename\n      ... on ImageSliderBlock {\n        ...ImageSliderBlock\n      }\n    }\n    body {\n      ...Blocks\n    }\n    featuredImage {\n      ...Image\n    }\n    showAsBookable\n    showInOverview\n    floor\n    preposition\n    usedFor\n    techSpecsUrl\n    capabilityAudio\n    capabilityAudioVideo\n    capabilityBar\n    capabilityLighting\n    capacityLegal\n    capacityStanding\n    capacitySitting\n  }\n": typeof types.VenueFragmentDoc,
     "\n  query venueIndex {\n    index: venueIndex {\n      ... on VenueIndex {\n        ...VenueIndex\n      }\n    }\n    venues: pages(contentType: \"venues.VenuePage\", limit: 100) {\n      ... on VenuePage {\n        ...Venue\n      }\n    }\n  }\n": typeof types.VenueIndexDocument,
     "\n  query venueBySlug($slug: String!) {\n    venue: page(contentType: \"venues.VenuePage\", slug: $slug) {\n      ... on VenuePage {\n        ...Venue\n      }\n    }\n  }\n": typeof types.VenueBySlugDocument,
-    "\n  fragment VenueRentalIndex on VenueRentalIndex {\n    ... on VenueRentalIndex {\n      title\n      seoTitle\n      searchDescription\n      lead\n      body {\n        ...Blocks\n      }\n    }\n  }\n": typeof types.VenueRentalIndexFragmentDoc,
+    "\n  fragment VenueRentalIndex on VenueRentalIndex {\n    __typename\n    title\n    seoTitle\n    searchDescription\n    lead\n    body {\n      ...Blocks\n    }\n  }\n": typeof types.VenueRentalIndexFragmentDoc,
     "\n  query venueRentalIndex {\n    index: venueRentalIndex {\n      ... on VenueRentalIndex {\n        ...VenueRentalIndex\n      }\n    }\n    venues: pages(contentType: \"venues.VenuePage\", limit: 100) {\n      ... on VenuePage {\n        ...Venue\n      }\n    }\n  }\n": typeof types.VenueRentalIndexDocument,
     "\n  fragment LeafBlocks on StreamFieldInterface {\n    id\n    blockType\n    field\n    ... on RichTextBlock {\n      ...RichTextBlock\n    }\n    ... on ImageWithTextBlock {\n      ...ImageWithTextBlock\n    }\n    ... on ImageSliderBlock {\n      ...ImageSliderBlock\n    }\n    ... on HorizontalRuleBlock {\n      ...HorizontalRuleBlock\n    }\n    ... on FeaturedBlock {\n      ...FeaturedBlock\n    }\n    ... on ContactListBlock {\n      ...ContactListBlock\n    }\n    ... on EmbedBlock {\n      ...EmbedBlock\n    }\n    ... on FactBoxBlock {\n      ...FactBoxBlock\n    }\n  }\n": typeof types.LeafBlocksFragmentDoc,
     "\n  fragment OneLevelOfBlocks on StreamFieldInterface {\n    ...LeafBlocks\n    ... on AccordionBlock {\n      ...AccordionBlock\n      body {\n        ...LeafBlocks\n      }\n    }\n    ... on PageSectionBlock {\n      ...PageSectionBlock\n      body {\n        ...LeafBlocks\n      }\n    }\n  }\n": typeof types.OneLevelOfBlocksFragmentDoc,
@@ -82,8 +83,9 @@ 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 {\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    ... on AssociationIndex {\n      title\n      seoTitle\n      searchDescription\n      lead\n      body {\n        ...Blocks\n      }\n    }\n  }\n": types.AssociationIndexFragmentDoc,
+    "\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,
     "\n  query allAssociations {\n    index: associationIndex {\n      ... on AssociationIndex {\n        ...AssociationIndex\n      }\n    }\n    associations: pages(\n      contentType: \"associations.AssociationPage\"\n      limit: 1000\n    ) {\n      ... on AssociationPage {\n        ...Association\n      }\n    }\n  }\n": types.AllAssociationsDocument,
     "\n  query associationBySlug($slug: String!) {\n    association: page(\n      contentType: \"associations.AssociationPage\"\n      slug: $slug\n    ) {\n      ... on AssociationPage {\n        ...Association\n      }\n    }\n  }\n": types.AssociationBySlugDocument,
@@ -101,24 +103,24 @@ const documents: Documents = {
     "\n  fragment ImageWithTextBlock on ImageWithTextBlock {\n    image {\n      ...Image\n    }\n    imageFormat\n    text\n  }\n": types.ImageWithTextBlockFragmentDoc,
     "\n  fragment PageSectionBlock on PageSectionBlock {\n    title\n    backgroundColor\n    icon\n    body {\n      id\n      blockType\n    }\n  }\n": types.PageSectionBlockFragmentDoc,
     "\n  fragment RichTextBlock on RichTextBlock {\n    rawValue\n    value\n  }\n": types.RichTextBlockFragmentDoc,
-    "\n  fragment ContactIndex on ContactIndex {\n    ... on ContactIndex {\n      title\n      seoTitle\n      searchDescription\n      lead\n      body {\n        ...Blocks\n      }\n    }\n  }\n": types.ContactIndexFragmentDoc,
+    "\n  fragment ContactIndex on ContactIndex {\n    __typename\n    title\n    seoTitle\n    searchDescription\n    lead\n    body {\n      ...Blocks\n    }\n  }\n": types.ContactIndexFragmentDoc,
     "\n  query contacts {\n    index: contactIndex {\n      ... on ContactIndex {\n        ...ContactIndex\n      }\n    }\n  }\n": types.ContactsDocument,
     "\n  query eventBySlug($slug: String!) {\n    event: page(contentType: \"events.EventPage\", slug: $slug) {\n      ... on EventPage {\n        ...Event\n      }\n    }\n  }\n": types.EventBySlugDocument,
     "\n  fragment Generic on GenericPage {\n    __typename\n    id\n    urlPath\n    seoTitle\n    searchDescription\n    title\n    lead\n    pig\n    body {\n      ...Blocks\n    }\n  }\n": types.GenericFragmentDoc,
     "\n  query genericPageByUrl($urlPath: String!) {\n    page: page(contentType: \"generic.GenericPage\", urlPath: $urlPath) {\n      ... on GenericPage {\n        ...Generic\n      }\n    }\n  }\n": types.GenericPageByUrlDocument,
-    "\n  fragment Home on HomePage {\n    ... on HomePage {\n      featuredEvents {\n        id\n      }\n    }\n  }\n": types.HomeFragmentDoc,
+    "\n  fragment Home on HomePage {\n    __typename\n    featuredEvents {\n      id\n    }\n  }\n": types.HomeFragmentDoc,
     "\n  query home {\n    events: eventIndex {\n      ... on EventIndex {\n        futureEvents {\n          ... on EventPage {\n            ...Event\n          }\n        }\n      }\n    }\n    home: page(contentType: \"home.HomePage\", urlPath: \"/home/\") {\n      ... on HomePage {\n        ...Home\n      }\n    }\n    news: pages(contentType: \"news.newsPage\", order: \"-first_published_at\", limit: 4) {\n      ... on NewsPage {\n        ...News\n      }\n    }\n  }\n": types.HomeDocument,
     "\n  query newsBySlug($slug: String!) {\n    news: page(contentType: \"news.NewsPage\", slug: $slug) {\n      ... on NewsPage {\n        ...News\n      }\n    }\n  }\n": types.NewsBySlugDocument,
     "\n  fragment Sponsor on SponsorBlock {\n    id\n    name\n    logo {\n      ...Image\n    }\n    text\n    website\n  }\n": types.SponsorFragmentDoc,
-    "\n  fragment SponsorsPage on SponsorsPage {\n    ... on SponsorsPage {\n      title\n      seoTitle\n      searchDescription\n      lead\n      body {\n        ...Blocks\n      }\n      sponsors {\n        ... on SponsorBlock {\n          ...Sponsor\n        }\n      }\n    }\n  }\n": types.SponsorsPageFragmentDoc,
+    "\n  fragment SponsorsPage on SponsorsPage {\n    __typename\n    title\n    seoTitle\n    searchDescription\n    lead\n    body {\n      ...Blocks\n    }\n    sponsors {\n      ... on SponsorBlock {\n        ...Sponsor\n      }\n    }\n  }\n": types.SponsorsPageFragmentDoc,
     "\n  query sponsors {\n    page: sponsorsPage {\n      ... on SponsorsPage {\n        ...SponsorsPage\n      }\n    }\n  }\n": types.SponsorsDocument,
     "\n  fragment Studio on StudioPage {\n    __typename\n    id\n    title\n    seoTitle\n    searchDescription\n    lead\n    pig\n    logo {\n      url\n      width\n      height\n      alt\n    }\n    body {\n      ...Blocks\n    }\n  }\n": types.StudioFragmentDoc,
     "\n  query studio {\n    page: studioPage {\n      ... on StudioPage {\n        ...Studio\n      }\n    }\n  }\n": types.StudioDocument,
-    "\n  fragment VenueIndex on VenueIndex {\n    ... on VenueIndex {\n      title\n      seoTitle\n      searchDescription\n      lead\n      body {\n        ...Blocks\n      }\n    }\n  }\n": types.VenueIndexFragmentDoc,
+    "\n  fragment VenueIndex on VenueIndex {\n    __typename\n    title\n    seoTitle\n    searchDescription\n    lead\n    body {\n      ...Blocks\n    }\n  }\n": types.VenueIndexFragmentDoc,
     "\n  fragment Venue on VenuePage {\n    __typename\n    id\n    slug\n    title\n    seoTitle\n    searchDescription\n    images {\n      __typename\n      ... on ImageSliderBlock {\n        ...ImageSliderBlock\n      }\n    }\n    body {\n      ...Blocks\n    }\n    featuredImage {\n      ...Image\n    }\n    showAsBookable\n    showInOverview\n    floor\n    preposition\n    usedFor\n    techSpecsUrl\n    capabilityAudio\n    capabilityAudioVideo\n    capabilityBar\n    capabilityLighting\n    capacityLegal\n    capacityStanding\n    capacitySitting\n  }\n": types.VenueFragmentDoc,
     "\n  query venueIndex {\n    index: venueIndex {\n      ... on VenueIndex {\n        ...VenueIndex\n      }\n    }\n    venues: pages(contentType: \"venues.VenuePage\", limit: 100) {\n      ... on VenuePage {\n        ...Venue\n      }\n    }\n  }\n": types.VenueIndexDocument,
     "\n  query venueBySlug($slug: String!) {\n    venue: page(contentType: \"venues.VenuePage\", slug: $slug) {\n      ... on VenuePage {\n        ...Venue\n      }\n    }\n  }\n": types.VenueBySlugDocument,
-    "\n  fragment VenueRentalIndex on VenueRentalIndex {\n    ... on VenueRentalIndex {\n      title\n      seoTitle\n      searchDescription\n      lead\n      body {\n        ...Blocks\n      }\n    }\n  }\n": types.VenueRentalIndexFragmentDoc,
+    "\n  fragment VenueRentalIndex on VenueRentalIndex {\n    __typename\n    title\n    seoTitle\n    searchDescription\n    lead\n    body {\n      ...Blocks\n    }\n  }\n": types.VenueRentalIndexFragmentDoc,
     "\n  query venueRentalIndex {\n    index: venueRentalIndex {\n      ... on VenueRentalIndex {\n        ...VenueRentalIndex\n      }\n    }\n    venues: pages(contentType: \"venues.VenuePage\", limit: 100) {\n      ... on VenuePage {\n        ...Venue\n      }\n    }\n  }\n": types.VenueRentalIndexDocument,
     "\n  fragment LeafBlocks on StreamFieldInterface {\n    id\n    blockType\n    field\n    ... on RichTextBlock {\n      ...RichTextBlock\n    }\n    ... on ImageWithTextBlock {\n      ...ImageWithTextBlock\n    }\n    ... on ImageSliderBlock {\n      ...ImageSliderBlock\n    }\n    ... on HorizontalRuleBlock {\n      ...HorizontalRuleBlock\n    }\n    ... on FeaturedBlock {\n      ...FeaturedBlock\n    }\n    ... on ContactListBlock {\n      ...ContactListBlock\n    }\n    ... on EmbedBlock {\n      ...EmbedBlock\n    }\n    ... on FactBoxBlock {\n      ...FactBoxBlock\n    }\n  }\n": types.LeafBlocksFragmentDoc,
     "\n  fragment OneLevelOfBlocks on StreamFieldInterface {\n    ...LeafBlocks\n    ... on AccordionBlock {\n      ...AccordionBlock\n      body {\n        ...LeafBlocks\n      }\n    }\n    ... on PageSectionBlock {\n      ...PageSectionBlock\n      body {\n        ...LeafBlocks\n      }\n    }\n  }\n": types.OneLevelOfBlocksFragmentDoc,
@@ -174,6 +176,10 @@ export function graphql(source: "\n    query allAssociationSlugs {\n      pages(
  * 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 allVenueSlugs {\n      pages(contentType: \"venues.VenuePage\", limit: 100) {\n        id\n        slug\n      }\n    }\n  "): (typeof documents)["\n    query allVenueSlugs {\n      pages(contentType: \"venues.VenuePage\", limit: 100) {\n        id\n        slug\n      }\n    }\n  "];
+/**
+ * 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 {\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.
  */
@@ -181,7 +187,7 @@ export function graphql(source: "\n      query search($query: String) {\n
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  fragment AssociationIndex on AssociationIndex {\n    ... on AssociationIndex {\n      title\n      seoTitle\n      searchDescription\n      lead\n      body {\n        ...Blocks\n      }\n    }\n  }\n"): (typeof documents)["\n  fragment AssociationIndex on AssociationIndex {\n    ... on AssociationIndex {\n      title\n      seoTitle\n      searchDescription\n      lead\n      body {\n        ...Blocks\n      }\n    }\n  }\n"];
+export function graphql(source: "\n  fragment AssociationIndex on AssociationIndex {\n    __typename\n    title\n    seoTitle\n    searchDescription\n    lead\n    body {\n      ...Blocks\n    }\n  }\n"): (typeof documents)["\n  fragment AssociationIndex on AssociationIndex {\n    __typename\n    title\n    seoTitle\n    searchDescription\n    lead\n    body {\n      ...Blocks\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -253,7 +259,7 @@ export function graphql(source: "\n  fragment RichTextBlock on RichTextBlock {\n
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  fragment ContactIndex on ContactIndex {\n    ... on ContactIndex {\n      title\n      seoTitle\n      searchDescription\n      lead\n      body {\n        ...Blocks\n      }\n    }\n  }\n"): (typeof documents)["\n  fragment ContactIndex on ContactIndex {\n    ... on ContactIndex {\n      title\n      seoTitle\n      searchDescription\n      lead\n      body {\n        ...Blocks\n      }\n    }\n  }\n"];
+export function graphql(source: "\n  fragment ContactIndex on ContactIndex {\n    __typename\n    title\n    seoTitle\n    searchDescription\n    lead\n    body {\n      ...Blocks\n    }\n  }\n"): (typeof documents)["\n  fragment ContactIndex on ContactIndex {\n    __typename\n    title\n    seoTitle\n    searchDescription\n    lead\n    body {\n      ...Blocks\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -273,7 +279,7 @@ export function graphql(source: "\n  query genericPageByUrl($urlPath: String!) {
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  fragment Home on HomePage {\n    ... on HomePage {\n      featuredEvents {\n        id\n      }\n    }\n  }\n"): (typeof documents)["\n  fragment Home on HomePage {\n    ... on HomePage {\n      featuredEvents {\n        id\n      }\n    }\n  }\n"];
+export function graphql(source: "\n  fragment Home on HomePage {\n    __typename\n    featuredEvents {\n      id\n    }\n  }\n"): (typeof documents)["\n  fragment Home on HomePage {\n    __typename\n    featuredEvents {\n      id\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -289,7 +295,7 @@ export function graphql(source: "\n  fragment Sponsor on SponsorBlock {\n    id\
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  fragment SponsorsPage on SponsorsPage {\n    ... on SponsorsPage {\n      title\n      seoTitle\n      searchDescription\n      lead\n      body {\n        ...Blocks\n      }\n      sponsors {\n        ... on SponsorBlock {\n          ...Sponsor\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  fragment SponsorsPage on SponsorsPage {\n    ... on SponsorsPage {\n      title\n      seoTitle\n      searchDescription\n      lead\n      body {\n        ...Blocks\n      }\n      sponsors {\n        ... on SponsorBlock {\n          ...Sponsor\n        }\n      }\n    }\n  }\n"];
+export function graphql(source: "\n  fragment SponsorsPage on SponsorsPage {\n    __typename\n    title\n    seoTitle\n    searchDescription\n    lead\n    body {\n      ...Blocks\n    }\n    sponsors {\n      ... on SponsorBlock {\n        ...Sponsor\n      }\n    }\n  }\n"): (typeof documents)["\n  fragment SponsorsPage on SponsorsPage {\n    __typename\n    title\n    seoTitle\n    searchDescription\n    lead\n    body {\n      ...Blocks\n    }\n    sponsors {\n      ... on SponsorBlock {\n        ...Sponsor\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -305,7 +311,7 @@ export function graphql(source: "\n  query studio {\n    page: studioPage {\n
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  fragment VenueIndex on VenueIndex {\n    ... on VenueIndex {\n      title\n      seoTitle\n      searchDescription\n      lead\n      body {\n        ...Blocks\n      }\n    }\n  }\n"): (typeof documents)["\n  fragment VenueIndex on VenueIndex {\n    ... on VenueIndex {\n      title\n      seoTitle\n      searchDescription\n      lead\n      body {\n        ...Blocks\n      }\n    }\n  }\n"];
+export function graphql(source: "\n  fragment VenueIndex on VenueIndex {\n    __typename\n    title\n    seoTitle\n    searchDescription\n    lead\n    body {\n      ...Blocks\n    }\n  }\n"): (typeof documents)["\n  fragment VenueIndex on VenueIndex {\n    __typename\n    title\n    seoTitle\n    searchDescription\n    lead\n    body {\n      ...Blocks\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -321,7 +327,7 @@ export function graphql(source: "\n  query venueBySlug($slug: String!) {\n    ve
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  fragment VenueRentalIndex on VenueRentalIndex {\n    ... on VenueRentalIndex {\n      title\n      seoTitle\n      searchDescription\n      lead\n      body {\n        ...Blocks\n      }\n    }\n  }\n"): (typeof documents)["\n  fragment VenueRentalIndex on VenueRentalIndex {\n    ... on VenueRentalIndex {\n      title\n      seoTitle\n      searchDescription\n      lead\n      body {\n        ...Blocks\n      }\n    }\n  }\n"];
+export function graphql(source: "\n  fragment VenueRentalIndex on VenueRentalIndex {\n    __typename\n    title\n    seoTitle\n    searchDescription\n    lead\n    body {\n      ...Blocks\n    }\n  }\n"): (typeof documents)["\n  fragment VenueRentalIndex on VenueRentalIndex {\n    __typename\n    title\n    seoTitle\n    searchDescription\n    lead\n    body {\n      ...Blocks\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */