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
const query = `
2
  query HomeQuery {
3
    blogPost { title }
4
  }
5
`;
6

7
export const load = () => {
8
  return executeQuery(query, { includeDrafts: true });
9
};

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

If your SvelteKit site is deployed as a dynamic site (server-side rendered on each request), you can implement a "Draft Mode" toggle that allows content editors to switch between viewing published content and draft content directly on the website.

Unlike Next.js, SvelteKit doesn't have a built-in draft mode feature. However, you can implement it yourself using cookies to store the draft mode state. The basic approach involves:

• API routes to enable/disable draft mode — These set or delete a cookie that indicates whether draft mode is active.

• A helper function to check draft mode status — Used in your load functions to determine whether to include drafts in API requests.

• Conditional query execution — Pass the includeDrafts option based on the current draft mode state.

Here's an example of how your layout server load function might conditionally include drafts:

1
import { isDraftModeEnabled } from '$lib/draftMode.server';
2

3
export const load = async (event) => {
4
  const draftModeEnabled = isDraftModeEnabled(event);
5

6
  const data = await executeQuery(query, {
7
    includeDrafts: draftModeEnabled,
8
  });
9

10
  return { data, draftModeEnabled };
11
};

For a complete implementation including secure cookie handling with JWT tokens and API route handlers, check out the draft mode implementation in the SvelteKit Starter Kit.