datocms listen

Visite a página inicial do DatoCMS ou consulte O que é DatoCMS?

---

datocms-ouvir

Um pacote leve e pronto para TypeScript que oferece utilitários para trabalhar com a API de atualizações em tempo real DatoCMS dentro de um navegador.

Instalação

 npm install datocms-listen

Exemplo

Importe subscribeToQuery de datocms-listen e use-o dentro de seus componentes assim:

 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",
    // }
  } ,
} ) ; 

Opções de inicialização

adereço	tipo	obrigatório	descrição	padrão
consulta	corda | TypedDocumentNode	✅	A consulta GraphQL para assinar
ficha	corda	✅	Token da API DatoCMS a ser usado
onUpdate	função	✅	Função de retorno de chamada para receber eventos de atualização de consulta
onChannelError	função		Função de retorno de chamada para receber eventos channelError
onStatusChange	função		Função de retorno de chamada para receber eventos de mudança de status
onError	função		Função de retorno de chamada para receber eventos de erro
noEvento	função		Função de retorno de chamada para receber outros eventos
variáveis	Objeto		Variáveis ​​GraphQL para a consulta
incluir Rascunhos	booleano		Se verdadeiro, os registros de rascunho serão retornados
excluirInválido	booleano		Se for verdade, os registros inválidos serão filtrados
ambiente	corda		O nome do ambiente DatoCMS onde realizar a consulta (o padrão é ambiente primário)
contentLink	'vercel-1' ou undefined		Se verdadeiro, incorpore metadados que habilitem o Content Link
baseEditingUrl	corda		A URL base do projeto DatoCMS
cacheTags	booleano		Se verdadeiro, recebe as Tags de Cache associadas à consulta
período de reconexão	número		Em caso de erros de rede, o período (em ms) de espera para reconectar	1000
buscador	uma função semelhante a uma busca		A função de busca a ser usada para realizar a consulta de registro	janela.fetch
EventSourceClass	uma classe semelhante a EventSource		A classe EventSource a ser usada para abrir a conexão SSE	janela.EventSource
baseUrl	corda		O URL base a ser usado para realizar a consulta	https://graphql-listen.datocms.com

Eventos

onUpdate(update: UpdateData<QueryResult>)

Esta função será chamada sempre que o canal enviar um resultado de consulta atualizado. O argumento updateData possui as seguintes propriedades:

adereço	tipo	descrição
resposta	Objeto	A resposta atualizada do GraphQL

onStatusChange(status: ConnectionStatus)

O argumento status representa o estado da conexão de eventos enviados pelo servidor. Pode ser um dos seguintes:

• connecting : o canal de assinatura está tentando se conectar
• connected : o canal está aberto, estamos recebendo atualizações ao vivo
• closed : o canal foi fechado permanentemente devido a um erro fatal (ou seja, uma consulta inválida)

onChannelError(errorData: ChannelErrorData)

O argumento errorData possui as seguintes propriedades:

adereço	tipo	descrição
código	corda	O código do erro (ou seja, INVALID_QUERY )
mensagem	corda	Uma mensagem amigável explicando o erro
resposta	Objeto	A resposta bruta retornada pelo endpoint, se disponível

onError(error: ErrorData)

Esta função é chamada quando ocorrem erros de conexão.

O argumento error tem as seguintes propriedades:

adereço	tipo	descrição
mensagem	corda	Uma mensagem amigável explicando o erro

onEvent(event: EventData)

Esta função é chamada então outros eventos ocorrem.

O argumento event possui as seguintes propriedades:

adereço	tipo	descrição
status	corda	O status atual da conexão (veja acima)
canalUrl	corda	O URL do canal atual
mensagem	corda	Uma mensagem amigável explicando o evento

Valor de retorno

A função retorna um Promise<() => void> . Você pode chamar a função para fechar normalmente o canal SSE.

---

O que é DatoCMS?

DatoCMS é o CMS REST e GraphQL Headless para a web moderna.

Com a confiança de mais de 25.000 empresas, agências parceiras e indivíduos em todo o mundo, os usuários do DatoCMS criam conteúdo online em escala a partir de um hub central e o distribuem via API. Nós ❤️ nossos desenvolvedores, editores de conteúdo e profissionais de marketing!

Links rápidos:

• ⚡️ Comece com uma conta DatoCMS gratuita
• ? Consulte os documentos
• Obtenha apoio nosso e da comunidade
• ? Mantenha-se atualizado sobre novos recursos e correções no changelog

Nossos repositórios em destaque:

• datocms/react-datocms: componentes auxiliares do React para imagens, renderização de texto estruturado e muito mais
• datocms/js-rest-api-clients: Clientes JavaScript de nó e navegador para atualizar e administrar seu conteúdo. Para buscas de front-end, recomendamos usar nossa API GraphQL Content Delivery.
• datocms/cli: Interface de linha de comando que inclui nosso importador Contentful e importador Wordpress
• datocms/plugins: Exemplos de plug-ins que criamos que estendem o painel do editor/administrador
• DatoCMS Starters tem exemplos para vários frameworks frontend Javascript

Ou veja todos os nossos repositórios públicos