Getting Started With graphql Rails 7 API

Techie     May 2022

Prerequisites

  1. Ubuntu 18.04
  2. Ruby 3.1.0
  3. Rails 7.0.2.4
  4. MySQL

NB: You’re at liberty to experiment with other versions and databases.


Create the Rails API Project

1 . Create a new Rails 7 API project

$ rails new your_app_name -d mysql --api


2 . Configure session store

Open config/application.rb and add these three lines

module Yourappname
  class Application < Rails::Application
    # ...    
    config.session_store :cookie_store, key: '_your_app_name_session'
    config.middleware.use ActionDispatch::Cookies
    config.middleware.use config.session_store, config.session_options    
  end
end


3 . Create the Database

$ rake db:create


Configure CORS

Configure CORS to allow frontend to make requests

1 . Uncomment the rack-cors gem in the Gemfile

# Gemfile
...
gem 'rack-cors'


2 . Run bundle install

$ bundle install


3 . Uncomment the following code in config/initializers/cors.rb file

# config/initializers/cors.rb

Rails.application.cinfig.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*' # Allow all hosts to make requests to the API
    
    resource '*'
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end


Install Graphql

1 . Add graphql in the Gemfile

# Gemfile
# ...
gem 'graphql'


2 . Add graphiql-rails within the development dependencies in the Gemfile

Graphiql is the graphql UI that enables interaction with the API endpoints via the browser.

# Gemfile

# ...

group :development do
  # ...
  gem 'graphiql-rails'  
end


3 . Add sprockets

An API cannot render any page in the browser. Therefore, to get the GraphiQL editor to work, you must add sprockets to config/application.rb

# config/application.rb

# ...

require "sprockets/railtie"

#module Yourappname
#  class Application < Rails::Application
#    # ...    
#    config.session_store :cookie_store, key: '_your_app_name_session'
#    config.middleware.use ActionDispatch::Cookies
#    config.middleware.use config.session_store, config.session_options    
#  end
#end


4 . Install gems

$ bundle install


5 . Install graphql boilerplate code

$ rails generate graphql:install


6 . Create a config directory in app/assets and create a manifest.js file in it

The manifest.js file specifies additional assets to be compiled and made available to the browser.

The -p and -f flags will instruct the commands to skip creating the directory and the file respectively if they already exist.

$ mkdir -p app/assets/config && test -f manifest.js || touch app/assets/config/manifest.js


7 . Open app/config/manifest.js and add this

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


8 . Mount the GraphiQL engine in the development environment in the routes:

This enables access to the GraphiQL UI in the browser

Rails.application.routes.draw do

  if Rails.env.development?
    mount GraphiQL::Rails::Engine, at: "/graphiql", graphql_path: "graphql#execute"
  end

  post "/graphql", to: "graphql#execute"
  get "/graphql", to: "graphql#execute"  
  # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html

  # Defines the root path route ("/")
  # root "articles#index"
end


9 . Test the GraphQL endpoint via the graphiql ui

Restart your development server, open the browser and navigate to localhost:3000/graphiql You should see something similar to this:

missing image


10 . Test the API

Clear out the default text in the editor’s left pane and type in the following query:

query {
    testField
}

Click the Play button to execute the query, you should receive a response as shown below:

missing image

That’s it! You have successfully set up a graphql Rails 7 API.


Thanks for reading, see you in the next one!