Install Drupal 8 (https://www.drupal.org/docs/installing-drupal). Which we will use as backend.

• Create nodes for article or page content type.
• Install JSON: API module which provides an endpoint for these two content type automatically.
• To verify access visit this URL HOST+ /jsonapi/node/article. It will return article in json format.

Now we will create frontend using Gatsby

• Install Node.js according to your operating system from here https://nodejs.org/en/download/ and install it. After installing it run this command. npm –v To make sure Node.js installed successfully or not.
• Install the Gatsby CLI
  npm install -g gatsby-cli The above command installs Gatsby CLI globally on your machine. After running the above command you will able the Gatsby on command line. Run the command gatsby –v command. To make sure Gatsby CLI installed successfully or not.
• Create a new site
  gatsby new gatsby-drupal-frontend Run this command to create Gatsby blank site
• Change directories into site folder
  cd gatsby-drupal-frontend
• Start development server
  gatsby develop
  If all will good then you will see Gatsby default starter page
   

  

• Now install gatsby-source-drupal plugin to use drupal data in gatsby.
  npm install --save gatsby-source-drupal
  Run this command to install this plugin in Gatsby

   

  
• Now open Gatsby-config.js which will exist in Gatsby root folder and add this piece of JSON code in plugin option.

   

  { resolve: `gatsby-source-drupal`, options: { baseUrl: `http://gatsby-drupal-backend.lndo.site/`, }, }

   

  

  Update your baseUrl with your own website URL.

• Now run Gatsby develop. Now you will see message in console that it’s fetching data from drupal end.

  

• Now the data has been import into Drupal. You can check the data by visiting URL http://localhost:8000/___graphql . Now data from our Drupal site is available to our Gatsby front end. Now you can get data of drupal using graphql. Step to get data of article content type
  • Click on allNodeArticle

    

  • Select option whatever you want to get

    

    I have selected body, title and image So my query will be

    

    To get the code for Gatsby you can click on code exporter and it will get relevant code which will use in Gatsby.

• Now we have a query so we will create a list of articles on the home page.
   
• Open index.js file and import graphql and useStaticQuery
  
  
• 
  And replace IndexPage function with following code
  
  
• 
  Now visit http://localhost:8000/ and you will see something like this page
   
•