Decoupled Starter Kit for React¶
About the Starter Kit¶
The Decoupled Starter Kit for React was created Steve Worley and Jason Enter from the Acquia Professional Services team. The intent of the application(s) is to explore different architectural scenarios when building Decoupled Drupal applications, while using the development to explore options around best practices with these patterned workflows. The components are broken out by functionality and the content subjects are targeted according to the purpose.
Ready to get started?¶
Each of the applications can be set up independently of each other, but are reliant on data shared between each other. So we suggest setting up the applications in the following order to get the full benefits of the complete workflow.
Decoupled scenarios covered in the architecture¶
Perform Drupal CRUD Operations with React applications
The application demonstrates workflows when interacting directly with JSON API endpoints served from a Headless Lightning Drupal instance. The functional tasks are broken out by traditional CRUD (Create, Read, Update, Delete) operations. This application seeks to understand workflows around interacting with API content.
Orchestrate Drupal JSON API Data with GraphQL
This architecture offers functionality when interacting with GraphQL as an proxy application in which JSON API data originates from Drupal. The code utilizes a Pokemon content type which is served by Drupal via GraphQL. The code and documentation walks the developer through the experience of abstracting and structuring data in GraphQL, and subsequent queries in React.
Synthesize Multiple API Sources in GraphQL for React
This functionality offers workflows when interacting with GraphQL as an orchestration application in which API data is abstracted from several sources. The architecture combines and structures: Drupal JSON API from Drupal, Marvel API web service, and a comic book sales RESTful service.
Implement API-first Architectures Best Practices
The application tackles the challenges of building an API-first architecture. Multiple methods are implemented to address API failover for unavailable web services or inconsistent connections such as the implementation and utilization of mock APIs within the standard development tasks. These techniques are displayed using existing API data from Drupal. Many examples are included with storing and leveraging API data within React, in addition to storing API data back into Drupal.
The React portion of this project was built using the excellent toolset provided in the React Slingshot by Cory House. We have included the primary readme documentation here. Be sure to also review the React Slingshot FAQs, as well as contributors and contributing.