GraphiQL Bookmarklet

graphiql-bookmarklet.es6

document.removeChild(document.documentElement);
var html = document.createElement('html');
var head = document.createElement('head')
html.appendChild(head);
var body = document.createElement('body');
var reactRoot = body.appendChild(document.createElement('div'));
html.appendChild(body);
document.appendChild(html);

function loadScript(url)
{
    return new Promise((callback) => {
      var head = document.getElementsByTagName('head')[0];
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = url;

      script.onreadystatechange = callback;
      script.onload = callback;
  
      head.appendChild(script);
    });
}
function loadStyle(url)
{
    return new Promise((callback) => {
      var head = document.getElementsByTagName('head')[0];
      var link = document.createElement('link');
      link.type = 'text/css';
      link.rel = 'stylesheet';
      link.href = url;

      link.onreadystatechange = callback;
      link.onload = callback;
  
      head.appendChild(link);
    });
}

loadScript('https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js').then(() => 
  Promise.all([
    loadStyle('https://cdnjs.cloudflare.com/ajax/libs/graphiql/0.7.8/graphiql.css'),
    loadScript('https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js'),
    loadScript('https://cdnjs.cloudflare.com/ajax/libs/graphiql/0.7.8/graphiql.js')
  ]).then(() => {
    function graphQLFetcher(graphQLParams) {
      return fetch(window.location.origin + '/graphql', {
        method: 'post',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(graphQLParams),
      }).then(response => response.json());
    }
    
    setTimeout(() => ReactDOM.render(React.createElement(GraphiQL, {fetcher: graphQLFetcher}), reactRoot), 0)
  })
)

graphiql-bookmarklet.href

javascript:(function()%7B'use%20strict'%3Bdocument.removeChild(document.documentElement)%3Bvar%20html%20%3D%20document.createElement('html')%3Bvar%20head%20%3D%20document.createElement('head')%3Bhtml.appendChild(head)%3Bvar%20body%20%3D%20document.createElement('body')%3Bvar%20reactRoot%20%3D%20body.appendChild(document.createElement('div'))%3Bhtml.appendChild(body)%3Bdocument.appendChild(html)%3Bfunction%20loadScript(url)%20%7Breturn%20new%20Promise(function%20(callback)%20%7Bvar%20head%20%3D%20document.getElementsByTagName('head')%5B0%5D%3Bvar%20script%20%3D%20document.createElement('script')%3Bscript.type%20%3D%20'text%2Fjavascript'%3Bscript.src%20%3D%20url%3Bscript.onreadystatechange%20%3D%20callback%3Bscript.onload%20%3D%20callback%3Bhead.appendChild(script)%3B%7D)%3B%7Dfunction%20loadStyle(url)%20%7Breturn%20new%20Promise(function%20(callback)%20%7Bvar%20head%20%3D%20document.getElementsByTagName('head')%5B0%5D%3Bvar%20link%20%3D%20document.createElement('link')%3Blink.type%20%3D%20'text%2Fcss'%3Blink.rel%20%3D%20'stylesheet'%3Blink.href%20%3D%20url%3Blink.onreadystatechange%20%3D%20callback%3Blink.onload%20%3D%20callback%3Bhead.appendChild(link)%3B%7D)%3B%7DloadScript('https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Freact%2F15.3.2%2Freact.js').then(function%20()%20%7Breturn%20Promise.all(%5BloadStyle('https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fgraphiql%2F0.7.8%2Fgraphiql.css')%2C%20loadScript('https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Freact%2F15.3.2%2Freact-dom.js')%2C%20loadScript('https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fgraphiql%2F0.7.8%2Fgraphiql.js')%5D).then(function%20()%20%7Bfunction%20graphQLFetcher(graphQLParams)%20%7Breturn%20fetch(window.location.origin%20%2B%20'%2Fgraphql'%2C%20%7Bmethod%3A%20'post'%2Cheaders%3A%20%7B%20'Content-Type'%3A%20'application%2Fjson'%20%7D%2Cbody%3A%20JSON.stringify(graphQLParams)%7D).then(function%20(response)%20%7Breturn%20response.json()%3B%7D)%3B%7DsetTimeout(function%20()%20%7Breturn%20ReactDOM.render(React.createElement(GraphiQL%2C%20%7B%20fetcher%3A%20graphQLFetcher%20%7D)%2C%20reactRoot)%3B%7D%2C%200)%3B%7D)%3B%7D)%7D)()