57 lines
1.2 KiB
JavaScript
57 lines
1.2 KiB
JavaScript
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;
|