Skip to content

Commit fc0d18a

Browse files
bbakermanbbakerman
committed
Added graphiql
1 parent 41566f7 commit fc0d18a

File tree

3 files changed

+223
-10
lines changed

3 files changed

+223
-10
lines changed

‎http-example/readme.md‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
# graphql-java-http-example
2+
3+
An example of using graphql-java in a HTTP application.
4+
5+
It demonstrates the use of `Schema Definition Language (SDL)` to define a schema in a textual way.
6+
7+
It also shows how to use `data loader` to ensure that most efficient way to load
8+
inside a graphql query
9+
10+
Finally it shows how to combine graphql-java `Instrumentation` to create performance tracing
11+
and data loader effectiveness statistics.
12+
13+
To build the code type
14+
15+
./gradlew build
16+
17+
To run the code type
18+
19+
./gradlew bootRun
20+
21+
Point your browser at
22+
23+
http://localhost:8080/
24+
25+
26+
Some example graphql queries might be
27+
28+
{
29+
hero {
30+
name
31+
friends {
32+
name
33+
friends {
34+
id
35+
name
36+
}
37+
38+
}
39+
}
40+
}
41+
42+
43+
or maybe
44+
45+
{
46+
luke: human(id: "1000") {
47+
...HumanFragment
48+
}
49+
leia: human(id: "1003") {
50+
...HumanFragment
51+
}
52+
}
53+
54+
fragment HumanFragment on Human {
55+
name
56+
homePlanet
57+
friends {
58+
name
59+
__typename
60+
}
61+
}
62+
63+

‎http-example/src/main/java/com/graphql/java/http/example/GraphQLController.java‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
import org.springframework.web.bind.annotation.RequestBody;
1414
import org.springframework.web.bind.annotation.RequestMapping;
1515
import org.springframework.web.bind.annotation.RequestMethod;
16+
import org.springframework.web.bind.annotation.RequestParam;
1617
import org.springframework.web.bind.annotation.RestController;
1718

1819
import javax.servlet.http.HttpServletRequest;
@@ -38,39 +39,40 @@ public GraphQLController(GraphQL graphql, ObjectMapper objectMapper, ContextProv
3839

3940
@RequestMapping(value = "/graphql", method = RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE)
4041
@CrossOrigin
41-
public void graphqlGET(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws IOException {
42-
String query = httpServletRequest.getParameter("query");
42+
public void graphqlGET(@RequestParam("query") String query,
43+
@RequestParam(value = "operationName", required = false) String operationName,
44+
@RequestParam("variables") String variablesJson,
45+
HttpServletResponse httpServletResponse) throws IOException {
4346
if (query == null) {
4447
query = "";
4548
}
46-
String variablesJson = httpServletRequest.getParameter("variables");
47-
Map<String, Object> variables = null;
49+
Map<String, Object> variables = new LinkedHashMap<>();
50+
;
4851
if (variablesJson != null) {
4952
variables = objectMapper.readValue(variablesJson, new TypeReference<Map<String, Object>>() {
5053
});
5154
}
52-
if (variables == null) {
53-
variables = new LinkedHashMap<>();
54-
}
55-
executeGraphqlQuery(httpServletResponse, query, variables);
55+
executeGraphqlQuery(httpServletResponse, operationName, query, variables);
5656
}
5757

5858

59+
@SuppressWarnings("unchecked")
5960
@RequestMapping(value = "/graphql", method = RequestMethod.POST, produces = MediaType.APPLICATION_JSON_VALUE)
6061
@CrossOrigin
6162
public void graphql(@RequestBody Map<String, Object> body, HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws IOException {
6263
String query = (String) body.get("query");
6364
if (query == null) {
6465
query = "";
6566
}
67+
String operationName = (String) body.get("operationName");
6668
Map<String, Object> variables = (Map<String, Object>) body.get("variables");
6769
if (variables == null) {
6870
variables = new LinkedHashMap<>();
6971
}
70-
executeGraphqlQuery(httpServletResponse, query, variables);
72+
executeGraphqlQuery(httpServletResponse, operationName, query, variables);
7173
}
7274

73-
private void executeGraphqlQuery(HttpServletResponse httpServletResponse, String query, Map<String, Object> variables) throws IOException {
75+
private void executeGraphqlQuery(HttpServletResponse httpServletResponse, String operationName, String query, Map<String, Object> variables) throws IOException {
7476
//
7577
// the context object is something that means something to down stream code. It is instructions
7678
// from yourself to your other code such as DataFetchers. The engine passes this on unchanged and
@@ -87,6 +89,7 @@ private void executeGraphqlQuery(HttpServletResponse httpServletResponse, String
8789
ExecutionInput executionInput = ExecutionInput.newExecutionInput()
8890
.query(query)
8991
.variables(variables)
92+
.operationName(operationName)
9093
.context(context)
9194
.build();
9295

‎http-example/src/main/resources/static/index.html‎

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

0 commit comments

Comments
 (0)