@graphql-yoga/render-apollo-sandbox
Version:
39 lines (38 loc) • 1.49 kB
JavaScript
export function renderApolloSandbox(sandboxOpts) {
return function renderApolloSandbox(graphiqlOpts) {
const includeCookies = graphiqlOpts.credentials === 'include' || graphiqlOpts.credentials === 'same-origin';
const initialState = {
document: graphiqlOpts.defaultQuery,
headers: graphiqlOpts.headers,
sharedHeaders: graphiqlOpts.additionalHeaders,
includeCookies,
...sandboxOpts?.initialState,
};
const endpoint = graphiqlOpts.endpoint
? JSON.stringify(graphiqlOpts.endpoint)
: 'location.pathname';
const finalOpts = {
includeCookies,
...sandboxOpts,
initialState,
};
return /* HTML */ `
<html style="height: 100%;" lang="en">
<head>
<title>Apollo Sandbox</title>
</head>
<body style="margin: 0;height: 100%;">
<div style="width: 100%; height: 100%;" id="embedded-sandbox"></div>
<script src="https://embeddable-sandbox.cdn.apollographql.com/_latest/embeddable-sandbox.umd.production.min.js"></script>
<script>
const opts = ${JSON.stringify(finalOpts)};
opts.initialEndpoint ||= new URL(${endpoint}, location.href).toString();
opts.target ||= '#embedded-sandbox';
new window.EmbeddedSandbox(opts);
</script>
</body>
</html>
`;
};
}