web: colocate graphql fragments, unmask where needed, more idiomatic client-preset use

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

@@ -86,7 +86,7 @@ export default async function Page({ params }: { params: Params }) {
         <Breadcrumb
           link="/aktuelt"
           text="Nyhet"
-          date={formatDate(news.firstPublishedAt, "d. MMMM yyyy")}
+          date={news.firstPublishedAt ? formatDate(news.firstPublishedAt, "d. MMMM yyyy") : ""}
         />
         <h1 className="news-title">{news.title}</h1>
         {news.lead && (

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

@@ -1,12 +1,15 @@
 import { Metadata, ResolvingMetadata } from "next";
 import { notFound } from "next/navigation";
 import { getClient } from "@/app/client";
-import { ImageSliderBlock } from "@/components/blocks/ImageSliderBlock";
+import {
+  ImageSliderBlock,
+  ImageSliderBlockFragmentDefinition,
+} from "@/components/blocks/ImageSliderBlock";
 import { Breadcrumb } from "@/components/general/Breadcrumb";
 import { PageContent } from "@/components/general/PageContent";
 import { NeufMap } from "@/components/venues/NeufMap";
 import { VenueInfo } from "@/components/venues/VenueInfo";
-import { graphql } from "@/gql";
+import { graphql, unmaskFragment } from "@/gql";
 import { VenueFragment } from "@/gql/graphql";
 import { getSeoMetadata } from "@/lib/seo";
 
@@ -86,8 +89,14 @@ export default async function Page({ params }: { params: Params }) {
 
   return (
     <main className="site-main" id="main">
-      {venue.images && venue.images.length !== 0 && (
-        <ImageSliderBlock block={venue.images[0]} hero />
+      {venue.images?.[0]?.__typename === "ImageSliderBlock" && (
+        <ImageSliderBlock
+          block={unmaskFragment(
+            ImageSliderBlockFragmentDefinition,
+            venue.images[0]
+          )}
+          hero
+        />
       )}
       <div className="page-header-small">
         <Breadcrumb link="/utleie" text="Lokale" />

web/src/app/lokaler/page.tsx

@@ -45,7 +45,10 @@ const VenueFragmentDefinition = graphql(`
     seoTitle
     searchDescription
     images {
-      ...Blocks
+      __typename
+      ... on ImageSliderBlock {
+        ...ImageSliderBlock
+      }
     }
     body {
       ...Blocks

web/src/app/sponsorer/page.tsx

@@ -1,6 +1,6 @@
 import { Metadata, ResolvingMetadata } from "next";
 import { graphql } from "@/gql";
-import { SponsorsPage, SponsorBlock } from "@/gql/graphql";
+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";
@@ -30,7 +30,7 @@ export async function generateMetadata(
     return null;
   }
 
-  const index = data.page as SponsorsPage;
+  const index = data.page as SponsorsPageFragment;
   const metadata = await getSeoMetadata(index, parent);
   return metadata;
 }
@@ -47,13 +47,7 @@ const SponsorsPageFragmentDefinition = graphql(`
       }
       sponsors {
         ... on SponsorBlock {
-          id
-          name
-          logo {
-            ...Image
-          }
-          text
-          website
+          ...Sponsor
         }
       }
     }
@@ -70,13 +64,15 @@ export default async function Page() {
     throw new Error("Failed to render /sponsorer");
   }
 
-  const page = data.page as SponsorsPage;
+  const page = data.page as SponsorsPageFragment;
 
   return (
     <main className="site-main" id="main">
       <PageHeader heading={page.title} lead={page.lead} />
       {page.body && <PageContent blocks={page.body} />}
-      <SponsorList sponsors={page.sponsors as SponsorBlock[]} />
+      {page.sponsors && (
+        <SponsorList sponsors={page.sponsors as SponsorFragment[]} />
+      )}
     </main>
   );
 }