graphiql.html.eex (3347B)
1 <!-- 2 The request to this GraphQL server provided the header "Accept: text/html" 3 and as a result has been presented GraphiQL - an in-browser IDE for 4 exploring GraphQL. 5 If you wish to receive JSON, provide the header "Accept: application/json" or 6 add "&raw" to the end of the URL within a browser. 7 --> 8 <!DOCTYPE html> 9 <html lang="en"> 10 <head> 11 <meta charset="utf-8"> 12 <meta name="viewport" content="width=device-width, initial-scale=1"> 13 14 <title>GraphiQL</title> 15 16 <style> 17 html, body { 18 height: 100%; 19 margin: 0; 20 overflow: hidden; 21 width: 100%; 22 } 23 24 #root { 25 height: 100%; 26 } 27 </style> 28 <link href="<%= assets["graphiql/graphiql.css"] %>" rel="stylesheet" /> 29 </head> 30 <body> 31 <div id="root"></div> 32 <script src="<%= assets["whatwg-fetch/fetch.js"] %>"></script> 33 <script src="<%= assets["react/react.js"] %>"></script> 34 <script src="<%= assets["react-dom/react-dom.js"] %>"></script> 35 <script src="<%= assets["graphiql/graphiql.js"] %>"></script> 36 <script src="<%= assets["@absinthe/socket-graphiql/socket-graphiql.js"] %>"></script> 37 <script> 38 // Collect the URL parameters 39 var parameters = {}; 40 window.location.search.substr(1).split('&').forEach(function (entry) { 41 var eq = entry.indexOf('='); 42 if (eq >= 0) { 43 parameters[decodeURIComponent(entry.slice(0, eq))] = 44 decodeURIComponent(entry.slice(eq + 1)); 45 } 46 }); 47 // Produce a Location query string from a parameter object. 48 function locationQuery(params) { 49 return '?' + Object.keys(params).map(function (key) { 50 return encodeURIComponent(key) + '=' + 51 encodeURIComponent(params[key]); 52 }).join('&'); 53 } 54 // Derive a fetch URL from the current URL, sans the GraphQL parameters. 55 var graphqlParamNames = { 56 query: true, 57 variables: true, 58 operationName: true 59 }; 60 var otherParams = {}; 61 for (var k in parameters) { 62 if (parameters.hasOwnProperty(k) && graphqlParamNames[k] !== true) { 63 otherParams[k] = parameters[k]; 64 } 65 } 66 67 var fetchURL = locationQuery(otherParams); 68 var protocol = window.location.protocol === "https:" ? "wss:" : "ws:"; 69 var wsUrl = <%= if socket_url do %> <%= socket_url %><% else %>'ws://localhost:4000/socket'<% end %>; 70 71 var subscriptionsClient = new AbsintheSocketGraphiql.SubscriptionsClient(wsUrl, {}); 72 var fetcher = AbsintheSocketGraphiql.createFetcher(fetchURL, subscriptionsClient, 'Your subscription data will appear here after server publication!'); 73 74 // When the query and variables string is edited, update the URL bar so 75 // that it can be easily shared. 76 function onEditQuery(newQuery) { 77 parameters.query = newQuery; 78 updateURL(); 79 } 80 function onEditVariables(newVariables) { 81 parameters.variables = newVariables; 82 updateURL(); 83 } 84 function updateURL() { 85 history.replaceState(null, null, locationQuery(parameters)); 86 } 87 // Render <GraphiQL /> 88 ReactDOM.render( 89 React.createElement(GraphiQL, { 90 fetcher, 91 onEditQuery: onEditQuery, 92 onEditVariables: onEditVariables, 93 query: '<%= query_string %>', 94 response: '<%= result_string %>', 95 variables: '<%= variables_string %>', 96 }), 97 document.getElementById("root") 98 ); 99 </script> 100 </body> 101 </html>