Astro Starter Kit
Words are nice... but code speaks louder. Dive into a fully commented project template, showcasing these techniques (and more) in action.
Sorry, no results found for "".
Astro > Real-time updates
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:
---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>