Skip to content

Commit b9e7cf1

Browse files
bbakermanbbakerman
committed
Adds graphiql support to out HttpMain example
1 parent fe8951d commit b9e7cf1

2 files changed

Lines changed: 158 additions & 5 deletions

File tree

‎src/test/groovy/example/http/HttpMain.java‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,12 @@
1919
import org.dataloader.BatchLoader;
2020
import org.dataloader.DataLoader;
2121
import org.dataloader.DataLoaderRegistry;
22+
import org.eclipse.jetty.server.Handler;
2223
import org.eclipse.jetty.server.Request;
2324
import org.eclipse.jetty.server.Server;
2425
import org.eclipse.jetty.server.handler.AbstractHandler;
26+
import org.eclipse.jetty.server.handler.HandlerList;
27+
import org.eclipse.jetty.server.handler.ResourceHandler;
2528

2629
import javax.servlet.ServletException;
2730
import javax.servlet.http.HttpServletRequest;
@@ -58,21 +61,36 @@ public static void main(String[] args) throws Exception {
5861
Server server = new Server(PORT);
5962
//
6063
// In Jetty, handlers are how your get called backed on a request
61-
server.setHandler(new HttpMain());
64+
HttpMain main_handler = new HttpMain();
65+
66+
ResourceHandler resource_handler = new ResourceHandler();
67+
resource_handler.setDirectoriesListed(false);
68+
resource_handler.setWelcomeFiles(new String[]{"index.html"});
69+
70+
resource_handler.setResourceBase("./src/test/resources/httpmain");
71+
72+
HandlerList handlers = new HandlerList();
73+
handlers.setHandlers(new Handler[]{resource_handler, main_handler});
74+
server.setHandler(handlers);
75+
6276
server.start();
6377

6478
server.join();
6579
}
6680

6781
@Override
6882
public void handle(String target, Request baseRequest, HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
69-
if ("/graphql".equals(target) || "/".equals(target)) {
83+
boolean handled = false;
84+
if ("/graphql".equals(target)) {
7085
handleStarWars(request, response);
71-
}
72-
if (target.startsWith("/executionresult")) {
86+
handled = true;
87+
} else if (target.startsWith("/executionresult")) {
7388
new ExecutionResultJSONTesting(target, response);
89+
handled = true;
90+
}
91+
if (handled) {
92+
baseRequest.setHandled(true);
7493
}
75-
baseRequest.setHandled(true);
7694
}
7795

7896
private void handleStarWars(HttpServletRequest httpRequest, HttpServletResponse httpResponse) throws IOException {

‎src/test/resources/httpmain/index.html‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<!DOCTYPE html>
2+
<html xmlns:https="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<style>
5+
body {
6+
height: 100%;
7+
margin: 0;
8+
width: 100%;
9+
overflow: hidden;
10+
}
11+
12+
#graphiql {
13+
height: 100vh;
14+
}
15+
</style>
16+
17+
<!--
18+
This GraphiQL example depends on Promise and fetch, which are available in
19+
modern browsers, but can be "polyfilled" for older browsers.
20+
GraphiQL itself depends on React DOM.
21+
If you do not want to rely on a CDN, you can host these files locally or
22+
include them directly in your favored resource bunder.
23+
-->
24+
<script src="//cdn.jsdelivr.net/es6-promise/4.0.5/es6-promise.auto.min.js"></script>
25+
<script src="//cdn.jsdelivr.net/fetch/0.9.0/fetch.min.js"></script>
26+
<script src="//cdn.jsdelivr.net/react/15.4.2/react.min.js"></script>
27+
<script src="//cdn.jsdelivr.net/react/15.4.2/react-dom.min.js"></script>
28+
29+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/graphiql/0.11.5/graphiql.css"/>
30+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/theme/solarized.css" />
31+
<script src="https://cdnjs.cloudflare.com/ajax/libs/graphiql/0.11.5/graphiql.js"></script>
32+
</head>
33+
<body>
34+
<div id="graphiql">Loading...</div>
35+
<script>
36+
/**
37+
* This GraphiQL example illustrates how to use some of GraphiQL's props
38+
* in order to enable reading and updating the URL parameters, making
39+
* link sharing of queries a little bit easier.
40+
*
41+
* This is only one example of this kind of feature, GraphiQL exposes
42+
* various React params to enable interesting integrations.
43+
*/
44+
// Parse the search string to get url parameters.
45+
var search = window.location.search;
46+
var parameters = {};
47+
search.substr(1).split('&').forEach(function (entry) {
48+
var eq = entry.indexOf('=');
49+
if (eq >= 0) {
50+
parameters[decodeURIComponent(entry.slice(0, eq))] =
51+
decodeURIComponent(entry.slice(eq + 1));
52+
}
53+
});
54+
// if variables was provided, try to format it.
55+
if (parameters.variables) {
56+
try {
57+
parameters.variables =
58+
JSON.stringify(JSON.parse(parameters.variables), null, 2);
59+
} catch (e) {
60+
// Do nothing, we want to display the invalid JSON as a string, rather
61+
// than present an error.
62+
}
63+
}
64+
// When the query and variables string is edited, update the URL bar so
65+
// that it can be easily shared
66+
function onEditQuery(newQuery) {
67+
parameters.query = newQuery;
68+
updateURL();
69+
}
70+
71+
function onEditVariables(newVariables) {
72+
parameters.variables = newVariables;
73+
updateURL();
74+
}
75+
76+
function onEditOperationName(newOperationName) {
77+
parameters.operationName = newOperationName;
78+
updateURL();
79+
}
80+
81+
function updateURL() {
82+
var newSearch = '?' + Object.keys(parameters).filter(function (key) {
83+
return Boolean(parameters[key]);
84+
}).map(function (key) {
85+
return encodeURIComponent(key) + '=' +
86+
encodeURIComponent(parameters[key]);
87+
}).join('&');
88+
history.replaceState(null, null, newSearch);
89+
}
90+
91+
// Defines a GraphQL fetcher using the fetch API. You're not required to
92+
// use fetch, and could instead implement graphQLFetcher however you like,
93+
// as long as it returns a Promise or Observable.
94+
function graphQLFetcher(graphQLParams) {
95+
// This example expects a GraphQL server at the path /graphql.
96+
// Change this to point wherever you host your GraphQL server.
97+
return fetch('/graphql', {
98+
method: 'post',
99+
headers: {
100+
'Accept': 'application/json',
101+
'Content-Type': 'application/json',
102+
},
103+
body: JSON.stringify(graphQLParams),
104+
credentials: 'include',
105+
}).then(function (response) {
106+
return response.text();
107+
}).then(function (responseBody) {
108+
try {
109+
return JSON.parse(responseBody);
110+
} catch (error) {
111+
return responseBody;
112+
}
113+
});
114+
}
115+
116+
// Render <GraphiQL /> into the body.
117+
// See the README in the top level of this module to learn more about
118+
// how you can customize GraphiQL by providing different values or
119+
// additional child elements.
120+
ReactDOM.render(
121+
React.createElement(GraphiQL, {
122+
fetcher: graphQLFetcher,
123+
query: parameters.query,
124+
variables: parameters.variables,
125+
operationName: parameters.operationName,
126+
onEditQuery: onEditQuery,
127+
onEditVariables: onEditVariables,
128+
onEditOperationName: onEditOperationName,
129+
editorTheme: "solarized"
130+
}),
131+
document.getElementById('graphiql')
132+
);
133+
</script>
134+
</body>
135+
</html>

0 commit comments

Comments
 (0)