QueryListener

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

prop	type	required	description	default
enabled	boolean	❌	Whether the subscription has to be performed or not	true
query	string | TypedDocumentNode	✅	The GraphQL query to subscribe
token	string	✅	DatoCMS API token to use
variables	Object	❌	GraphQL variables for the query
includeDrafts	boolean	❌	If true, draft records will be returned
excludeInvalid	boolean	❌	If true, invalid records will be filtered out
environment	string	❌	The name of the DatoCMS environment where to perform the query (defaults to primary environment)
contentLink	'vercel-1' or undefined	❌	If true, embed metadata that enable Content Link
baseEditingUrl	string	❌	The base URL of the DatoCMS project
cacheTags	boolean	❌	If true, receive the Cache Tags associated with the query
initialData	Object	❌	The initial data to use on the first render
reconnectionPeriod	number	❌	In case of network errors, the period (in ms) to wait to reconnect	1000
reloadDelayMs	number	❌	Delay (in ms) before reloading the page after receiving an update. Multiple updates during the delay reset the timer.	2000
baseUrl	string	❌	The base URL to use to perform the query	https://graphql-listen.datocms.com