datocms listen

访问 DatoCMS 主页或查看什么是 DatoCMS？

---

datocms-听

一个轻量级的 TypeScript 就绪包，提供在浏览器内使用 DatoCMS 实时更新 API 的实用程序。

安装

 npm install datocms-listen

例子

从datocms-listen导入subscribeToQuery并在组件中使用它，如下所示：

 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",
    // }
  } ,
} ) ; 

初始化选项

支柱	类型	必需的	描述	默认
询问	字符串| TypedDocumentNode	✅	要订阅的 GraphQL 查询
代币	细绳	✅	要使用的 DatoCMS API 令牌
更新时	功能	✅	接收查询更新事件的回调函数
通道错误	功能		接收channelError事件的回调函数
状态改变时	功能		接收状态变化事件的回调函数
错误时	功能		接收错误事件的回调函数
事件处理	功能		接收其他事件的回调函数
变量	目的		查询的 GraphQL 变量
包括草稿	布尔值		如果为 true，将返回草稿记录
排除无效	布尔值		如果为true，无效记录将被过滤掉
环境	细绳		执行查询的 DatoCMS 环境的名称（默认为主环境）
内容链接	'vercel-1'或undefined		如果为 true，则嵌入启用内容链接的元数据
基本编辑网址	细绳		DatoCMS 项目的基本 URL
缓存标签	布尔值		如果为 true，则接收与查询关联的缓存标签
重连期	数字		如果出现网络错误，等待重新连接的时间（以毫秒为单位）	1000
获取器	类似 fetch 的函数		用于执行注册查询的获取函数	窗口获取
事件源类	类似 EventSource 的类		用于打开 SSE 连接的 EventSource 类	窗口.EventSource
基本网址	细绳		用于执行查询的基本 URL	https://graphql-listen.datocms.com

活动

onUpdate(update: UpdateData<QueryResult>)

每次通道发送更新的查询结果时都会调用此函数。 updateData参数具有以下属性：

支柱	类型	描述
回复	目的	GraphQL 更新了响应

onStatusChange(status: ConnectionStatus)

status参数表示服务器发送的事件连接的状态。它可以是以下之一：

• connecting : 订阅频道正在尝试连接
• connected ：通道已打开，我们正在接收实时更新
• closed ：由于致命错误（即无效查询），通道已永久关闭

onChannelError(errorData: ChannelErrorData)

errorData参数具有以下属性：

支柱	类型	描述
代码	细绳	错误代码（即INVALID_QUERY ）
信息	细绳	解释错误的人性化消息
回复	目的	端点返回的原始响应（如果可用）

onError(error: ErrorData)

当发生连接错误时调用该函数。

error参数具有以下属性：

支柱	类型	描述
信息	细绳	解释错误的人性化消息

onEvent(event: EventData)

当其他事件发生时调用此函数。

event参数具有以下属性：

支柱	类型	描述
地位	细绳	当前连接状态（见上文）
频道网址	细绳	当前频道 URL
信息	细绳	解释事件的人性化消息

返回值

该函数返回Promise<() => void> 。您可以调用该函数优雅地关闭SSE通道。

---

什么是 DatoCMS？

DatoCMS 是适用于现代网络的 REST 和 GraphQL Headless CMS。

DatoCMS 用户受到全球 25,000 多家企业、代理合作伙伴和个人的信赖，他们从中央中心大规模创建在线内容并通过 API 进行分发。我们❤️我们的开发人员、内容编辑和营销人员！

快速链接：

• ⚡️ 开始使用免费的 DatoCMS 帐户
• ？浏览文档
• 获得我们和社区的支持
• ？及时了解更新日志中的新功能和修复

我们的特色存储库：

• datocms/react-datocms：用于图像、结构化文本渲染等的 React 辅助组件
• datocms/js-rest-api-clients：用于更新和管理内容的节点和浏览器 JavaScript 客户端。对于前端获取，我们建议改用我们的 GraphQL Content Delivery API。
• datocms/cli：命令行界面，包括我们的 Contentful 导入器和 Wordpress 导入器
• datocms/plugins：我们制作的用于扩展编辑器/管理仪表板的示例插件
• DatoCMS Starters 有各种 Javascript 前端框架的示例

或者查看我们所有的公共存储库