Real-time updates

Live updates can be extremely useful both for content editors and the regular visitors of your app/website:

• Content-editors in Draft Mode can see drafts directly in the production website, without having to refresh the page;

• Visitors can immediately see new content as it gets published, allowing all kinds of real-time interactions with your website/app (e.g., live-news coverage).

The <QueryListener /> component from the @datocms/astro package provides real-time page reload when content changes. It connects to DatoCMS's Real-time Updates API to receive updated query results in real-time, and is able to reconnect in case of network failures.

Simply add the component at the end of your page, passing the same query and variables you used to fetch content:

1
---
2
import { QueryListener } from '@datocms/astro';
3
import { DATOCMS_CDA_TOKEN } from "astro:env/server";
4

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

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

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

18
<QueryListener
19
  token={DATOCMS_CDA_TOKEN}
20
  includeDrafts
21
  query={query}
22
/>

Draft Mode + <QueryListener />

Perhaps a more common scenario is activating real-time updates only for content editors in Draft Mode. To avoid repetitive code, you can create a simple wrapper component that checks draft mode status before rendering:

1
---
2
import { QueryListener } from '@datocms/astro';
3
import { DATOCMS_CDA_TOKEN } from 'astro:env/server';
4
import { isDraftModeEnabled } from '~/lib/draftMode';
5

6
const draftModeEnabled = isDraftModeEnabled(Astro.cookies);
7
---
8

9
{
10
  draftModeEnabled && (
11
    <QueryListener
12
      {...Astro.props}
13
      token={DATOCMS_CDA_TOKEN}
14
      includeDrafts
15
    />
16
  )
17
}

Then use it in your pages to enable real-time updates for editors only:

1
---
2
import { DraftModeQueryListener } from '~/components/DraftModeQueryListener';
3

4
const query = `...`;
5
const data = await executeQuery(query, { includeDrafts: draftModeEnabled });
6
---
7

8
<article>...</article>
9

10
<DraftModeQueryListener query={query} variables={{ slug }} />

Reference

Please consult the @datocms/astro documentation to learn more about how to configure <QueryListener />. You can also look at a real-world example in the Astro Starter Kit, which includes a DraftModeQueryListener wrapper component.