@apollo/sandbox
v2.7.4TypeScript
This repo hosts the source for Apollo Studio's Embeddable Sandbox
42.9K/weekUpdated 2 weeks agoMITUnpacked: 174.7 KB
Published by packages@apollographql.com
Apollo Studio Embeddable Sandbox
This repo hosts the source for Apollo Studio's Embeddable Sandbox
Using the @apollo/sandbox npm package
You can download the @apollo/sandbox npm package with npm install @apollo/sandbox. Then, you can import the ApolloSandbox class or ApolloSandbox React component like so:
``
import { ApolloSandbox } from '@apollo/sandbox';
import { ApolloSandbox } from '@apollo/sandbox/react';
When you call the EmbeddedSandbox constructor with a target of an html div you have in your app, the Sandbox will show up in an iframe in that element. Check out all the configuration options for your graph.
$3
`
import { ApolloSandbox } from '@apollo/sandbox/react';
function App() {
return (
);
}
`
$3
`
import { ApolloSandbox } from '@apollo/sandbox';
function App() {
...
new ApolloSandbox({
target: '#embeddableSandbox',
})
...
}
...
// style the iframe for your site
`
$3
- Embedding a registered public graph
- Usage by directly passing in schema
Developing embedded Sandbox
run npm run build:umd to build umd files where EmbeddedSandbox is exposed on window.
Open examples/localDevelopmentExample.html to test your changes. (if origin is not set, run localDevelopmentExample.html from Live Server)
Install the Live Server extension on VSCode, then go to localDevelopmentExample.html and click 'Go Live'
$3
run npm run build:cjs-esm to build cjs & esm files where ApolloSandbox & ApolloSandbox React are named exports.
We have a React example app that uses our ApolloSandbox React component to render the embedded Sandbox located in src/examples/react-example. To run this example, npm run build and npm run start in react-example`. Make sure you delete the .parcel-cache folder before you rebuild for new changes. (TODO remove parcel caching)