Live real-time updates

<QueryListener /> is an Astro component that you can use to implement client-side reload of the page as soon as the content of a query changes. It uses DatoCMS's Real-time Updates API to receive the updated query results in real-time, and is able to reconnect in case of network failures.

Live reloads are great to get instant previews of your content while editing it inside DatoCMS.

<QueryListener /> is based on the subscribeToQuery helper provided by the datocms-listen package.

Table of Contents

• Installation
• Reference
• Initialization options

Installation

npm install --save @datocms/astro

Reference

Import <QueryListener> from @datocms/astro and use it inside your components setup function like this:

---
import { QueryListener } from '@datocms/astro/QueryListener';
import { executeQuery } from '@datocms/cda-client';

const query = gql`
  query {
    homepage {
      title
    }
  }
`;

const data = await executeQuery(query, { token: '<YOUR-API-TOKEN>' });
---

<h1>{data.homepage.title}</h1>

<QueryListener query={query} token="<YOUR-API-TOKEN>" />

Initialization options