หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

เยี่ยมชมหน้าแรกของ DatoCMS หรือดู DatoCMS คืออะไร

datocms ฟัง

แพ็คเกจน้ำหนักเบาที่พร้อมใช้งาน 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 ที่จะใช้
บนอัปเดต การทำงาน ฟังก์ชันโทรกลับเพื่อรับเหตุการณ์การอัปเดตแบบสอบถาม
บน ChannelError การทำงาน ฟังก์ชั่นโทรกลับเพื่อรับเหตุการณ์ channelError
บนสถานะเปลี่ยน การทำงาน ฟังก์ชั่นโทรกลับเพื่อรับเหตุการณ์การเปลี่ยนแปลงสถานะ
บนข้อผิดพลาด การทำงาน ฟังก์ชั่นโทรกลับเพื่อรับเหตุการณ์ข้อผิดพลาด
onEvent การทำงาน ฟังก์ชั่นโทรกลับเพื่อรับกิจกรรมอื่น ๆ
ตัวแปร วัตถุ ตัวแปร GraphQL สำหรับการสืบค้น
รวมแบบร่าง บูลีน หากเป็นจริง บันทึกแบบร่างจะถูกส่งกลับ
ไม่รวมไม่ถูกต้อง บูลีน หากเป็นจริง บันทึกที่ไม่ถูกต้องจะถูกกรองออก
สิ่งแวดล้อม เชือก ชื่อของสภาพแวดล้อม DatoCMS ที่จะทำการสืบค้น (ค่าเริ่มต้นคือสภาพแวดล้อมหลัก)
เนื้อหาลิงก์ 'vercel-1' หรือ undefined หากเป็นจริง ให้ฝังข้อมูลเมตาที่เปิดใช้งาน Content Link
ฐานการแก้ไขUrl เชือก URL พื้นฐานของโครงการ DatoCMS
แท็กแคช บูลีน หากเป็นจริง จะได้รับแท็กแคชที่เกี่ยวข้องกับแบบสอบถาม
การเชื่อมต่อใหม่ระยะเวลา ตัวเลข ในกรณีที่เครือข่ายเกิดข้อผิดพลาด ระยะเวลา (เป็นมิลลิวินาที) ที่ต้องรอเพื่อเชื่อมต่อใหม่ 1,000
ตัวดึงข้อมูล ฟังก์ชั่นที่เหมือนการดึงข้อมูล ฟังก์ชันดึงข้อมูลเพื่อใช้ดำเนินการสอบถามการลงทะเบียน window.ดึงข้อมูล
eventSourceClass คลาสที่เหมือน EventSource คลาส EventSource ที่จะใช้เพื่อเปิดการเชื่อมต่อ SSE หน้าต่าง แหล่งที่มาของเหตุการณ์
ฐาน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 คือ REST & GraphQL Headless CMS สำหรับเว็บยุคใหม่

ได้รับความไว้วางใจจากธุรกิจองค์กร พันธมิตรตัวแทน และบุคคลต่างๆ ทั่วโลกมากกว่า 25,000 ราย ผู้ใช้ DatoCMS สร้างเนื้อหาออนไลน์ในวงกว้างจากศูนย์กลางส่วนกลางและเผยแพร่ผ่าน API เรา ❤️ นักพัฒนา บรรณาธิการเนื้อหา และนักการตลาดของเรา!

ลิงค์ด่วน:

  • ⚡️ เริ่มต้นใช้งานบัญชี DatoCMS ฟรี
  • - ผ่านเอกสาร
  • รับการสนับสนุนจากเราและชุมชน
  • - ติดตามข่าวสารล่าสุดเกี่ยวกับคุณสมบัติใหม่และการแก้ไขในบันทึกการเปลี่ยนแปลง

repos ที่โดดเด่นของเรา:

  • datocms/react-datocms: โต้ตอบส่วนประกอบตัวช่วยสำหรับรูปภาพ การแสดงข้อความที่มีโครงสร้าง และอื่นๆ
  • datocms/js-rest-api-clients: ไคลเอ็นต์ JavaScript ของโหนดและเบราว์เซอร์สำหรับการอัปเดตและจัดการเนื้อหาของคุณ สำหรับการดึงข้อมูลส่วนหน้า เราขอแนะนำให้ใช้ GraphQL Content Delivery API แทน
  • datocms/cli: อินเทอร์เฟซบรรทัดคำสั่งที่มีตัวนำเข้า Contentful และผู้นำเข้า Wordpress ของเรา
  • datocms/ปลั๊กอิน: ตัวอย่างปลั๊กอินที่เราสร้างขึ้นซึ่งขยายแดชบอร์ดตัวแก้ไข/ผู้ดูแลระบบ
  • DatoCMS Starters มีตัวอย่างสำหรับเฟรมเวิร์กฟรอนต์เอนด์ Javascript ต่างๆ

หรือดู repos สาธารณะทั้งหมดของเรา

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด