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:

---
// src/pages/index.astro
import { DATOCMS_CDA_TOKEN } from "astro:env/server";
const query = `
  query HomeQuery {
    blogPost { title }
  }
`;
const data = await executeQuery(query, { includeDrafts: true });
---
<article>
  <h1>{data.blogPost.title}</h1>
  
  <QueryListener
    token={DATOCMS_CDA_TOKEN}
    includeDrafts
    {query}
  />
</article>