graphiql_workspace.html.eex (2556B)
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 Workspace</title> 15 16 <link rel="stylesheet" media="screen" href="<%= assets["bootstrap/css/bootstrap.css"] %>"> 17 <link rel="stylesheet" media="screen" href="<%= assets["graphiql/graphiql.css"] %>"> 18 <link rel="stylesheet" media="screen" href="<%= assets["graphiql-workspace/graphiql-workspace.css"] %>"> 19 </head> 20 <body> 21 <div id="root" class="graphiql-workspace"></div> 22 <script src="<%= assets["react/react.js"] %>"></script> 23 <script src="<%= assets["react-dom/react-dom.js"] %>"></script> 24 <script src="<%= assets["graphiql-workspace/graphiql-workspace.js"] %>"></script> 25 <script src="<%= assets["@absinthe/socket-graphiql/socket-graphiql.js"] %>"></script> 26 <script type="text/javascript"> 27 function absintheSubscriptionsClientBuilder(url, connectionParams) { 28 29 const urlObject = new URL(url); 30 31 const urlParams = urlObject.search 32 .slice(1) 33 .split('&') 34 .filter(s => s !== '') 35 .map(p => p.split('=')) 36 .reduce((obj, [key, value]) => { 37 obj[key] = value; 38 return obj; 39 }, {}); 40 41 return new AbsintheSocketGraphiql.SubscriptionsClient(`${urlObject.origin}${urlObject.pathname}`, 42 {params: Object.assign(urlParams, connectionParams)}); 43 } 44 45 var protocol = window.location.protocol === "https:" ? "wss:" : "ws:"; 46 var config = new graphiqlWorkspace.AppConfig("graphiql", { 47 defaultUrl: <%= default_url %>, 48 <%= if socket_url do %> 49 defaultWebsocketUrl: <%= socket_url %>, 50 subscriptionsClientBuilder: absintheSubscriptionsClientBuilder, 51 <% end %> 52 defaultQuery: '<%= query_string %>', 53 defaultVariables: '<%= variables_string %>', 54 defaultHeaders: <%= default_headers %> 55 }); 56 57 ReactDOM.render( 58 React.createElement(graphiqlWorkspace.GraphiQLWorkspace, {config: config}), 59 document.getElementById("root") 60 ); 61 </script> 62 </body> 63 </html>