datocms listen
v1.0.0
Visita la página de inicio de DatoCMS o consulta ¿Qué es DatoCMS?
Un paquete liviano, listo para TypeScript, que ofrece utilidades para trabajar con la API de actualizaciones en tiempo real de DatoCMS dentro de un navegador.
npm install datocms-listen
Importe subscribeToQuery desde datocms-listen y utilícelo dentro de sus componentes de esta manera:
import { subscribeToQuery } from "datocms-listen" ;
const unsubscribe = await subscribeToQuery ( {
query : `
query BlogPosts($first: IntType!) {
allBlogPosts(first: $first) {
title
nonExistingField
}
}
` ,
variables : { first : 10 } ,
token : "YOUR_TOKEN" ,
includeDrafts : true ,
onUpdate : ( update ) => {
// response is the GraphQL response
console . log ( update . response . data ) ;
} ,
onStatusChange : ( status ) => {
// status can be "connected", "connecting" or "closed"
console . log ( status ) ;
} ,
onChannelError : ( error ) => {
// error will be something like:
// {
// code: "INVALID_QUERY",
// message: "The query returned an erroneous response. Please consult the response details to understand the cause.",
// response: {
// errors: [
// {
// fields: ["query", "allBlogPosts", "nonExistingField"],
// locations: [{ column: 67, line: 1 }],
// message: "Field 'nonExistingField' doesn't exist on type 'BlogPostRecord'",
// },
// ],
// },
// }
console . error ( error ) ;
} ,
onError : ( error ) => {
// error will be
// {
// message: "ERROR MESSAGE"
// }
console . log ( error . message ) ;
} ,
onEvent : ( event ) => {
// event will be
// {
// status: "connected|connected|closed",
// channelUrl: "...",
// message: "MESSAGE",
// }
} ,
} ) ; | apuntalar | tipo | requerido | descripción | por defecto |
|---|---|---|---|---|
| consulta | cadena | TypedDocumentNode | ✅ | La consulta GraphQL para suscribirse | |
| simbólico | cadena | ✅ | Token API de DatoCMS para usar | |
| en actualización | función | ✅ | Función de devolución de llamada para recibir eventos de actualización de consultas | |
| onChannelError | función | Función de devolución de llamada para recibir eventos de ChannelError | ||
| en cambio de estado | función | Función de devolución de llamada para recibir eventos de cambio de estado | ||
| enError | función | Función de devolución de llamada para recibir eventos de error | ||
| enEvento | función | Función de devolución de llamada para recibir otros eventos | ||
| variables | Objeto | Variables GraphQL para la consulta | ||
| incluirBorradores | booleano | Si es verdadero, se devolverán los registros borrador | ||
| excluirNo válido | booleano | Si es verdadero, se filtrarán los registros no válidos. | ||
| ambiente | cadena | El nombre del entorno DatoCMS donde realizar la consulta (por defecto es el entorno principal) | ||
| contenidoEnlace | 'vercel-1' o undefined | Si es verdadero, incruste metadatos que habiliten el enlace de contenido | ||
| baseEditingUrl | cadena | La URL base del proyecto DatoCMS | ||
| cachéEtiquetas | booleano | Si es verdadero, recibirá las etiquetas de caché asociadas con la consulta. | ||
| período de reconexión | número | En caso de errores de red, el período (en ms) de espera para volver a conectarse | 1000 | |
| buscador | una función similar a buscar | La función de búsqueda que se utilizará para realizar la consulta de registro. | ventana.fetch | |
| eventoFuenteClase | una clase similar a EventSource | La clase EventSource que se utilizará para abrir la conexión SSE | ventana.EventSource | |
| URL base | cadena | La URL base que se utilizará para realizar la consulta. | https://graphql-listen.datocms.com |
onUpdate(update: UpdateData<QueryResult>) Esta función se llamará cada vez que el canal envíe un resultado de consulta actualizado. El argumento updateData tiene las siguientes propiedades:
| apuntalar | tipo | descripción |
|---|---|---|
| respuesta | Objeto | La respuesta actualizada de GraphQL |
onStatusChange(status: ConnectionStatus) El argumento status representa el estado de la conexión de eventos enviados por el servidor. Puede ser uno de los siguientes:
connecting : el canal de suscripción está intentando conectarseconnected : el canal está abierto, estamos recibiendo actualizaciones en vivoclosed : el canal se ha cerrado permanentemente debido a un error fatal (es decir, una consulta no válida)onChannelError(errorData: ChannelErrorData) El argumento errorData tiene las siguientes propiedades:
| apuntalar | tipo | descripción |
|---|---|---|
| código | cadena | El código del error (es decir, INVALID_QUERY ) |
| mensaje | cadena | Un mensaje amigable para los humanos que explica el error. |
| respuesta | Objeto | La respuesta sin procesar devuelta por el punto final, si está disponible |
onError(error: ErrorData)Esta función se llama cuando se producen errores de conexión.
El argumento error tiene las siguientes propiedades:
| apuntalar | tipo | descripción |
|---|---|---|
| mensaje | cadena | Un mensaje amigable para los humanos que explica el error. |
onEvent(event: EventData)Esta función se llama y luego ocurren otros eventos.
El argumento event tiene las siguientes propiedades:
| apuntalar | tipo | descripción |
|---|---|---|
| estado | cadena | El estado de conexión actual (ver arriba) |
| URL del canal | cadena | La URL del canal actual |
| mensaje | cadena | Un mensaje amigable para los humanos explicando el evento. |
La función devuelve una Promise<() => void> . Puede llamar a la función para cerrar correctamente el canal SSE.
DatoCMS es el CMS sin cabeza REST y GraphQL para la web moderna.
Con la confianza de más de 25.000 empresas, agencias asociadas e individuos de todo el mundo, los usuarios de DatoCMS crean contenido en línea a escala desde un centro central y lo distribuyen a través de API. ¡Nosotros ❤️ a nuestros desarrolladores, editores de contenido y especialistas en marketing!
Enlaces rápidos:
Nuestros repositorios destacados:
O ver todos nuestros repositorios públicos
