Headless CMS for Ruby on Rails

Hygraph is the ideal Headless CMS for Rails websites and applications. Read further to learn how our API-first CMS allows you to add components to your Ruby on Rails apps in minutes and enable your website's content to be managed from a powerful CMS.

Step #1 - Construct your query and fetch the data from Hygraph

To use data from Hygraph within your Ruby project you would need to fetch it via GraphQL API. For this purpose you can use graphql-client library. In order to do that, you would have to add graphql-client to your Gemfile and then run bundle install to install the gem.

# config/initializers/graphql.rb

require 'graphql/client'
require 'graphql/client/http'

# Configure GraphQL endpoint using the `HTTP` adapter.
HTTP = GraphQL::Client::HTTP.new("https://api-<region>.hygraph.com/v2/<some hash>/master") do
  def headers(context)
    # Optionally set any HTTP headers
    { "Authorization": "Bearer #{ENV['GRAPHQL_API_TOKEN']}" }
  end
end

# Fetch the schema as a string from the internet and initialize the client
Schema = GraphQL::Client.load_schema(HTTP)

# Create the GraphQL client
Client = GraphQL::Client.new(schema: Schema, execute: HTTP)

Step #2 - Create a Ruby model to encapsulate your GraphQL queries

The ContentFetcher module in Ruby on Rails serves as a wrapper for GraphQL queries. It defines a constant with the GraphQL query for fetching product details like name, description, image, availability, and slug.

The fetch_product method within this module takes a product ID, executes the pre-defined query using this ID, and returns the product's data. This encapsulation of the GraphQL interaction allows for a clean separation of concerns in the Rails application, making the code more maintainable and testable.

app/graphql/content_fetcher.rb

module ContentFetcher
  # Prepare the GraphQL query
  ProductQuery = Client.parse <<-'GRAPHQL'
    query($id: ID!) {
      product(id: $id) {
        name
        description
        image
        availability
        slug
      }
    }
  GRAPHQL

  def self.fetch_product(id)
    response = Client.query(ProductQuery, variables: { id: id })
    response.data.product if response.data
  end
end

Step #3 - Call the module in the Ruby controller

Once the data is fetched, the controller can assign it to an instance variable, making it accessible to the corresponding view file. This approach keeps the controller's code succinct and focused on its role as an intermediary between the model (or data-fetching module) and the view.

app/controllers/products_controller.rb

class ProductsController < ApplicationController
  def show
    @product = ContentFetcher.fetch_product(params[:id])
  end
end

Step #4 - Use the data in your ERB template

In the ERB template, Ruby code is embedded within HTML to render the content attributes, such as name, description, and image. This method allows for a separation of concerns, keeping the content management flexible and independent from the presentation layer, and makes updating the website’s content an effortless task for content managers, without the need for developer intervention.

app/views/products/show.html.erb

<% if @product.present? %>
  <h1><%= @product.name %></h1>
  <p><%= @product.description %></p>
  <img src="<%= @product.image %>" alt="<%= @product.name %>" />
  <p><%= @product.availability ? 'Available' : 'Not Available' %></p>
  <a href="/products/<%= @product.slug %>">View Product</a>
<% else %>
  <p>Product not found.</p>
<% end %>

Start building with Ruby on Rails

We made it really easy to set up your project in Hygraph and use our GraphQL API within your Ruby on Rails project.

Quickstart

Check out our docs to see how you can quickly set up your Hygraph project and enable the content API for your Ruby on Rails website or app.

Get Started

Learn GraphQL

Hygraph is GraphQL-native Headless CMS offers precise data retrieval, minimizing over-fetching and optimizing efficiency.

Read the Guide

Examples

Look at some of the example projects to see Hygraph in action.

See Examples

Why Hygraph

Choosing Hygraph for your Rails project

A GraphQL-native headless CMS with Ruby on Rails streamlines development by allowing precise and efficient data queries. This pairing benefits developers by reducing data over-fetching and under-fetching, which optimizes app performance. The separation of front-end and content management layers also allows developers to focus on user interface design and functionality, independent of content structure concerns.

This way, real-time content management becomes straightforward, with updates pushed directly to the Rails application through GraphQL.

Developer Experience

We try to be the most un-opinionated CMS on the market with a wide collection of open source example projects to get you started.

Headless CMS

As a headless CMS (i.e. API based content management), you can be as modular and flexible as you need. We even support multiplatform content management.

Management API

Hygraph boasts a flexible and powerful management API to manage your content and schema, as well as a blazing fast content API.

Get started for free, or request a demo to discuss larger projects

Contact sales Get started