-
Notifications
You must be signed in to change notification settings - Fork 1
Setting up Graphiql IDE
Antti Koskinen edited this page Oct 29, 2017
·
1 revision
Graphiql is an interactive tool for exploring your API. It's fairly easy to get up and running using webjars and ring middlewares.
Add graphiql webjar to your project.clj:
[ring-webjars "0.2.0"]
[org.webjars/graphiql "0.11.3"]
Set up ring middlewares in your handler:
(ns hello-world.handler
(:require [compojure.core :refer :all]
[compojure.route :as route]
[hello-world :as hello]
[ring.middleware.json :refer [wrap-json-response wrap-json-body]]
[ring.middleware.resource :refer [wrap-resource]]
[ring.middleware.webjars :refer [wrap-webjars]]
[ring.util.response :refer [response]]))
(defroutes app-routes
(POST "/graphql" req
(response (hello/graphql (:body req))))
(route/not-found "Not Found"))·
(def app
(-> app-routes
(wrap-webjars)
(wrap-resource "public")
(wrap-json-response)
(wrap-json-body {:keywords? true :bigdecimals? true})))Finally, create a static html file resources/public/graphiql/index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
height: 100%;
margin: 0;
width: 100%;
overflow: hidden;
}
#graphiql {
height: 100vh;
}
</style>
<link rel="stylesheet" href="/assets/graphiql/graphiql.css">
<script src="//cdn.jsdelivr.net/es6-promise/4.0.5/es6-promise.auto.min.js"></script>
<script src="//cdn.jsdelivr.net/fetch/0.9.0/fetch.min.js"></script>
<script src="//cdn.jsdelivr.net/react/15.4.2/react.min.js"></script>
<script src="//cdn.jsdelivr.net/react/15.4.2/react-dom.min.js"></script>
<script src="/assets/graphiql/graphiql.js"></script>
</head>
<body>
<div id="graphiql">Loading...</div>
<script>
function graphQLFetcher(graphQLParams) {
// This example expects a GraphQL server at the path /graphql.
// Change this to point wherever you host your GraphQL server.
return fetch('http://localhost:3000/graphql', {
method: 'post',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify(graphQLParams),
credentials: 'include',
}).then(function (response) {
return response.text();
}).then(function (responseBody) {
try {
return JSON.parse(responseBody);
} catch (error) {
return responseBody;
}
});
}
// Render <GraphiQL /> into the body.
// See the GraphiQL project page for more info on different options.
ReactDOM.render(
React.createElement(GraphiQL, {
fetcher: graphQLFetcher
}),
document.getElementById('graphiql')
);
</script>
</body>
</html>Now you can point your browser to http://localhost:3000/graphiql/ and try it out.