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

  • 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

After going through the Remix 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 graphql drupal-auth-client drupal-decoupled
  • urql: 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

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:

  • app/utils/client.server.ts: A utility that handles the connection to the Drupal GraphQL.
  • app/utils/auth.server.ts: A utility that handles the authentication to the Drupal GraphQL endpoint.
  • app/utils/routes.ts: A utility that formats the path to the Drupal content to add preview tokens.
  • 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.
  • .env: Also will copy the .env.example file to .env file.

And will update the following files:

  • 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.

The front end app is now ready to connect to your Drupal CMS. To do so, follow the connect guide.