<!-- * LICENSE AGREEMENT For GraphiQL software * * Facebook, Inc. (“Facebook”) owns all right, title and interest, including all * intellectual property and other proprietary rights, in and to the GraphiQL * software. Subject to your compliance with these terms, you are hereby granted a * non-exclusive, worldwide, royalty-free copyright license to (1) use and copy the * GraphiQL software; and (2) reproduce and distribute the GraphiQL software as * part of your own software (“Your Software”). Facebook reserves all rights not * expressly granted to you in this license agreement. * * THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS OR * IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED. IN NO * EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICES, DIRECTORS OR EMPLOYEES BE * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) * HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT * LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF * THE USE OF THE SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. * * You will include in Your Software (e.g., in the file(s), documentation or other * materials accompanying your software): (1) the disclaimer set forth above; (2) * this sentence; and (3) the following copyright notice: * * Copyright (c) 2015, Facebook, Inc. All rights reserved. --> <!DOCTYPE html> <html> <head> <style> body { height: 100%; margin: 0; width: 100%; overflow: hidden; } #graphiql { height: 100vh; } </style> <link rel="stylesheet" href="//cdn.jsdelivr.net/graphiql/0.8.0/graphiql.css" /> <script src="//cdn.jsdelivr.net/es6-promise/4.0.5/es6-promise.auto.min.js"></script> <script src="//cdn.jsdelivr.net/fetch/0.9.0/fetch.min.js"></script> <script src="//cdn.jsdelivr.net/react/15.3.2/react.min.js"></script> <script src="//cdn.jsdelivr.net/react/15.3.2/react-dom.min.js"></script> <script src="//cdn.jsdelivr.net/graphiql/0.8.0/graphiql.min.js"></script> </head> <body> <div id="graphiql">Loading...</div> <script> /** * This GraphiQL example illustrates how to use some of GraphiQL's props * in order to enable reading and updating the URL parameters, making * link sharing of queries a little bit easier. * * This is only one example of this kind of feature, GraphiQL exposes * various React params to enable interesting integrations. */ // Parse the search string to get url parameters. var search = window.location.search; var parameters = {}; search.substr(1).split('&').forEach(function (entry) { var eq = entry.indexOf('='); if (eq >= 0) { parameters[decodeURIComponent(entry.slice(0, eq))] = decodeURIComponent(entry.slice(eq + 1)); } }); // if variables was provided, try to format it. if (parameters.variables) { try { parameters.variables = JSON.stringify(JSON.parse(parameters.variables), null, 2); } catch (e) { // Do nothing, we want to display the invalid JSON as a string, rather // than present an error. } } // When the query and variables string is edited, update the URL bar so // that it can be easily shared function onEditQuery(newQuery) { parameters.query = newQuery; updateURL(); } function onEditVariables(newVariables) { parameters.variables = newVariables; updateURL(); } function onEditOperationName(newOperationName) { parameters.operationName = newOperationName; updateURL(); } function updateURL() { var newSearch = '?' + Object.keys(parameters).filter(function (key) { return Boolean(parameters[key]); }).map(function (key) { return encodeURIComponent(key) + '=' + encodeURIComponent(parameters[key]); }).join('&'); history.replaceState(null, null, newSearch); } // Defines a GraphQL fetcher using the fetch API. function graphQLFetcher(graphQLParams) { return fetch('/graphql', { method: 'post', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify(graphQLParams), credentials: 'include', }).then(function (response) { return response.text(); }).then(function (responseBody) { try { return JSON.parse(responseBody); } catch (error) { return responseBody; } }); } // Render <GraphiQL /> into the body. ReactDOM.render( React.createElement(GraphiQL, { fetcher: graphQLFetcher, query: parameters.query, variables: parameters.variables, operationName: parameters.operationName, onEditQuery: onEditQuery, onEditVariables: onEditVariables, onEditOperationName: onEditOperationName }), document.getElementById('graphiql') ); </script> </body> </html>