Setting up GraphiQL in a Rails Application

A cool thing that GraphQL’s Introspection brings us is the ability to make awesome tools around your schema. One of them is GraphiQL (Graphical). GraphiQL enables you to test queries against you schema without the need of using curl or other tools. It has autocomplete which is really awesome, and a lot of other nice features.


With Gem

You can use the GraphiQl-Rails gem to easily mount the Graphiql endpoint in your Rails app. The steps are clearly outlined in ReadMe.


To use GraphiQL we’ll need 4 different js files in our assets. Lets just add them in app/assets/javascripts but you could place them wherever you want.


You can get the graphiql source right here. I personally used their script. Clone the repo and run this script. You should then have a GraphQL.js and a GraphQL.css in the root folder. Copy the js file into your javascripts and the css file in your stylesheets.

Note: I personally had to add this css rule for graphiql to render correctly {% highlight css %} html, body { height: 100%; }


#### fetch.js

Graphiql needs some kind of library to call your GraphQL server. They recommend [fetch][fetch]. To get the `fetch.js` file, head to [Github's fetch polyfill repo][github] and download the `fetch.js` file. Place it in your assets too!

#### React and React-Dom

GraphiQL uses react components to render, so we'll need that too. Clone [React][react], and run `npm install`. If you haven't already, install `grunt` and `grunt-cli` globally using `npm`. Then, run `grunt build`.

You should now have a build folder containing, both `react.js` and `react-dom.js`. Add both of them to your assets!

Ok, now let's include all those assets in our `application.css` and `application.js` files.

#### application.css
{% highlight css %}
 = require ./graphiql


{% highlight js %} //= require ./react //= require ./react-dom //= require ./fetch //= require ./graphiql

We have finally all we need to start using graphiql. The first step is to create a controller that will render GraphiQL.

# app/controllers/graphiql_controller.rb
class GraphiqlController < ApplicationController
  def show

As you can see the controller does nothing special, our work will be mainly in the view, in app/views/graphiql/show.html.erb:

{% highlight html %}

We render the `GraphiQL` React component, and pass it our fetcher, which will post to our `queries_controller`. (Replace this by wherever you execute GraphQL queries in your App.)

Finally, lets add a route so we can access GraphiQL. In `routes.rb` add this line:

  get 'graphiql', to: 'graphiql#show'

Now head to /graphiql and you should see the GraphiQL interface! Time to test your queries :)

screenshot 2016-02-20 14 06 19

You can see an example of this setup at my Simple Blogging App repo.

You can find me on Twitter @__xuorig__ or Github

Go back to Recent Posts ✍️


Relay's new applyUpdate function

I recently contributed to Relay and helped implementing a new function on the Relay Store, applyUpdate. It was recently merged into master and the standard update method was deprecated in v0.6....