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 remix-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 remix-drupal

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

Terminal window
npm install urql graphql drupal-auth-client
  • 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.