datocms listen
v1.0.0
Visitez la page d'accueil de DatoCMS ou consultez Qu'est-ce que DatoCMS ?
Un package léger, prêt pour TypeScript, qui offre des utilitaires permettant de travailler avec l'API de mises à jour en temps réel de DatoCMS dans un navigateur.
npm install datocms-listen
Importez subscribeToQuery depuis datocms-listen et utilisez-le dans vos composants comme ceci :
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",
// }
} ,
} ) ; | soutenir | taper | requis | description | défaut |
|---|---|---|---|---|
| requête | chaîne | TypedDocumentNode | ✅ | La requête GraphQL pour s'abonner | |
| jeton | chaîne | ✅ | Jeton API DatoCMS à utiliser | |
| surMise à jour | fonction | ✅ | Fonction de rappel pour recevoir les événements de mise à jour des requêtes | |
| surErreurChannel | fonction | Fonction de rappel pour recevoir les événements ChannelError | ||
| onStatusChange | fonction | Fonction de rappel pour recevoir des événements de changement d'état | ||
| surErreur | fonction | Fonction de rappel pour recevoir des événements d'erreur | ||
| surÉvénement | fonction | Fonction de rappel pour recevoir d'autres événements | ||
| variables | Objet | Variables GraphQL pour la requête | ||
| inclure les brouillons | booléen | Si c'est vrai, les brouillons d'enregistrements seront renvoyés | ||
| exclureInvalide | booléen | Si c'est vrai, les enregistrements invalides seront filtrés | ||
| environnement | chaîne | Le nom de l'environnement DatoCMS dans lequel effectuer la requête (par défaut, environnement principal) | ||
| contenuLien | 'vercel-1' ou undefined | Si vrai, intégrez les métadonnées qui activent Content Link | ||
| baseEditingUrl | chaîne | L'URL de base du projet DatoCMS | ||
| balises de cache | booléen | Si vrai, recevez les balises de cache associées à la requête | ||
| période de reconnexion | nombre | En cas d'erreurs réseau, le délai (en ms) à attendre pour se reconnecter | 1000 | |
| récupérateur | une fonction de type récupération | La fonction fetch à utiliser pour effectuer la requête d'enregistrement | fenêtre.fetch | |
| eventSourceClass | une classe de type EventSource | La classe EventSource à utiliser pour ouvrir la connexion SSE | fenêtre.EventSource | |
| URL de base | chaîne | L'URL de base à utiliser pour effectuer la requête | https://graphql-listen.datocms.com |
onUpdate(update: UpdateData<QueryResult>) Cette fonction sera appelée chaque fois que le canal enverra un résultat de requête mis à jour. L'argument updateData a les propriétés suivantes :
| soutenir | taper | description |
|---|---|---|
| réponse | Objet | La réponse mise à jour de GraphQL |
onStatusChange(status: ConnectionStatus) L'argument status représente l'état de la connexion aux événements envoyés par le serveur. Il peut s'agir de l'un des éléments suivants :
connecting : la chaîne d'abonnement tente de se connecterconnected : la chaîne est ouverte, nous recevons des mises à jour en directclosed : le canal a été définitivement fermé en raison d'une erreur fatale (c'est-à-dire une requête invalide)onChannelError(errorData: ChannelErrorData) L'argument errorData a les propriétés suivantes :
| soutenir | taper | description |
|---|---|---|
| code | chaîne | Le code de l'erreur (c'est-à-dire INVALID_QUERY ) |
| message | chaîne | Un message convivial expliquant l'erreur |
| réponse | Objet | La réponse brute renvoyée par le point de terminaison, si disponible |
onError(error: ErrorData)Cette fonction est appelée lorsque des erreurs de connexion surviennent.
L'argument error a les propriétés suivantes :
| soutenir | taper | description |
|---|---|---|
| message | chaîne | Un message convivial expliquant l'erreur |
onEvent(event: EventData)Cette fonction est appelée puis d'autres événements se produisent.
L'argument event a les propriétés suivantes :
| soutenir | taper | description |
|---|---|---|
| statut | chaîne | L'état actuel de la connexion (voir ci-dessus) |
| URL du canal | chaîne | L'URL actuelle de la chaîne |
| message | chaîne | Un message convivial expliquant l'événement |
La fonction renvoie un Promise<() => void> . Vous pouvez appeler la fonction pour fermer correctement le canal SSE.
DatoCMS est le CMS Headless REST & GraphQL pour le Web moderne.
Reconnus par plus de 25 000 entreprises, agences partenaires et particuliers à travers le monde, les utilisateurs de DatoCMS créent du contenu en ligne à grande échelle à partir d'un hub central et le distribuent via une API. Nous ❤️ nos développeurs, éditeurs de contenu et marketeurs !
Liens rapides :
Nos dépôts en vedette :
Ou consultez tous nos dépôts publics
