This repo hosts the source for Apollo Studio's Embeddable Explorer
Using the @apollo/explorer npm package
You can download the @apollo/explorer npm package with npm install @apollo/explorer
. Then, you can import the ApolloExplorer class or ApolloExplorerReact component like so:
import { ApolloExplorer, ApolloExplorerReact } from '@apollo/explorer';
When you call the EmbeddedExplorer constructor with a target
of an html div you have in your app, the Explorer will show up in an iframe in that element. Check out all the configuration options for your graph.
import { ApolloExplorerReact } from '@apollo/explorer';
function App() {
return (
<ApolloExplorerReact
target='#embeddableExplorer',
graphRef='acephei@current',
endpointUrl='https://acephei-gateway.herokuapp.com',
initialState={{
document: `query Example {
me {
id
}
}`,
variables: {
test: 'abcxyz',
},
displayOptions: {
showHeadersAndEnvVars: true,
},
}}
/>
);
}
import { ApolloExplorer } from '@apollo/explorer';
function App() {
...
new ApolloExplorer({
target: '#embeddableExplorer',
graphRef: 'acephei@current',
endpointUrl: 'https://acephei-gateway.herokuapp.com',
initialState: {
document: `query Example {
me {
id
}
}`,
variables: {
test: 'abcxyz',
},
displayOptions: {
showHeadersAndEnvVars: true,
},
},
})
...
}
run npm run build:umd
to build umd files where EmbeddedExplorer is exposed on window.
run npm run build:cjs-esm
to build cjs & esm files where ApolloExplorer & ApolloExplorerReact are named exports.
Open examples/localDevelopmentExample.html
to test your changes.