GraphQL query editor transformer works!

src-web/components/editors/GraphQLEditor.tsx

@@ -0,0 +1,32 @@
+import { useMemo } from 'react';
+import type { EditorProps } from '../core/Editor';
+import { Editor } from '../core/Editor';
+
+type Props = Pick<
+  EditorProps,
+  'heightMode' | 'onChange' | 'defaultValue' | 'className' | 'useTemplating'
+>;
+
+export function GraphQLEditor({ defaultValue, onChange, ...props }: Props) {
+  const { query } = useMemo(() => {
+    try {
+      const { query } = JSON.parse(defaultValue ?? '{}');
+      return { query };
+    } catch (err) {
+      return { query: 'failed to parse' };
+    }
+  }, [defaultValue]);
+
+  const handleChange = (query: string) => {
+    onChange?.(JSON.stringify({ query }, null, 2));
+  };
+
+  return (
+    <Editor
+      defaultValue={query ?? ''}
+      onChange={handleChange}
+      contentType="application/graphql"
+      {...props}
+    />
+  );
+}