GraphiQL-Rails

Mount the GraphiQL IDE in Ruby on Rails.

Installation

Add to your Gemfile:

bundle add graphiql-rails

Additionally, you'll need Sprockets or Propshaft to serve the JS and CSS assets.

Usage

Mount the Engine

Add the engine to routes.rb:

# config/routes.rb
Rails.application.routes.draw do
  # ...
  if Rails.env.development?
    mount GraphiQL::Rails::Engine, at: "/graphiql", graphql_path: "/your/endpoint"
  end
end

• at: is the path where GraphiQL will be served. You can access GraphiQL by visiting that path in your app.
• graphql_path: is the path to the GraphQL endpoint. GraphiQL will send queries to this path.

Sprockets or Propshaft

You'll need Sprockets or Propshaft to deliver the JS and CSS for GraphiQL. If you don't already have one of those, you can add them with:

$ bundle add sprockets-rails
# or
$ bundle add propshaft

API Mode

If you're using Rails 6+ in "API mode", you'll also need to do the following:

1. Add require "sprockets/railtie" to your application.rb.

2. Create an app/assets/config/manifest.js file and add the following:

//= link graphiql/rails/application.css
//= link graphiql/rails/application.js

Configuration

You can override GraphiQL::Rails.config values in an initializer (eg, config/initializers/graphiql.rb). The configs are:

• query_params (boolean, default false): if true, the GraphQL query string will be persisted the page's query params

• initial_query (string, default nil): if provided, it will be rendered in the query pane for a visitor's first visit

• title (string, default nil): if provided, it will be rendered in the page <title> tag

• logo (string, default nil): if provided, it will be the text logo

• csrf (boolean, default true): include X-CSRF-Token in GraphiQL's HTTP requests

• header_editor_enabled (boolean, default false): if provided, the header editor will be rendered

• headers (hash, String => Proc): procs to fetch header values for GraphiQL's HTTP requests, in the form (view_context) -> { ... }. For example:

  GraphiQL::Rails.config.headers['Authorization'] = -> (context) { "bearer #{context.cookies['_graphql_token']}" }

• input_value_deprecation (boolean, default false): if provided, the deprecated arguments will be rendered

Development

• Tests: rake test
• Update GraphiQL & dependencies: rake update_graphiql