Remix > Remix + DatoCMS Overview

Remix is an exceptional tool for building modern frontend applications with the power of React. 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.

Remix fully supports edge functions and advanced caching mechanisms, and Remix projects can be deployed on many different hostings, such as Netlify, Vercel and Cloudflare Pages.

DatoCMS is the perfect companion to Remix 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 on Remix, so you can learn and get started easily:

Remix Blog

Try this demo »

Fetching content from our GraphQL API

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

npx create-remix@latest

The way you fetch content from external sources in Remix is by exporting a loader function from your route files. Inside the React component you can then retrieve that data with a special hook called useLoaderData:

1
import { useLoaderData } from 'remix';
2

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

7
export default Homepage(props) {
8
  const { foo } = useLoaderData();
9

10
  // ...
11
}

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, 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. Read this tutorial to know more on how to set server environment variables in Remix.

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/index.jsx — which is the route that renders the homepage — and define the loader function and a basic page component:

1
import { useLoaderData } from "remix";
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() {
17
  const { posts } = useLoaderData();
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!