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 前端框架的範例

或查看我們所有的公共儲存庫