datocms listen
v1.0.0
Besuchen Sie die DatoCMS-Homepage oder sehen Sie sich „Was ist DatoCMS?“ an.
Ein leichtes, TypeScript-fähiges Paket, das Dienstprogramme für die Arbeit mit der DatoCMS Real-time Updates API in einem Browser bietet.
npm install datocms-listen
Importieren Sie subscribeToQuery aus datocms-listen und verwenden Sie es in Ihren Komponenten wie folgt:
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",
// }
} ,
} ) ; | Stütze | Typ | erforderlich | Beschreibung | Standard |
|---|---|---|---|---|
| Abfrage | Zeichenfolge | TypedDocumentNode | ✅ | Die zu abonnierende GraphQL-Abfrage | |
| Token | Zeichenfolge | ✅ | Zu verwendendes DatoCMS-API-Token | |
| onUpdate | Funktion | ✅ | Rückruffunktion zum Empfangen von Abfrageaktualisierungsereignissen | |
| onChannelError | Funktion | Rückruffunktion zum Empfangen von ChannelError-Ereignissen | ||
| onStatusChange | Funktion | Callback-Funktion zum Empfang von Statusänderungsereignissen | ||
| onError | Funktion | Callback-Funktion zum Empfang von Fehlerereignissen | ||
| onEvent | Funktion | Callback-Funktion zum Empfang anderer Ereignisse | ||
| Variablen | Objekt | GraphQL-Variablen für die Abfrage | ||
| includeDrafts | Boolescher Wert | Wenn „true“, werden Entwurfsdatensätze zurückgegeben | ||
| ausschließenUngültig | Boolescher Wert | Bei „true“ werden ungültige Datensätze herausgefiltert | ||
| Umfeld | Zeichenfolge | Der Name der DatoCMS-Umgebung, in der die Abfrage ausgeführt werden soll (standardmäßig primäre Umgebung) | ||
| contentLink | 'vercel-1' oder undefined | Wenn „true“, werden Metadaten eingebettet, die den Content-Link ermöglichen | ||
| baseEditingUrl | Zeichenfolge | Die Basis-URL des DatoCMS-Projekts | ||
| CacheTags | Boolescher Wert | Wenn „true“, werden die mit der Abfrage verknüpften Cache-Tags empfangen | ||
| Wiederverbindungszeitraum | Nummer | Bei Netzwerkfehlern die Zeitspanne (in ms), die auf die Wiederherstellung der Verbindung gewartet werden soll | 1000 | |
| Abholer | eine Fetch-ähnliche Funktion | Die Abruffunktion, die zum Durchführen der Registrierungsabfrage verwendet werden soll | window.fetch | |
| eventSourceClass | eine EventSource-ähnliche Klasse | Die EventSource-Klasse, die zum Öffnen der SSE-Verbindung verwendet werden soll | window.EventSource | |
| baseUrl | Zeichenfolge | Die Basis-URL, die zum Ausführen der Abfrage verwendet werden soll | https://graphql-listen.datocms.com |
onUpdate(update: UpdateData<QueryResult>) Diese Funktion wird jedes Mal aufgerufen, wenn der Kanal ein aktualisiertes Abfrageergebnis sendet. Das updateData -Argument hat die folgenden Eigenschaften:
| Stütze | Typ | Beschreibung |
|---|---|---|
| Antwort | Objekt | Die aktualisierte GraphQL-Antwort |
onStatusChange(status: ConnectionStatus) Das status stellt den Status der vom Server gesendeten Ereignisverbindung dar. Es kann eines der folgenden sein:
connecting : Der Abonnementkanal versucht, eine Verbindung herzustellenconnected : Der Kanal ist geöffnet, wir erhalten Live-Updatesclosed : Der Kanal wurde aufgrund eines schwerwiegenden Fehlers (z. B. einer ungültigen Abfrage) dauerhaft geschlossen.onChannelError(errorData: ChannelErrorData) Das Argument errorData hat die folgenden Eigenschaften:
| Stütze | Typ | Beschreibung |
|---|---|---|
| Code | Zeichenfolge | Der Code des Fehlers (z. B. INVALID_QUERY ) |
| Nachricht | Zeichenfolge | Eine benutzerfreundliche Nachricht, die den Fehler erklärt |
| Antwort | Objekt | Die vom Endpunkt zurückgegebene Rohantwort, sofern verfügbar |
onError(error: ErrorData)Diese Funktion wird aufgerufen, wenn Verbindungsfehler auftreten.
Das error hat die folgenden Eigenschaften:
| Stütze | Typ | Beschreibung |
|---|---|---|
| Nachricht | Zeichenfolge | Eine benutzerfreundliche Nachricht, die den Fehler erklärt |
onEvent(event: EventData)Diese Funktion wird aufgerufen, wenn andere Ereignisse eintreten.
Das event hat die folgenden Eigenschaften:
| Stütze | Typ | Beschreibung |
|---|---|---|
| Status | Zeichenfolge | Der aktuelle Verbindungsstatus (siehe oben) |
| KanalUrl | Zeichenfolge | Die aktuelle Kanal-URL |
| Nachricht | Zeichenfolge | Eine menschenfreundliche Nachricht, die das Ereignis erklärt |
Die Funktion gibt ein Promise<() => void> zurück. Sie können die Funktion aufrufen, um den SSE-Kanal ordnungsgemäß zu schließen.
DatoCMS ist das REST & GraphQL Headless CMS für das moderne Web.
Über 25.000 Unternehmen, Agenturpartner und Privatpersonen auf der ganzen Welt vertrauen darauf, dass DatoCMS-Benutzer von einem zentralen Hub aus Online-Inhalte in großem Maßstab erstellen und über eine API verteilen. Wir ❤️ unsere Entwickler, Content-Redakteure und Vermarkter!
Quicklinks:
Unsere vorgestellten Repos:
Oder sehen Sie sich alle unsere öffentlichen Repos an
