datocms listen

DatoCMS ホームページにアクセスするか、「DatoCMS とは何ですか?」を参照してください。

---

datocms-リッスン

ブラウザ内で DatoCMS リアルタイム更新 API を操作するためのユーティリティを提供する、軽量の TypeScript 対応パッケージです。

インストール

 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トークン
onUpdate	関数	✅	クエリ更新イベントを受信するコールバック関数
onChannelError	関数		ChannelError イベントを受信するコールバック関数
onStatusChange	関数		状態変化イベントを受信するコールバック関数
onError	関数		エラーイベントを受信するコールバック関数
イベント時	関数		他のイベントを受信するコールバック関数
変数	物体		クエリのGraphQL変数
下書きを含む	ブール値		true の場合、下書きレコードが返されます
無効を除外する	ブール値		true の場合、無効なレコードは除外されます。
環境	弦		クエリを実行する DatoCMS 環境の名前 (デフォルトはプライマリ環境)
コンテンツリンク	'vercel-1'またはundefined		true の場合、コンテンツ リンクを有効にするメタデータを埋め込みます
ベース編集URL	弦		DatoCMS プロジェクトのベース URL
キャッシュタグ	ブール値		true の場合、クエリに関連付けられたキャッシュ タグを受信します。
再接続期間	番号		ネットワークエラーが発生した場合、再接続を待つ時間（ミリ秒）	1000
フェッチャー	フェッチのような関数		登録クエリを実行するために使用するフェッチ関数	ウィンドウフェッチ
イベントソースクラス	EventSource のようなクラス		SSE 接続を開くために使用する EventSource クラス	window.イベントソース
ベースURL	弦		クエリの実行に使用するベース 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	弦	現在のチャンネルの URL
メッセージ	弦	イベントを説明する人に優しいメッセージ

戻り値

この関数はPromise<() => void>を返します。この関数を呼び出して、SSE チャネルを正常に閉じることができます。

---

DatoCMSとは何ですか?

DatoCMS は、最新の Web 用の REST および GraphQL ヘッドレス CMS です。

世界中の 25,000 を超える企業、代理店パートナー、個人から信頼されている DatoCMS ユーザーは、中央ハブから大規模なオンライン コンテンツを作成し、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 フロントエンド フレームワークの例が含まれています

または、すべてのパブリック リポジトリを参照してください