DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Mario
Mario

Posted on

How to use GraphiQL in Rails

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 (0)

πŸ‘‹ Hey, my name is Noah and I’m the one who set up this ad. My job is to get you to join DEV, so if you fancy doing me a favor, I’d love for you to create an account.

If you found DEV from searching around, here are a couple of our most popular articles on DEV: