Skip to content
Drupal Decoupled

React Router

This guideline covers the basic integration to set up a React Router project as the decoupled frontend framework for a Drupal CMS that uses GraphQL.

Requirements

Section titled “Requirements”
  • A Drupal set up for Decoupled connection using GraphQL, following the recipe installation guide with the drupal-decoupled-graphql-basic-recipe will give you all the necessary configuration:
    • The GraphQL Compose module installed and configured.
    • The simple OAuth module installed and configured.
    • The Article content type.
    • The Graphql Compose Metatags module installed and configured.
  • Have Node.js installed on your machine. We recommend using the latest LTS version.

Next, we need to set up a React Router app. You can follow the React Router to do so. But in short, you can run the following command to create a new React Router app:

Terminal window
npx create-react-router@latest react-router-drupal

Then, follow the instructions to set up your React Router app.

Install dependencies

Section titled “Install dependencies”

After going through the React Router setup moves to the root of the project:

Terminal window
cd react-router-drupal

And let’s add some dependencies needed to interact with Drupal GraphQL endpoint.

Terminal window
npm install @urql/core graphql drupal-auth-client drupal-decoupled drupal-vite gql.tada
  • @urql/core: A GraphQL client that will handle the connection to the Drupal GraphQL endpoint.
  • graphql: The GraphQL library that will help us to write the queries.
  • drupal-auth-client: A utility that will help us to authenticate with the Drupal GraphQL endpoint.
  • drupal-decoupled : A utility that will help us to connect to interact with the Drupal GraphQL.
  • drupal-vite: Vite plugin for Drupal Decoupled.
  • gql.tada: A library for writing GraphQL queries with TypeScript magic.

Scaffold the React Router app

Section titled “Scaffold the React Router app”

We will scaffold the React Router app using the Drupal Decoupled scaffold package. Run the following command:

Terminal window
npm create @octahedroid/drupal-decoupled@latest -- --frontend react-router

This will add the necessary files to connect to your Drupal Decoupled instance. It includes the following files:

  • react-router.config.ts: The React Router configuration file.
  • drupal-decoupled.config.ts: The Drupal Decoupled configuration file.
  • app/utils/metatags.ts: A utility that handles the metatags for the Drupal content.
  • app/routes/$.tsx: A splat route that handles the rendering of the Drupal content.
  • .env.example: An example of the environment variables needed to connect to the Drupal project.
  • app/app.css: Added base styles for reset some tailwind default styles.
  • app/routes.ts: Updated the routes config to include the $.tsx file.
  • .gitignore: Added the .env file to the gitignore file.