consultar e armazenar dados

Para ajudá-lo a criar um aplicativo New Relic, fornecemos o SDK New Relic One. Aqui você aprende a usar os componentes de consulta do SDK, que permitem fazer consultas e mutações via NerdGraph, nosso endpoint GraphQL.

Visão geral dos componentes

Baseamos nossos componentes de dados no React Apollo. O componente mais básico é NerdGraphQuery, que aceita qualquer GraphQL ou GraphQL AST gerado pela bibliotecagraphql-tag como parâmetro de consulta e um conjunto de variáveis de consulta passadas como variables. Ao longo desta consulta, criamos um conjunto adicional de consultas, que pode ser dividido em quatro grupos:

• Consulta usuário: Permitem consultar o usuário atual e suas contas associadas. Componentes nesta categoria: UserStorageQuery e AccountsQuery.
• Consulta entidade: Como New Relic é centrada na entidade, usamos a consulta para facilitar o acesso à sua entidade. Você pode contá-los, pesquisá-los, listá-los, consultá-los e adicioná-los aos favoritos. Componentes nesta categoria: EntityCountQuery, EntitySearchQuery, EntitiesByDomainTypeQuery, EntitiesByGuidsQuery, EntityByGuidQuery, EntityByNameQuery.
• Consulta de armazenamento: New Relic fornece um mecanismo de armazenamento simples que chamamos de NerdStorage. Os criadores do Nerdpack podem usá-lo para armazenar dados de configuração do aplicativo, dados específicos do usuário e outros pequenos dados. Esta categoria inclui estes componentes: UserStorageQuery, AccountStorageQuery, EntityStorageQuery, UserStorageMutation, AccountStorageMutation e EntityStorageMutation.
• Consulta NRQL: Para poder consultar seus dados New Relic via NRQL, disponibilizamos um componente NrqlQuery. Este componente pode retornar dados em diferentes formatos, para que você possa utilizá-los para gráficos e não apenas para consultas.

Componentes de consulta

Todos os componentes da consulta aceitam uma função como suporte filho, onde os diferentes status podem ser passados. Este retorno de chamada recebe um objeto com estas propriedades:

• loading: Booleano definido como verdadeiro quando a busca de dados está acontecendo. Nossos componentes usam a estratégia cache-and-network , o que significa que após o carregamento dos dados, as recargas de dados subsequentes podem ser acionadas primeiro com dados desatualizados e, em seguida, atualizadas quando os dados mais recentes chegarem.
• data: propriedade raiz onde os dados solicitados são recuperados. A estrutura corresponde a uma estrutura raiz baseada no esquema NerdGraph. Isso é verdade mesmo para estruturas de dados altamente aninhadas, o que significa que você terá que descer para encontrar os dados desejados.
• error: contém uma instância Error quando a consulta falha. Defina como undefined quando os dados estão sendo carregados ou a busca foi bem-sucedida.
• fetchMore: função de retorno de chamada que você pode usar quando a consulta está sendo carregada em partes. A função só estará presente quando for viável, quando mais dados estiverem disponíveis e nenhum fetchMore já tiver sido acionado. Os dados são carregados em lotes de 200 por padrão. Outros componentes fornecidos pela plataforma, como Dropdown ou List são capazes de aceitar fetchMore, o que significa que você pode combiná-los facilmente.

Componentes de mutação

Os componentes de mutação também aceitam filhos como função, como os de consulta. A mutação pode ser pré-configurada no nível do componente e uma função que você pode usar em seu componente é passada de volta.

Esta é a abordagem padrão do React Apollo para realizar mutações, mas talvez você ache mais fácil usar nosso método estático mutation adicionado ao componente. Mais sobre este tópico abaixo.

Métodos estáticos

Todos os componentes descritos também expõem um método estático para que possam ser usados de forma imperativa em vez de declarativa. Todos os componentes Query possuem um método Query estático e todos os componentes Mutation possuem um método mutation . Esses métodos estáticos aceitam os mesmos adereços de seu componente de consulta, mas passados como um objeto. Por exemplo:

// Declarative way (using components).
function renderAccountList() {
  return (
    <ul>
      <AccountsQuery>
        ({data, error}) => {
          if (error) {
            return <li>Failed to retrieve list: {error.message}</li>;
          }

          return data.map((account) => {
            <li key={account.id}>{account.name}</li>
          });
        }}
      </AccountsQuery>
    </ul>
  );
}

// Imperative way (using promises).
async function getAccountList() {
  let data = {};

  try {
    data = await AccountsQuery.query();
  } catch (error) {
    console.log('Failed to retrieve list: ' + error.message);
    return;
  }

  return data.actor.accounts.map((account) => {
    return account.name;
  });
}

Da mesma forma, uma mutação pode acontecer de qualquer maneira; seja declarativamente ou imperativamente.

NrqlQuery

NrqlQuery merece explicação adicional, porque existem vários formatos nos quais você pode retornar dados dele. Para fornecer funcionalidade máxima, todos os três são expostos por meio de uma propriedade formatType . Você pode encontrar seus diferentes valores em NrqlQuery.formatType:

• NERD_GRAPH: Retorna o formato em que chega do NerdGraph.
• RAW: o formato exposto por padrão nos Insights e no painel ao ser plotado como JSON. Este formato é útil se você tiver um script pré-existente neste formato para o qual deseja migrar ou incorporar.
• CHART: o formato usado pelo mecanismo de gráficos que também expomos.

Se você deseja enviar dados por push, atualmente não expomos NrqlMutation. Para fazer isso, consulte a APIdo evento para saber como adicionar um evento personalizado.