feat: add embedded Apollo Sandbox page

2026-09-09 18:23:47 +07:00
parent 6edf45b5f4
commit 3b458298e0
4 changed files with 97 additions and 109 deletions
@@ -0,0 +1,56 @@
+const React = require('react');
+const Head = require('next/head');
+
+function Home() {
+  const sandboxRef = React.useRef(null);
+
+  React.useEffect(() => {
+    const script = document.createElement('script');
+    script.src =
+      'https://embeddable-sandbox.cdn.apollographql.com/_latest/embeddable-sandbox.umd.production.min.js';
+    script.async = true;
+
+    script.onload = () => {
+      sandboxRef.current = new window.EmbeddedSandbox({
+        target: '#embedded-sandbox',
+        initialEndpoint: `${window.location.origin}/api/graphql`,
+        initialState: {
+          document: `query TestCategoriesWithProducts {
+  categories {
+    id
+    name
+    products {
+      id
+      title
+      price
+    }
+  }
+}`,
+        },
+      });
+    };
+
+    document.body.appendChild(script);
+
+    return () => {
+      sandboxRef.current?.dispose?.();
+      script.remove();
+    };
+  }, []);
+
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(
+      Head,
+      null,
+      React.createElement('title', null, 'GraphQL Sandbox - Lab 04')
+    ),
+    React.createElement('div', {
+      id: 'embedded-sandbox',
+      style: { width: '100vw', height: '100vh' },
+    })
+  );
+}
+
+module.exports = Home;