consultar y almacenar datos

Para ayudarlo a crear una aplicación New Relic, le proporcionamos el SDK New Relic One. Aquí podrás aprender a emplear los componentes de consulta del SDK, que te permiten realizar consultas y mutaciones a través de NerdGraph, nuestro extremo GraphQL.

Descripción general de los componentes

Basamos nuestros componentes de datos en React Apollo. El componente más básico es NerdGraphQuery, que acepta cualquier GraphQL o GraphQL AST generado por la bibliotecagraphql-tag como parámetro de consulta y un conjunto de variables de consulta pasadas como variables. Además de esta consulta, creamos un conjunto adicional de consultas, que se pueden dividir en cuatro grupos:

• Consulta de usuario: Permiten consultar al usuario actual y sus cuentas asociadas. Componentes de esta categoría: UserStorageQuery y AccountsQuery.
• entidad consulta: Debido a que New Relic está centrado en la entidad, empleamos consulta para facilitar el acceso a su entidad. Podrás contarlos, buscarlos, listarlos, consultarlos y marcarlos como favoritos. Componentes en esta categoría: EntityCountQuery, EntitySearchQuery, EntitiesByDomainTypeQuery, EntitiesByGuidsQuery, EntityByGuidQuery, EntityByNameQuery.
• Consulta de almacenamiento: New Relic proporciona un mecanismo de almacenamiento simple que llamamos NerdStorage. Los creadores de Nerdpack pueden usarlo para almacenar datos de configuración de la aplicación, datos específicos del usuario y otros pequeños datos. Esta categoría incluye estos componentes: UserStorageQuery, AccountStorageQuery, EntityStorageQuery, UserStorageMutation, AccountStorageMutation y EntityStorageMutation.
• Consulta NRQL: para poder consultar sus datos de New Relic a través de NRQL, proporcionamos un componente NrqlQuery. Este componente puede devolver datos en diferentes formatos, de modo que pueda usarlo para crear gráficos y no solo para realizar consultas.

Componentes de consulta

Todos los componentes de la consulta aceptan una función como accesorio secundario donde se pueden pasar los diferentes estados. Esta devolución de llamada recibe un objeto con estas propiedades:

• loading: booleano que se establece en verdadero cuando se obtienen datos. Nuestros componentes emplean la estrategia cache-and-network , lo que significa que después de que se cargaron los datos, las recargas de datos posteriores pueden activar primero con datos obsoletos y luego actualizar cuando lleguen los datos más recientes.
• data: Propiedad raíz donde se recuperan los datos aplicar. La estructura coincide con una estructura raíz basada en el esquema NerdGraph. Esto es cierto incluso para estructuras de datos altamente anidadas, lo que significa que tendrá que recorrer hacia abajo para encontrar los datos deseados.
• error: Contiene una instancia Error cuando la consulta falla. Establezca en undefined cuando los datos se estén cargando o la recuperación se realizó correctamente.
• fetchMore: Función de devolución de llamada que puede emplear cuando la consulta se carga en fragmentos. La función solo estará presente cuando sea factible hacerlo, haya más datos disponibles y aún no se activó ningún fetchMore . Los datos se cargan en lotes de 200 de forma predeterminada. Otros componentes proporcionados por la plataforma, como Dropdown o List son capaces de aceptar fetchMore, lo que significa que puedes combinarlos fácilmente.

Componentes de mutación

Los componentes de mutación también aceptan hijos como función, como los de consulta. La mutación se puede preconfigurar a nivel de componente y se devuelve una función que puede usar en su componente.

Este es el enfoque estándar de React Apollo para realizar mutaciones, pero puede que le resulte más fácil emplear nuestro método estático mutation agregado al componente. Más sobre este tema a continuación.

Métodos estáticos

Todos los componentes descritos también exponen un método estático para que puedan usar de manera imperativa en lugar de declarativa. Todos los componentes Query tienen un método Query estático y todos los componentes Mutation tienen un método mutation . Estos métodos estáticos aceptan los mismos accesorios que su componente de consulta, pero se pasan como un objeto. Por ejemplo:

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

De manera similar, una mutación puede ocurrir en cualquier sentido; ya sea de forma declarativa o imperativa.

NrqlQuery

NrqlQuery Merece una explicación adicional, porque existen múltiples formatos en los que puede devolver datos. Para proporcionar la máxima funcionalidad, los tres se exponen a través de una propiedad formatType . Puede encontrar sus diferentes valores en NrqlQuery.formatType:

• NERD_GRAPH: Devuelve el formato en el que llega desde NerdGraph.
• RAW: El formato expuesto por defecto en Insights y tablero cuando se traza como JSON. Este formato es útil si tiene un script preexistente en este formato al que desea migrar o incorporarlo.
• CHART:El formato empleado por el motor de gráficos que también exponemos. Puede encontrar una explicación más detallada de cómo manipular este formato en la guía de componentes del gráfico y algunos ejemplos.

Si está dispuesto a enviar datos, actualmente no exponemos NrqlMutation. Para hacerlo, consulte la APIde eventos para saber cómo agregar un evento personalizado.