DEV Community

Mario
Mario

Posted on

How to use GraphiQL in Rails

#rails #graphql #graphiql

I recently wanted to use graphiql-rails gem to play around with a GraphQL endpoint that I was running in a Rails project.

For some reasons, I was not able to set it up properly since the gem doesn't seem to be working without Rails Asset Pipeline... or may be I was just too lazy to look it up how to make it work.

So I came up with a workaround:

If exists, remove graphiql-rails from Gemfile, then run bundle.

If exist, remove these lines from ./config/routes.rb.

if Rails.env.development? mount GraphiQL::Rails::Engine, at: "/graphiql", graphql_path: "/your/endpoint" end
Enter fullscreen mode Exit fullscreen mode

These things may have been auto-generated if you followed the installation instructions from the graphql gem.

Add to ./config/routes.rb

get '/graphiql', to: 'graphiql#index' if Rails.env.development?
Enter fullscreen mode Exit fullscreen mode

This adds a new route /graphiql and maps it to the index action of controller GraphiqlController, which we are going to define next...

Create ./app/controllers/graphiql_controller.rb with this content:

class GraphiqlController < ApplicationController layout false def index; end end
Enter fullscreen mode Exit fullscreen mode

We can leave the index method empty, and continue with the view...

Create ./app/views/graphiql/index.html.erb with this content:

<html> <head> <title>Simple GraphiQL</title> <link href="https://unpkg.com/graphiql/graphiql.min.css" rel="stylesheet" /> <%= csrf_meta_tags %> </head> <body style="margin: 0;"> <div id="graphiql" style="height: 100vh;"></div> <script crossorigin src="https://unpkg.com/react/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script> <script crossorigin src="https://unpkg.com/graphiql/graphiql.min.js"></script> <script> const graphqlEndpointUrl = "<%= graphql_url %>"; const graphQLFetcher = graphQLParams => fetch(graphqlEndpointUrl, { method: 'post', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': document.querySelector(`meta[name="csrf-token"]`).content }, body: JSON.stringify(graphQLParams), }) .then(response => response.json()) .catch(() => response.text()); ReactDOM.render( React.createElement(GraphiQL, { fetcher: graphQLFetcher }), document.getElementById('graphiql'), ); </script> </body> </html>
Enter fullscreen mode Exit fullscreen mode

That content originally comes from the official GraphiQL README Page.

It loads the GraphiQL source from a CDN, so you need to be connected to the internet in order to use it.

However, the file has been enriched in 3 locations in order to work with Rails:

  1. <%= csrf_meta_tags %> : This writes the CSRF token as a <meta>-tag, which we are going to use in the AJAX request below.
  2. const graphqlEndpointUrl = "<%= graphql_url %>"; : If your Rails application runs the GraphQL endpoint, its URL will automatically be defined here.
  3. 'X-CSRF-Token': document.querySelector(`meta[name="csrf-token"]`).content : This reads the CSRF token from the <meta>-tag and sends it together with the GraphQL query to the Rails server. If this is missing, Rails will refuse the request with the error ActionController::InvalidAuthenticityToken.

Finally, start the rails server bin/rails s and go to http://localhost:3000/graphiql:

Alt Text

Top comments (1)

Collapse
 
prajwal18 profile image
Prajwal Gautam •

Anyone stuck do the following:
1) Add gem 'sprockets-rails' to your Gemfile,

if you don't have it already (sporckets-rails is an asset management pipeline for rails, it provides the css and js file for the GraphiQL engine to render.)

2) create a file @ /app/assets/config/maifest.js and add the following lines
//= link graphiql/rails/application.css
//= link graphiql/rails/application.js

3) That's it,
(Mount the engine in your routes if it isn't there already.)

Follow the official solution published by graphiql-rails,
github.com/rmosolgo/graphiql-rails