How to Add the GraphiQL Editor to Ruby on Rails
There are several development tools for querying a GraphQL endpoint, such as Postman, curl and others. One of the most interesting options is GraphiQL. This JavaScript library provides a text editor that can run queries against our GraphQL endpoint, display results as formatted text, show the documentation and offer other very handy extras.
This guide shows you how to add GraphiQL to a Ruby on Rails application. We’ll also use Devise to keep unauthorized users out of the editor.
There are several development tools for querying a GraphQL endpoint, such as Postman, curl and others. One of the most interesting options is GraphiQL. This JavaScript library provides a text editor that can run queries against our GraphQL endpoint, display results as formatted text, show the documentation and offer other very handy extras.
This guide shows you how to add GraphiQL to a Ruby on Rails application. We’ll also use Devise to keep unauthorized users out of the editor.
Requirements
To add our editor, we need the “webpacker” (with React), “graphql” and “devise” libraries installed and configured. If you’re just getting started, this article may help. We also need to make sure the “/graphql” endpoint works properly.
# Gemfile ... gem "devise" gem "graphql" gem "webpacker" ...
Let’s go! 🚀
Let’s add “graphiql”, “graphql” and “isomorphic-fetch” to our JS dependencies.
# package.json
{
...
"dependencies": {
...
"graphiql": "^1.0.3",
"graphql": "^15.3.0",
"isomorphic-fetch": "^2.2.1",
...
}
...
}As with any Ruby on Rails application, we need to define a route, add a controller and add a view.
Let’s create a new route:
# config/routes.rb ... get "/graphiql", to: "graphiql#index ...
Let’s create a new controller with just the index action:
# app/controllers/admin/graphiql_controller.rb class Admin::GraphiqlController < Admin::ResourceController layout false def index end end
The “layout false” statement makes it explicit that we don’t want to inherit any previously configured layout (whether Admin or the default one).
Let’s create the index view:
# app/views/admin/graphiql/index.html.slim
doctype html
html
head
= javascript_pack_tag "graphiql-editor"
= stylesheet_pack_tag "graphiql-editor"
body
#graphiql-editorThis tells the system to load the JS pack and the stylesheet named “graphiql-editor”. If you don’t like this name, remember to also rename the file in the “app/javascript/packs” folder.
Let’s add the React component:
# app/javascript/packs/graphiql-editor.jsx
import React from 'react'
import ReactDOM from 'react-dom'
import GraphiQL from 'graphiql'
import fetch from 'isomorphic-fetch'
const graphQLFetcher = async gqlParams => {
const data = await fetch(
`${window.location.origin}/graphql`,
{
method: 'post',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(gqlParams),
}
)
return data.json().catch(() => data.text())
}
document.addEventListener('DOMContentLoaded', () => {
ReactDOM.render(
<GraphiQL fetcher={graphQLFetcher} />,
document.getElementById('graphiql-editor')
)
})Let’s add the styles:
# app/javascript/packs/graphiql-editor.sass @import '~graphiql/graphiql' body margin: 0 padding: 0 #graphiql-editor height: 100vh
Let’s change our route as follows:
authenticate :admin do namespace :admin do get "/graphiql", to: "graphiql#index" end end
Conclusions
With this tool, during development we have all the information about every endpoint plus autocomplete at our fingertips. This lets us quickly query or modify our data without knowing its structure in advance.
