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

web/src/components/blocks/ContactEntityBlock.tsx

@@ -1,15 +1,33 @@
-import { ContactEntityBlock as ContactEntityBlockType } from "@/gql/graphql";
+import { graphql, unmaskFragment } from "@/gql";
+import { type ContactEntityBlockFragment } from "@/gql/graphql";
 import styles from "./contactEntityBlock.module.scss";
-import { formatNorwegianPhoneNumber, formatPhoneE164 } from "@/lib/common";
+import {
+  ContactEntityFragmentDefinition,
+  ImageFragmentDefinition,
+  formatNorwegianPhoneNumber,
+  formatPhoneE164,
+} from "@/lib/common";
 import { Icon } from "../general/Icon";
 import { Image } from "../general/Image";
 
+const ContactEntityBlockFragmentDefinition = graphql(`
+  fragment ContactEntityBlock on ContactEntityBlock {
+    contactEntity {
+      ...ContactEntity
+    }
+  }
+`);
+
 export const ContactEntityBlock = ({
   block,
 }: {
-  block: ContactEntityBlockType;
+  block: ContactEntityBlockFragment;
 }) => {
-  const contact = block?.contactEntity;
+  const contact = unmaskFragment(
+    ContactEntityFragmentDefinition,
+    block?.contactEntity
+  );
+  const image = unmaskFragment(ImageFragmentDefinition, contact?.image);
 
   if (!contact) {
     return <></>;
@@ -21,18 +39,18 @@ export const ContactEntityBlock = ({
   return (
     <li className={styles.contactItem}>
       <div className={styles.image}>
-        {!contact.image && (
+        {!image && (
           <img
             src="/assets/graphics/portrait-pig.svg"
             className={styles.portraitPlaceholder}
           />
         )}
-        {contact.image && (
+        {image && (
           <Image
-            src={contact.image.url}
-            alt={contact.image.alt ?? ""}
-            width={contact.image.width}
-            height={contact.image.height}
+            src={image.url}
+            alt={image.alt ?? ""}
+            width={image.width}
+            height={image.height}
             sizes="25vw"
             className={styles.portrait}
           />