Astro

Real-time updates

Live updates are beneficial for content editors as they can view drafts on the actual website without refreshing the page.

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 instantly and can reconnect during network issues:

1
---
2
import { DATOCMS_CDA_TOKEN } from "astro:env/server";
3

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

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

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

16
  <QueryListener
17
    token={DATOCMS_CDA_TOKEN}
18
    includeDrafts
19
    {query}
20
  />
21
</article>