Accessing draft/updated content

If you have draft/published mode enabled on some of your models, you can use the X-Include-Drafts header to access records at their latest version available instead of the currently published one

Pages and layouts can utilize the includeDrafts option of the executeQuery function in their server load functions:

1
---
2
const query = `
3
  query HomeQuery {
4
    blogPost { title }
5
  }
6
`;
7

8
const data = await executeQuery(query, { includeDrafts: true });
9
---
10

11
<article>
12
  <h1>{data.blogPost.title}</h1>
13
</article>

The X-Include-Drafts is one of many headers you can use to shape up the behavior of the Content Delivery API. Check out the other available headers in the Content Delivery API.

Setting up Draft Mode

Hardcoding includeDrafts: true is useful during development, but what if you want to toggle between draft and published content on a deployed website? This is where "Draft Mode" comes in.

Unlike Next.js, Astro doesn't provide a built-in draft mode feature, but you can implement one yourself using cookies to persist the draft mode state across requests. This approach works when your Astro site is configured for server-side rendering (SSR) or hybrid mode.

The basic idea involves:

• Creating API routes to enable/disable draft mode by setting/removing a secure cookie

• Creating a helper function to check whether draft mode is currently active

• Passing the draft mode status to executeQuery calls throughout your pages

Here's a simplified example of how your pages would use draft mode:

1
---
2
import { isDraftModeEnabled } from '~/lib/draftMode';
3

4
const draftMode = isDraftModeEnabled(Astro.cookies);
5

6
const query = `
7
  query HomeQuery {
8
    blogPost { title }
9
  }
10
`;
11

12
const data = await executeQuery(query, { includeDrafts: draftMode });
13
---
14

15
<article>
16
  <h1>{data.blogPost.title}</h1>
17
</article>

Our Astro starter kit includes a complete implementation of this pattern. You can see the draft mode helpers that handle secure cookie management with JWT tokens, and the API routes that enable and disable draft mode.