My Thoughts on Decoupled Drupal with GatsbyJS |Part 1

The past decade saw an outburst of smart devices and widely opened different channels of interaction. The front end technologies grew by leaps and bounds. GatsbyJs is a popular open-source static site generator, bundled with React, GraphQL, Webpack, to create blazingly fast websites. Let’s see how we can combine it with a popular CMS, Drupal 8.

Monolithic vs Decoupled
The typical CMS has the backend and the frontend coupled, which is monolithic. This system helped to manage and deliver the content to a huge user base. But that was years ago. The coupled system is now a hindrance as the business has to serve the varied devices and channels, adopt new front end frameworks that could give high performing websites.
Drupal has proved itself to be versatile CMS with its powerful content types and WYSIWYG editor. In the decoupled systems the presentation layer is being handled by the Javascript layer, in our case GatsbyJS. Drupal 8 serves as the content modeling, creation, and management backend with data being served in the form of API.
JAMStack systems leverage the capacity of big players Javascript, APIs, and Markups. JAMstack site with Drupal serving as a backend or headless CMS is the core of decoupled architecture.
GatsbyJS serves in the front end with the powerful GraphQL to fetch data from the Drupal backend. GatsbyJS internally uses a React code base that makes it easy for the front end developers.
A decoupled Drupal architecture offers two key advantages over a tightly coupled one.

• You can use one content management system to serve multiple frontends — for example, your Gatsby site, your mobile application, and your smart TV application.
• You can develop, change, and upgrade the frontend and backend independently of each other. Upgrading Drupal doesn’t require you to modify your site’s appearance. More on decoupled architecture with Gatsby in here

Let’s dive in with a short hands on
I have set up Drupal in my system using the Acquia dev desktop 2
I have created a basic page and some articles. Make sure you have JSON: APImodule enabled. This serves the JSON APIs required for the front end.


Sample articles and pages created

To check the JSON: API is enabled and the JSON responses are serving properly test the APIs with any clients such as postman or any other rest clients. Hit the URL http://localhost:<port>/jsonapi/node/article and you will the response JSON as below


Rest client check

Gatsby Setup
Install the Gatsby CLI globally using npm install -g gatsby-cli.
Create a new Gatsby site using gatsby new gatsby-site.

Move to the site folder which in our case is gatsby-site. Then go for gatsby develop. You will see the site running locally at http://localhost:8000
The initial setup of the gatsby is done. As I mentioned before, we are going to use GraphQL for fetching data instead of a typical https request. It helps to fetch multiple resources in a single fetch, unlike https requests. GraphQL is available with the Gatsby package, so you don’t have to look out further GraphQL installation. Moreover, Gatsby provides us with a playground to try out our GraphQL queries at http://localhost:8000/__graphql. To connect our Drupal site with our gatsby site, open the gatsby-config.js in the root folder. Change the base URL as below

{
      resolve: `gatsby-source-drupal`,
      options: {
           baseUrl: `http://localhost:<port of drupal site>/`,
      },
}

Let’s show the articles in our first page.
Import GraphQL and UseStaticQuery from gatsby import { useStaticQuery, graphql } from “gatsby” .
The GraphQL playground looks like below. You can parse the response JSON and bind it to HTML. Sounds simple. No actually. It took some time to correctly query the required fields for all the articles with the corresponding image. You might need some experience in getting query right as the complexity of the components increases.

GraphQL query

When you have the data available, you can easily bind it to your react components and show the data in the site.

Now let’s get going with the page we created in Drupal.

Below you will find the query to fetch the content of the page.

{
  allNodePage(filter: {title: {eq: "About US"}}) {
    totalCount
    nodes {
      body {
        value
      }
      relationships {
        field_text_with_image {
          field_text_long {
            value
          }
          relationships {
            field_image {
              localFile {
                url
              }
            }
          }
        }
      }
      title
    }
  }
}

Like before, bind the corresponding data to our react code to display the data in the about us page. An experienced person can refine the above queries further to get the data required. The main highlight of using the GraphQL instead of rest API is that you can fetch multiple resources using a single query, which in case of rest API you may have to make 2 or 3 GET requests.

Please do let me know if the article helped you. Happy coding.
Cheers !!