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

    import React, { Component } from 'react';
    import logo from './logo.svg';
    import './App.css';

    class App extends Component {
      constructor(props) {
        super(props);
        // Max Date global variable.
        global.MaxDateVar = new Date().toISOString().split('T')[0];

        this.state = {
          nodeData: [],
          isLoading: true,
        }
      }
      
      componentDidMount() {
        fetch(API + DEFAULT_QUERY)
          .then(response => {
            if (response.ok) {
              return response.json();
            } else {
              throw new Error('Something went wrong ...');
            }
          })
          .then(data => this.setState({ nodeData: res.nodeData, isLoading: false }))
      }

      render() {
        const { nodeData, isLoading, error } = this.state;
        if (error) {
          return <p>{error.message}</p>;
        }
        if (isLoading) {
          return <p>Loading ...</p>;
        }
        return (
          <div className="App">
            {nodeData.map(nodeData =>
              <p key={nodeData.nid}>
                <span>{nodeData.title}</a>
              </p>
              <div key={nodeData.nid}>
                {nodeData.body}
              </div>
            )}
          </div>
        );
      }
    }

    export default App;

POST/PATCH Method

import React, {Component} from 'react';
import {
  ControlGroup,
  Button
} from "@blueprintjs/core";

import { Form } from "react-bootstrap";
import {PostData} from '../../services/PostData';

class Node extends Component {

  constructor(props){
    super(props);

    this.state = {
     title: '',
     body: '',
     redirectToReferrer: false,
     errors: []
    };

    this.node = this.node.bind(this);
    this.onChange = this.onChange.bind(this);
  }

  node() {
    let data = {
      type: "page",
      title: this.state.title,
      body: this.state.body,
    };
    PostData('node', nodeData)
    .then(response => {
      alert("Node Created....");
    })
    .catch(err => {
      return err
    })
  }

  handleSubmit = event => {
    event.preventDefault();
  }

  onChange(e){
    this.setState({[e.target.name]:e.target.value});
  }

  render() {

    return (
      <div className="node-data">
        <div className="demo-form app-small-form">
          <Form onSubmit={this.handleSubmit} className="login-form-wrapper">
            <ControlGroup fill={true} vertical={true}>
              <label className="pt-label right">
                Title *
                <div className="pt-input-group">
                  <input
                    name={ "username" }
                    type={ "text" }
                    required
                    className={ "form-control pt-input" }
                    onChange= {this.onChange}
                  />
                </div>
              </label>
              <label className="pt-label left">
                Body *
                <div className="pt-input-group">
                  <input
                    name={ "body" }
                    type={ "text" }
                    required
                    className={ "form-control pt-input" }
                    onChange= {this.onChange}
                  />
                </div>
              </label>
              <div className="node-button">
                <Button className="node-submit" type="submit" intent="primary" large="true" text="node" onClick={this.node}/>
              </div>
            </ControlGroup>
          </Form>
        </div>
      </div>
    );
  }
}

export default Node;

// Node Data
export function PostData(type, nodeData) {
  let BaseURL = API + DEFAULT_QUERY + '?_format=json';
  return new Promise((resolve, reject) => {
    fetch(BaseURL, {
        method: 'POST',
        dataType: 'json',
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json'
        },
        body: JSON.stringify({
          "type":  nodeData.type,
          "title" : {
            "value" : nodeData.title
          },
          "Body" : {
            "value" : nodeData.body
          }
        })
      })
      .then((response) => response.json())
      .then((res) => {
          resolve(res);
      })
      .catch((error) => {
        reject(error);
      });
  });
}