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

web/src/components/blocks/FeaturedBlock.tsx

@@ -1,22 +1,47 @@
-import { FeaturedBlock as FeaturedBlockType } from "@/gql/graphql";
+import { graphql, unmaskFragment } from "@/gql";
+import { type FeaturedBlockFragment } from "@/gql/graphql";
 import Link from "next/link";
 import { Image } from "@/components/general/Image";
+import { ImageFragmentDefinition } from "@/lib/common";
 import styles from "./featuredBlock.module.scss";
 
-// the 'text' field has been aliased to 'featuredBlockText' and i'm
-// using codegen the wrong way. let's specify the field here and move on
-type FeaturedBlockTypeWithAlias = FeaturedBlockType & {
-  featuredBlockText: string;
-};
+const FeaturedBlockFragmentDefinition = graphql(`
+  fragment FeaturedBlock on FeaturedBlock {
+    title
+    featuredBlockText: text
+    linkText
+    imagePosition
+    backgroundColor
+    featuredPage {
+      contentType
+      pageType
+      url
+      ... on EventPage {
+        featuredImage {
+          ...Image
+        }
+      }
+      ... on NewsPage {
+        featuredImage {
+          ...Image
+        }
+      }
+    }
+    featuredImageOverride {
+      ...Image
+    }
+  }
+`);
 
 export const FeaturedBlock = ({
   block,
 }: {
-  block: FeaturedBlockTypeWithAlias;
+  block: FeaturedBlockFragment;
 }) => {
-  const image = !!block.featuredImageOverride
-    ? block.featuredImageOverride
-    : null;
+  const image = unmaskFragment(
+    ImageFragmentDefinition,
+    block.featuredImageOverride
+  );
   // TODO: fetch image from target page
 
   return (