GET, POST & PATCH requests of node entities with Drupal8 using REST APIs and integrate with ReactJS

 

Introduction
REST is one of the most popular ways of making Web Services work. REST utilizes HTTP methods, such as GET, POST, and DELETE. In this tutorial we are going to see how we can use the REST API to make the Headless Drupal and use it as a third party integration.

Getting started

Install the latest release of Drupal8 core. See the Releases for Drupal Core to find the latest download.
Enable the following modules: REST, Serialization, HAL, and HTTP Basic Authentication.

restui

By default, the REST module enables the node entity resource for all GET, POST, PATCH, and DELETE operations. You can see these default settings in sites/default/files/config_XXXX/active/rest.settings.yml. To enable REST on other entities (e.g. users, files, or fields), you'll need to edit this file. To enable those entities use https://www.drupal.org/project/restui module. This module provides a user interface for enabling and disabling resources, serialization formats, and authentication providers.

RestResource

Using the REST API
We're all set to use the REST APIs. Now we'll see how we can create, delete and update a node with REST services with Drupal 8 one by one.
You may use Advance REST Client or Postman - REST client or DHC to test you web services.

1. GET Method

 Using GET Method we can retrieve the node data. Simply using the the method as
  GET:
    http://example.com/node/123?_format=json
 
  Headers:
    Content-type: application/json
    Accept: application/json
    
 Please check the below attached image for more info

arc

 

2. POST/PATCH Method

 Using POST/PATCH method we can send the data to create/update the node entity.

 POST:
  http://example.com/node?_format=json

 PATCH:
  http://example.com/node/123?_format=json

 Headers:
  Content-type: application/json
  Accept: application/json
  Authorization: basicauth

 Body:
  {
   "_links" : {
     “type” : {
       "href" : "http://example.com/node"
     }
   },
   "title" : {
      "value" : "My first page"
    },
    "Body" : {
      "value" : "Hello World!!"
    }
  }

Using GET/POST/PATCH method to integrate with ReactJS

1. Setup react application

  To Implement node entity methods in ReactJS, you need to setup first the react Application
  Below is the link to create basic react application.
  https://www.osseed.com/blog/reactjs-create-simple-react-app

2. Create React components i.e basic page to implement or test the node entities in React using APIs

  Below we'll create the demo page and see how to use those method in react one by one.

  GET Method
 

 

  POST/PATCH Method