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.

Installation

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.

Manually

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.

Graphiql.js

You can get the graphiql source right here. I personally used their build.sh 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%; }


Next!

#### 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
 */

application.js

{% 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.

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

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:

```ruby
  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 ✍️


READ THIS NEXT:

Uploading files using Relay and a Rails GraphQL server

I recently needed to upload a file from a React-Relay App to my GraphQL Rails server and found out it was not as straight forward as I thought and not very documented. Thought I’d share what I have...