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

web/src/components/blocks/EmbedBlock.tsx

@@ -1,7 +1,16 @@
-import { EmbedBlock as EmbedBlockType } from "@/gql/graphql";
+import { graphql } from "@/gql";
+import { type EmbedBlockFragment } from "@/gql/graphql";
 import styles from "./embedBlock.module.scss";
 
-export const EmbedBlock = ({ block }: { block: EmbedBlockType }) => {
+const EmbedBlockFragmentDefinition = graphql(`
+  fragment EmbedBlock on EmbedBlock {
+    url
+    embed
+    rawEmbed
+  }
+`);
+
+export const EmbedBlock = ({ block }: { block: EmbedBlockFragment }) => {
   if (!block.embed) {
     return <></>;
   }
@@ -18,7 +27,7 @@ export const EmbedBlock = ({ block }: { block: EmbedBlockType }) => {
   */
   let embedData: any = {};
   try {
-    embedData = JSON.parse(block.rawEmbed);
+    embedData = block.rawEmbed ? JSON.parse(block.rawEmbed) : {};
   } catch (e) {
     embedData = {};
   }