React Router + DatoCMS Overview

React Router is the routing standard of the React ecosystem, and since version 7 it also ships a full-stack framework mode: server rendering, nested routes, data loading, actions and type-safe route modules, all built on top of Vite. It lets you get started without having to write much boilerplate code, and with a set of sane defaults from which you can build upon.

React Router fully supports edge functions and advanced caching mechanisms, and React Router projects can be deployed on many different hostings, such as Netlify, Vercel and Cloudflare Workers. See the deploying guide for the full list of options.

DatoCMS is the perfect companion to React Router since it offers content, images, and videos on a globally-distributed CDN. With this combo, you can have an infinitely scalable website, ready to handle prime-time TV traffic spikes, at a fraction of the regular cost.

Our marketplace features different demo projects you can learn from and get started easily. The following one is built with Remix, but every pattern in it applies to React Router as well:

Fetching content from our GraphQL API

First, use the React Router wizard to set up a new project. Read more about your options on the React Router docs.

npx create-react-router@latest

The way you fetch content from external sources in React Router is by exporting a loader function from your route modules. Whatever the loader returns is handed over to the React component through its loaderData prop:

1
import type { Route } from './+types/home';
2

3
export async function loader() {
4
  return { foo: 'bar' };
5
}
6

7
export default function Homepage({ loaderData }: Route.ComponentProps) {
8
  const { foo } = loaderData;
9

10
  // ...
11
}

Route modules are then wired up in app/routes.ts, which is where you declare the URL each of them responds to:

import { type RouteConfig, index } from '@react-router/dev/routes';

export default [index('routes/home.tsx')] satisfies RouteConfig;

Inside the loader function, we can use any Node.JS GraphQL client (or HTTP client, really) to fetch content from the Content Delivery API of DatoCMS.

Let's start by installing @datocms/cda-client, a lightweight, TypeScript-ready package that offers various helpers around the native Fetch API to perform GraphQL requests towards DatoCMS Content Delivery API:

npm install --save @datocms/cda-client

We can now create a function we can use in all of our components that need to fetch content from DatoCMS: Create a new directory called lib inside app, and inside of it, add a file called datocms.js:

1
import { executeQuery } from '@datocms/cda-client';
2

3
export const load = (query, options) => {
4
  return executeQuery(query, {
5
    ...options,
6
    token: process.env.DATOCMS_READONLY_TOKEN,
7
    environment: process.env.DATOCMS_ENVIRONMENT,
8
  });
9
}

We want to store inside environment variables both the API token and the name of the DatoCMS environment we want to fetch content from to hide them from the code, and so that we'll be able to modify them later without touching the code. React Router runs on Vite, so a .env file at the root of your project is all you need during development. Loaders and actions only ever run on the server, so they can safely read those secrets from process.env.

To create an API token for a DatoCMS project, go to Settings > API Tokens section of your DatoCMS backend. Make sure to only give it permissions to access the (read-only) Content Delivery API.

It's time to use our function in a real page! Open up app/routes/home.tsx, which is the route that renders the homepage, and define the loader function and a basic page component:

1
import type { Route } from './+types/home';
2
import { load } from '~/lib/datocms';
3

4
const HOMEPAGE_QUERY = `query HomePage($limit: IntType) {
5
  posts: allBlogPosts(first: $limit) {
6
    title
7
  }
8
}`;
9

10
export async function loader() {
11
  return load(HOMEPAGE_QUERY, {
12
    variables: { limit: 10 },
13
  });
14
}
15

16
export default function Home({ loaderData }: Route.ComponentProps) {
17
  const { posts } = loaderData;
18

19
  return <div>{JSON.stringify(posts, null, 2)}</div>;
20
}

The HOMEPAGE_QUERY is the GraphQL query, and of course it depends on the models available in your specific DatoCMS project. You can learn everything you need regarding how to build GraphQL queries on our Content Delivery API documentation.

For more information on what to do next, we recommend reading the next sections of this integration guide!