100 lines
3.2 KiB
Text
100 lines
3.2 KiB
Text
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>GraphiQL</title>
|
||
|
|
<%= stylesheet_link_tag("graphiql/rails/application") %>
|
||
|
|
<%# TODO: This file was included to fix a CSP failure. Please remove when https://github.com/rmosolgo/graphiql-rails/pull/71 will be released %>
|
||
|
|
<%= javascript_include_tag("graphiql/rails/application", nonce: true) %>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="graphiql-container">
|
||
|
|
Loading...
|
||
|
|
</div>
|
||
|
|
<%= javascript_tag nonce: true do -%>
|
||
|
|
var parameters = {};
|
||
|
|
|
||
|
|
<% if GraphiQL::Rails.config.query_params %>
|
||
|
|
// Parse the search string to get url parameters.
|
||
|
|
var search = window.location.search;
|
||
|
|
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 updateURL() {
|
||
|
|
var newSearch = '?' + Object.keys(parameters).map(function (key) {
|
||
|
|
return encodeURIComponent(key) + '=' +
|
||
|
|
encodeURIComponent(parameters[key]);
|
||
|
|
}).join('&');
|
||
|
|
history.replaceState(null, null, newSearch);
|
||
|
|
}
|
||
|
|
<% end %>
|
||
|
|
|
||
|
|
// Defines a GraphQL fetcher using the fetch API.
|
||
|
|
var graphQLEndpoint = "<%= graphql_endpoint_path %>";
|
||
|
|
function graphQLFetcher(graphQLParams) {
|
||
|
|
return fetch(graphQLEndpoint, {
|
||
|
|
method: 'post',
|
||
|
|
headers: <%= raw JSON.pretty_generate(GraphiQL::Rails.config.resolve_headers(self)) %>,
|
||
|
|
body: JSON.stringify(graphQLParams),
|
||
|
|
credentials: 'include',
|
||
|
|
}).then(function(response) {
|
||
|
|
return response.text();
|
||
|
|
}).then(function(text) {
|
||
|
|
try {
|
||
|
|
return JSON.parse(text);
|
||
|
|
} catch(error) {
|
||
|
|
return {
|
||
|
|
"message": "The server responded with invalid JSON, this is probably a server-side error",
|
||
|
|
"response": text,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
<% if GraphiQL::Rails.config.initial_query %>
|
||
|
|
var defaultQuery = "<%= GraphiQL::Rails.config.initial_query.gsub("\n", '\n').gsub('"', '\"').html_safe %>";
|
||
|
|
<% else %>
|
||
|
|
var defaultQuery = undefined
|
||
|
|
<% end %>
|
||
|
|
|
||
|
|
// Render <GraphiQL /> into the body.
|
||
|
|
ReactDOM.render(
|
||
|
|
React.createElement(GraphiQL, {
|
||
|
|
fetcher: graphQLFetcher,
|
||
|
|
defaultQuery: defaultQuery,
|
||
|
|
<% if GraphiQL::Rails.config.query_params %>
|
||
|
|
query: parameters.query,
|
||
|
|
variables: parameters.variables,
|
||
|
|
onEditQuery: onEditQuery,
|
||
|
|
onEditVariables: onEditVariables
|
||
|
|
<% end %>
|
||
|
|
}),
|
||
|
|
document.getElementById("graphiql-container")
|
||
|
|
);
|
||
|
|
<% end -%>
|
||
|
|
</body>
|
||
|
|
</html>
|