React Router

Setting up a preview mode

Most often than not, editors of a DatoCMS project will find very beneficial to have a preview of how the changes they are making to ie. an article will be rendered inside the final website.

With React Router you can easily add a "preview mode" to your production website. With that, requests coming from editors will add a special header — X-Include-Drafts — that returns content that is not yet published.

Step 1: Create resource routes to turn Preview mode on/off

First, we need to create a couple of resource routes to enable/disable Preview Mode. We're going to use React Router's built-in session management to store a cookie inside the browser of the visitor.

First step is to actually create the session manager. Create a new file under app/sessions.ts:

1
import { createCookieSessionStorage } from 'react-router';
2

3
const { getSession, commitSession, destroySession } = createCookieSessionStorage({
4
  cookie: {
5
    name: '__session',
6
    maxAge: 604_800,
7
    path: '/',
8
  },
9
});
10

11
export { getSession, commitSession, destroySession };

Now we can use it inside a new resource route under app/routes/preview-start.ts, that we can call to turn on the preview mode:

1
import { redirect } from 'react-router';
2
import { getSession, commitSession } from '~/sessions';
3
import type { Route } from './+types/preview-start';
4

5
export async function action({ request }: Route.ActionArgs) {
6
  const session = await getSession(request.headers.get('Cookie'));
7

8
  session.set('preview', 'yes');
9

10
  return redirect('/', {
11
    headers: {
12
      'Set-Cookie': await commitSession(session),
13
    },
14
  });
15
}

Similarly, we also need to create a route under app/routes/preview-stop.ts, to turn preview mode off:

1
import { redirect } from 'react-router';
2
import { getSession, commitSession } from '~/sessions';
3
import type { Route } from './+types/preview-stop';
4

5
export async function action({ request }: Route.ActionArgs) {
6
  const session = await getSession(request.headers.get('Cookie'));
7

8
  session.unset('preview');
9

10
  return redirect('/', {
11
    headers: {
12
      'Set-Cookie': await commitSession(session),
13
    },
14
  });
15
}

Both routes only export an action, with no component to render, so we declare them in app/routes.ts as any other route:

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

export default [
  index('routes/home.tsx'),
  route('preview/start', 'routes/preview-start.ts'),
  route('preview/stop', 'routes/preview-stop.ts'),
] satisfies RouteConfig;

We can now tweak the app/root.tsx file to add to every page a button to toggle the preview on and off:

1
import {
2
  Form,
3
  Links,
4
  Meta,
5
  Outlet,
6
  Scripts,
7
  ScrollRestoration,
8
  useRouteLoaderData,
9
} from 'react-router';
10
import { getSession } from '~/sessions';
11
import type { Route } from './+types/root';
12

13
export async function loader({ request }: Route.LoaderArgs) {
14
  const session = await getSession(request.headers.get('Cookie'));
15
  return { previewEnabled: session.has('preview') };
16
}
17

18
export function Layout({ children }: { children: React.ReactNode }) {
19
  const data = useRouteLoaderData('root');
20

21
  return (
22
    <html lang="en">
23
      <head>
24
        <meta charSet="utf-8" />
25
        <meta name="viewport" content="width=device-width,initial-scale=1" />
26
        <Meta />
27
        <Links />
28
      </head>
29
      <body>
30
        {data?.previewEnabled ? (
31
          <Form method="post" action="/preview/stop">
32
            <button>Exit preview mode</button>
33
          </Form>
34
        ) : (
35
          <Form method="post" action="/preview/start">
36
            <button>Enter preview mode</button>
37
          </Form>
38
        )}
39
        {children}
40
        <ScrollRestoration />
41
        <Scripts />
42
      </body>
43
    </html>
44
  );
45
}
46

47
export default function App() {
48
  return <Outlet />;
49
}

Step 2: Fetch non-published content with X-Include-Drafts

Now every loader can know from the session if the visitor is currently in preview mode by looking at the request object.

If that's the case, we can run the same query, but passing the X-Include-Drafts header, which returns the records at their latest version available instead of the one that's currently set as published:

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

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

11
export async function loader({ request }: Route.LoaderArgs) {
12
  const session = await getSession(request.headers.get('Cookie'));
13

14
  return load(HOMEPAGE_QUERY, {
15
    variables: { limit: 10 },
16
    includeDrafts: session.has('preview'),
17
  });
18
}
19

20
export default function Home({ loaderData }: Route.ComponentProps) {
21
  const { posts } = loaderData;
22

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