datocms listen 다운로드 - datocms listen 소스 코드 다운로드

datocms listen

기타 소스코드

v1.0.0

다운로드

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 토큰
업데이트 중	기능	✅	쿼리 업데이트 이벤트를 수신하는 콜백 함수
onChannelError	기능		ChannelError 이벤트를 수신하는 콜백 함수
onStatusChange	기능		상태 변경 이벤트를 수신하는 콜백 함수
오류 시	기능		오류 이벤트를 수신하는 콜백 함수
onEvent	기능		다른 이벤트를 수신하는 콜백 함수
변수	물체		쿼리에 대한 GraphQL 변수
초안 포함	불리언		true인 경우 초안 레코드가 반환됩니다.
제외유효하지 않음	불리언		true인 경우 잘못된 레코드가 필터링됩니다.
환경	끈		쿼리를 수행할 DatoCMS 환경의 이름(기본값은 기본 환경)
콘텐츠링크	`'vercel-1'` 또는 `undefined`		true인 경우 콘텐츠 링크를 활성화하는 메타데이터를 포함합니다.
기본편집Url	끈		DatoCMS 프로젝트의 기본 URL
캐시태그	불리언		true인 경우 쿼리와 관련된 캐시 태그를 수신합니다.
재연결 기간	숫자		네트워크 오류가 발생한 경우 재접속을 기다리는 시간(ms)	1000
가져오는 사람	가져오기 같은 함수		등록 쿼리를 수행하는 데 사용하는 가져오기 함수	창.가져오기
이벤트소스클래스	EventSource와 유사한 클래스		SSE 연결을 여는 데 사용할 EventSource 클래스	window.EventSource
기본 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 헤드리스 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 프론트엔드 프레임워크에 대한 예제가 있습니다.

또는 모든 공개 저장소를 확인하세요

확장하다

추가 정보