الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

قم بزيارة الصفحة الرئيسية لـ DatoCMS أو راجع ما هو DatoCMS؟

datocms-listen

حزمة خفيفة الوزن وجاهزة لـ TypeScript توفر أدوات مساعدة للعمل مع DatoCMS Real-time Updates API داخل المتصفح.

تثبيت 

 npm install datocms-listen

مثال

قم باستيراد subscribeToQuery من datocms-listen واستخدمه داخل مكوناتك مثل هذا: 

 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 وظيفة وظيفة رد الاتصال لتلقي أحداث تغيير الحالة
خطأ وظيفة وظيفة رد الاتصال لتلقي أحداث الخطأ
com.onEvent وظيفة وظيفة رد الاتصال لتلقي أحداث أخرى
المتغيرات هدف متغيرات GraphQL للاستعلام
includeDrafts منطقية إذا كان هذا صحيحًا، فسيتم إرجاع مسودات السجلات
استبعاد غير صالح منطقية إذا كان هذا صحيحًا، فسيتم تصفية السجلات غير الصالحة
بيئة خيط اسم بيئة DatoCMS التي سيتم إجراء الاستعلام فيها (الإعداد الافتراضي للبيئة الأساسية)
com.contentLink 'vercel-1' أو undefined إذا كان صحيحًا، فقم بتضمين البيانات التعريفية التي تمكّن رابط المحتوى
baseEditingUrl خيط عنوان URL الأساسي لمشروع DatoCMS
cacheTags منطقية إذا كان صحيحًا، فاستلم علامات ذاكرة التخزين المؤقت المرتبطة بالاستعلام
فترة إعادة الاتصال رقم في حالة وجود أخطاء في الشبكة، الفترة (بالمللي ثانية) للانتظار لإعادة الاتصال 1000
الجلب وظيفة تشبه الجلب وظيفة الجلب المستخدمة لتنفيذ استعلام التسجيل window.fetch
EventSourceClass فئة تشبه EventSource فئة EventSource التي سيتم استخدامها لفتح اتصال SSE window.EventSource
baseUrl خيط عنوان 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 على الخصائص التالية:

دعم يكتب وصف
حالة خيط حالة الاتصال الحالية (انظر أعلاه)
ChannelUrl خيط عنوان URL الحالي للقناة
رسالة خيط رسالة صديقة الإنسان تشرح الحدث

قيمة الإرجاع

ترجع الدالة Promise<() => void> . يمكنك استدعاء الوظيفة لإغلاق قناة SSE بأمان.

ما هو داتوCMS؟

DatoCMS هو نظام إدارة المحتوى بدون رأس REST & GraphQL للويب الحديث.

يحظى مستخدمو DatoCMS بثقة ما يزيد عن 25000 شركة وشركاء وأفراد حول العالم، ويقومون بإنشاء محتوى عبر الإنترنت على نطاق واسع من مركز مركزي وتوزيعه عبر واجهة برمجة التطبيقات. نحن ❤️ المطورين ومحرري المحتوى والمسوقين لدينا!

روابط سريعة:

  • ⚡️ ابدأ باستخدام حساب DatoCMS مجاني
  • ؟ اذهب من خلال المستندات
  • احصل على الدعم منا ومن المجتمع
  • ؟ ابق على اطلاع على الميزات الجديدة والإصلاحات في سجل التغيير

اتفاقياتنا المميزة:

  • datocms/react-datocms: مكونات React المساعدة للصور وعرض النص المنظم والمزيد
  • datocms/js-rest-api-clients: عملاء JavaScript للعقدة والمتصفح لتحديث المحتوى الخاص بك وإدارته. بالنسبة لعمليات جلب الواجهة الأمامية، نوصي باستخدام GraphQL Content Delivery API الخاص بنا بدلاً من ذلك.
  • datocms/cli: واجهة سطر الأوامر التي تتضمن مستورد المحتوى ومستورد Wordpress
  • datocms/plugins: أمثلة على المكونات الإضافية التي أنشأناها والتي تعمل على توسيع لوحة تحكم المحرر/المشرف
  • يحتوي DatoCMS Starters على أمثلة لمختلف أطر عمل الواجهة الأمامية لجافا سكريبت

أو شاهد جميع اتفاقيات الشراء العامة لدينا

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل