Remix Blog
Words are nice... but code speaks louder. Dive into a fully commented project template, showcasing these techniques (and more) in action.
Sorry, no results found for "".
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:
First, use the Remix wizard to set up a new project. Read more about your options on the Remix docs.
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
:
1import { useLoaderData } from 'remix';2
3export async function loader() => {4 return { foo: 'bar' };5};6
7export 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
Our @datocms/cda-client
is not the only option. This blog post ranks the best JavaScript GraphQL client libraries, helping you choose the right tool based on your project’s specific needs and ensuring efficient and optimized GraphQL data fetching.
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
:
1import { executeQuery } from '@datocms/cda-client';2
3export 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:
1import { useLoaderData } from "remix";2import { load } from "~/lib/datocms";3
4const HOMEPAGE_QUERY = `query HomePage($limit: IntType) {5 posts: allBlogPosts(first: $limit) {6 title7 }8}`;9
10export async function loader() => {11 return load(HOMEPAGE_QUERY, {12 variables: { limit: 10 }13 });14};15
16export 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!