CINXE.COM
SWAPI GraphQL API
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="robots" content="noindex" /> <meta name="referrer" content="origin" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>SWAPI GraphQL API</title> <style> body { height: 100vh; margin: 0; overflow: hidden; } #splash { color: #333; display: flex; flex-direction: column; font-family: system, -apple-system, "San Francisco", ".SFNSDisplay-Regular", "Segoe UI", Segoe, "Segoe WP", "Helvetica Neue", helvetica, "Lucida Grande", arial, sans-serif; height: 100vh; justify-content: center; text-align: center; } </style> <link rel="icon" href="favicon.ico" /> <link type="text/css" href="//unpkg.com/graphiql/graphiql.min.css" rel="stylesheet" /> <link type="text/css" href="//unpkg.com/@graphiql/plugin-explorer/dist/style.css" rel="stylesheet" /> </head> <body> <div id="splash">Loading…</div> <script src="//unpkg.com/react@18.3.1/umd/react.production.min.js"></script> <script src="//unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script> <script src="//unpkg.com/graphiql/graphiql.min.js"></script> <script src="//unpkg.com/@graphiql/plugin-explorer/dist/index.umd.js"></script> <script> // 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); } const fetcher = GraphiQL.createFetcher({ url: parameters.fetchURL || "/graphql", }); const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin(); // Render <GraphiQL /> into the body. ReactDOM.render( React.createElement(GraphiQL, { fetcher: fetcher, query: parameters.query, variables: parameters.variables, operationName: parameters.operationName, onEditQuery: onEditQuery, onEditVariables: onEditVariables, onEditOperationName: onEditOperationName, plugins: [explorerPlugin] }), document.body ); </script> </body> </html>