# Accessing draft/updated content

If you have [draft/published mode](https://www.datocms.com/docs/general-concepts/draft-published.md) enabled on some of your models, you can use [the `X-Include-Drafts` header](https://www.datocms.com/docs/content-delivery-api/api-endpoints.md#include-drafts) 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:

src/pages/index.astro

```javascript
---
const query = `
  query HomeQuery {
    blogPost { title }
  }
`;

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

<article>
  <h1>{data.blogPost.title}</h1>
</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](https://www.datocms.com/docs/content-delivery-api/api-endpoints.md).

### 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:

src/pages/index.astro

```javascript
---
import { isDraftModeEnabled } from '~/lib/draftMode';

const draftMode = isDraftModeEnabled(Astro.cookies);

const query = `
  query HomeQuery {
    blogPost { title }
  }
`;

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

<article>
  <h1>{data.blogPost.title}</h1>
</article>
```

Our [Astro starter kit](https://github.com/datocms/astro-starter-kit) includes a complete implementation of this pattern. You can see the [draft mode helpers](https://github.com/datocms/astro-starter-kit/blob/main/src/lib/draftMode.ts) that handle secure cookie management with JWT tokens, and the [API routes](https://github.com/datocms/astro-starter-kit/tree/main/src/pages/api/draft-mode) that enable and disable draft mode.

## Related content in "Astro"

- [Astro + DatoCMS Overview](https://www.datocms.com/docs/astro.md)

- [Accessing draft/updated content](https://www.datocms.com/docs/astro/accessing-draft-updated-content.md)
- [Managing images](https://www.datocms.com/docs/astro/managing-images.md)

- [Displaying videos](https://www.datocms.com/docs/astro/displaying-videos.md)
- [Structured Text fields](https://www.datocms.com/docs/astro/structured-text-fields.md)

- [SEO Management](https://www.datocms.com/docs/astro/seo-management.md)
- [Real-time updates](https://www.datocms.com/docs/astro/real-time-updates.md)

- [Visual Editing](https://www.datocms.com/docs/astro/visual-editing.md)
- [Astro Starter Kit    
Words are nice... but code speaks louder. Dive into a fully commented project template,
            showcasing these techniques (and more) in action.
       ✅ Official](https://www.datocms.com/marketplace/starters/astro-starter-kit.md)