Building a Decoupled Site with Drupal 8 and Gatsby Part 1

Submitted by galactus on Sun, 04/26/2020 - 02:54

Drupal + Gatsby

In this blog post, I'm going to discuss how to configure JSON API in Drupal 8 and exposing node to JSON format.

We are going to create a gallery of heroes of Mobile Legends (mobile multiplayer online battle arena) and exposed it to JSON format.

Alright, Let's get started!

  1. Create a custom content type "Hero".

    hero
     
  2. Create a vocabulary class and add a new term.

    taxonomy
     
  3. Add image, class field.

    image-class
     
  4. Enable JSON:API and JSON API Extras module.JSON module
    The JSON:API module provides zero-configuration out of the box.  Use JSON:API Extras to customize your API. JSON:API Extras provides a means to override and provide limited configurations to the default zero-configuration implementation provided by the JSON:API module.
  5. Configure JSON:API Extras. Edit "Hero" resource and disable the fields that we don't need.

    JSON API Extras configuration

  6. Only keep these fields.

    Title
    Path
    Body
    Field class
    Field image

  7. Create a "Hero".

    Create Hero
  8. Visit the resource path /jsonapi/hero

    API

 

In the second part of this blog post, I'm going to discuss how to display the data from Drupal 8 to Gatsby so stay-tuned.

Resources: 

https://m.mobilelegends.com/en/

https://en.wikipedia.org/wiki/Mobile_Legends:_Bang_Bang

Tags
Drupal