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

web/src/components/blocks/PageSection.tsx

@@ -1,13 +1,26 @@
-import { PageSectionBlock as PageSectionBlockType } from "@/gql/graphql";
+import { graphql } from "@/gql";
+import { type PageSectionBlockFragment } from "@/gql/graphql";
 import styles from "./pageSection.module.scss";
 import { Blocks } from "./Blocks";
 import slugify from "@sindresorhus/slugify";
 import { DecorativeIcon } from "../general/Icon";
 
+const PageSectionBlockFragmentDefinition = graphql(`
+  fragment PageSectionBlock on PageSectionBlock {
+    title
+    backgroundColor
+    icon
+    body {
+      id
+      blockType
+    }
+  }
+`);
+
 export const PageSectionBlock = ({
   block,
 }: {
-  block: PageSectionBlockType;
+  block: PageSectionBlockFragment;
 }) => {
   const anchor = slugify(block.title);
 
@@ -31,7 +44,7 @@ export const PageSectionBlock = ({
 export const PageSectionNavigationBlock = ({
   sections,
 }: {
-  sections: PageSectionBlockType[];
+  sections: PageSectionBlockFragment[];
 }) => {
   if (!sections.length) {
     return <></>;