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

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