Agregue el componente NerdGraphQuery a una aplicación

Esta guía lo guía a través del proceso de agregar el componente NerdGraphQuery a una aplicación de descripción general de transacciones de muestra. Esto le permite consultar datos de su cuenta New Relic y agregarlos a un menú desplegable.

NerdGraph es nuestra implementación GraphQL. GraphQL tiene algunas diferencias clave en comparación con REST:

El cliente, no el servidor, determina qué datos se devuelven.
Puede recopilar datos fácilmente de múltiples fuentes. Por ejemplo, en una sola consulta, puede obtener información de la cuenta, datos de la infraestructura y emitir una solicitud NRQL.

Importante

Antes de completar este ejercicio, puede experimentar con la consulta GraphQL en nuestro explorador API NerdGraph.

También tenemos un video de 14 minutos que cubre los pasos a continuación.

Antes de que empieces

Para desarrollar proyectos, necesita nuestro New RelicCLI (interfaz de línea de comando). Si aún no lo instaló, haga lo siguiente:

Instale Node.js.
Complete los pasos 1 a 4 de nuestro inicio rápido de CLI y cerciorar de hacer una copia de su ID de cuenta del paso 1 porque la necesitará más adelante.

Importante

Si ya instaló la CLI New Relic , pero no recuerda el ID de su cuenta, inicie el inicio rápido de la CLI nuevamente y luego haga clic en la flecha hacia abajo Get your API key. El ID de la cuenta es el número que precede al nombre de su cuenta.

Para obtener detalles adicionales, consulta Configura tu entorno de desarrollo.

Prepare el código de muestra

Para comenzar, complete estos pasos para actualizar el UUID (ID único) de la aplicación y ejecutar la aplicación de muestra localmente:

Si aún no lo hizo, clone la aplicación de ejemplo de nuestro repositorio de instrucciones de GitHub. Aquí hay un ejemplo usando HTTPS:

bash

$git clone https://github.com/newrelic/nr1-how-to.git

Cambie al directorio use-nerdgraph-nerdlet:

bash

$cd nr1-how-to/use-nerdgraph/nerdlets/use-nerdgraph-nerdlet

En su editor de texto preferido, abra index.js.

Reemplace <ADD YOUR ACCOUNT ID> con su ID de cuenta:

Importante

Su ID de cuenta está disponible en el inicio rápido de CLI (consulte Before you begin).

this.accountId = <ADD YOUR ACCOUNT ID>;

Cambie al directorio /nr1-howto/use-nerdgraph :

bash

$cd ../..

Si es la primera vez que ejecuta este código, ejecute el siguiente comando para instalar todos los módulos necesarios:

bash

$npm install

Ejecute estos comandos para actualizar el UUID y servir la aplicación de muestra:

bash

$nr1 update
$nr1 nerdpack:uuid -gf
$nr1 nerdpack:serve

Una vez que la aplicación de muestra se entregó correctamente, vaya a la página de inicio local de New Relic, haga clic en Apps y luego haga clic en Use NerdGraph.

Luego de iniciar la aplicación Use NerdGraph , verá un dashboard que brinda una descripción general de la transacción en su cuenta.

Agregue el componente `NerdGraphQuery`

Ahora puede crear un menú desplegable para cambiar la cuenta que está viendo la aplicación. El primer paso es importar el componente NerdGraphQuery al archivo index.js de la aplicación.

Agregue el componente NerdGraphQuery al primer StackItem dentro de return en el archivo index.js :

<NerdGraphQuery query={query} variables={variables}>
  {({ loading, error, data }) => {
    console.log({ loading, error, data });
    if (loading) {
      return <Spinner />;
    }
    if (error) {
      return 'Error!';
    }
    return null;
  }}
</NerdGraphQuery>;

El componente NerdGraphQuery toma un objeto de consulta que indica la fuente a la que desea acceder y los datos que desea que se devuelvan.

Agregue el siguiente código a su archivo index.js en el método render :

Importante

En la consola browser , puede ver los datos de su consulta devueltos en un objeto que sigue la misma estructura del objeto de la consulta inicial.

const query = `
    query($id: Int!) {
        actor {
            account(id: $id) {
                name
            }
        }
    }
`;

Para tomar los datos devueltos por la consulta NerdGraph y mostrarlos en la aplicación, reemplace el return null en el componente NerdGraphQuery actual con esta declaración return :

return <HeadingText>{data.actor.account.name} Apps:</HeadingText>;

Cuando regresa al browser y ve su aplicación, ve un nuevo título que muestra el nombre de su cuenta devuelto por NerdGraph.

Cómo emplear `NerdGraphQuery.query`

En este punto, implementó el componente NerdGraphQuery con el método render de la aplicación y mostró los datos de devolución dentro de la aplicación de descripción general de transacciones.

Esto es lo que debe hacer a continuación:

Consulte NerdGraph dentro del método de ciclo de vida componentDidMount .
Almacene los datos devueltos para su uso posterior en la aplicación.

Este código toma la respuesta de NerdGraph y se cerciora de que los resultados se procesen, se almacenen en el estado de la aplicación y se registren en la consola browser para verlos.

Agregue este código al archivo index.js justo debajo de constructor:

componentDidMount() {
    const accountId = this.state;
    const gql = `{ actor { accounts { id name } } }`;

    const accounts = NerdGraphQuery.query({query: gql}) //The NerdGraphQuery.query method called with the query object to get your account data is stored in the accounts variable.
    accounts.then(results => {
        console.log('Nerdgraph Response:', results);
        const accounts = results.data.actor.accounts.map(account => {
            return account;
        });
        const account = accounts.length > 0 && accounts[0];
        this.setState({ selectedAccount: account, accounts });
    }).catch((error) => { console.log('Nerdgraph Error:', error); })
}

Después de que los datos se almacenen en el estado, muestra una selección para que el usuario pueda cambiar de cuenta y actualizar la aplicación.

Para hacer esto, agregue este código a index.js para el segundo StackItem en la declaración return :

{
  accounts && (
    <StackItem>
      <Select
        value={selectedAccount}
        onChange={(evt, value) => this.selectAccount(value)}
      >
        {accounts.map((a) => {
          return (
            <SelectItem key={a.id} value={a}>
              {a.name}
            </SelectItem>
          );
        })}
      </Select>
    </StackItem>
  );
}

Revisar los resultados de la consulta NerdGraph

Luego de completar estos pasos, mire la aplicación en su browser y tenga en cuenta lo siguiente:

El menú desplegable ahora muestra los datos devueltos por NerdGraphQuery.query y le permite seleccionar una cuenta.
Luego de seleccionar una nueva cuenta, la aplicación muestra datos de la nueva selección.

El archivo index.js final debe tener un código similar al siguiente. Esta muestra completa está en tu nerdlet final.js.

import React from 'react';
import { PlatformStateContext, NerdGraphQuery, Spinner, HeadingText, Grid, GridItem, Stack, StackItem, Select, SelectItem, AreaChart, TableChart, PieChart } from 'nr1'
import { timeRangeToNrql } from '@newrelic/nr1-community';

// https://docs.newrelic.com/docs/new-relic-programmable-platform-introduction

export default class UseNerdgraphNerdletNerdlet extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            accountId: <YOUR ACCOUNT ID>,
            accounts: null,
            selectedAccount: null,
        }
    }

    componentDidMount() {
        const accountId = this.state;
        const gql = `{ actor { accounts { id name } } }`;

        const accounts =  NerdGraphQuery.query({ query: gql })
        accounts.then(results => {
            console.log('Nerdgraph Response:', results);
            const accounts = results.data.actor.accounts.map(account => {
                return account;
            });
            const account = accounts.length > 0 && accounts[0];
            this.setState({ selectedAccount: account, accounts });
        }).catch((error) => { console.log('Nerdgraph Error:', error); })
    }

    selectAccount(option) {
        this.setState({ accountId: option.id, selectedAccount: option });
    }


    render() {
        const { accountId, accounts, selectedAccount  } = this.state;
        console.log({ accountId, accounts, selectedAccount });

        const query = `
            query($id: Int!) {
                actor {
                    account(id: $id) {
                        name
                    }
                }
            }
        `;

        const variables = {
          id: accountId,
        };

        const avgResTime = `SELECT average(duration) FROM Transaction FACET appName TIMESERIES AUTO `;
        const trxOverview = `FROM Transaction SELECT count(*) AS 'Transactions', apdex(duration) AS 'apdex', percentile(duration, 99, 95) FACET appName `;
        const errCount = `FROM TransactionError SELECT count(*) AS 'Transaction Errors' FACET error.message `;
        const responseCodes = `SELECT count(*) AS 'Response Code' FROM Transaction FACET httpResponseCode `;

        return (
            <Stack
                fullWidth
                horizontalType={Stack.HORIZONTAL_TYPE.FILL}
                gapType={Stack.GAP_TYPE.EXTRA_LOOSE}
                spacingType={[Stack.SPACING_TYPE.MEDIUM]}
                directionType={Stack.DIRECTION_TYPE.VERTICAL}>
                <StackItem>
                    <NerdGraphQuery query={query} variables={variables}>
                        {({loading, error, data}) => {
                            if (loading) {
                                return <Spinner />;
                            }

                            if (error) {
                                return 'Error!';
                            }

                            return <HeadingText>{data.actor.account.name} Apps:</HeadingText>;
                        }}
                    </NerdGraphQuery>
                </StackItem>
                {accounts &&
                    <StackItem>
                        <Select value={selectedAccount} onChange={(evt, value) => this.selectAccount(value)}>
                        {accounts.map(a => {
                            return (
                              <SelectItem key={a.id} value={a}>
                                {a.name}
                              </SelectItem>
                            )
                        })}
                        </Select>
                    </StackItem>
                }
                <StackItem>
                <hr />
                    <PlatformStateContext.Consumer>
                    {(platformState) => {
                        /* Taking a peek at the platformState */
                        const since = timeRangeToNrql(platformState);
                        return (
                          <Grid
                          className="primary-grid"
                          spacingType={[Grid.SPACING_TYPE.NONE, Grid.SPACING_TYPE.NONE]}
                          >
                              <GridItem className="primary-content-container" columnSpan={6}>
                                  <main className="primary-content full-height">
                                  <HeadingText spacingType={[HeadingText.SPACING_TYPE.MEDIUM]} type={HeadingText.TYPE.HEADING_4}>
                                      Transaction Overview
                                  </HeadingText>
                                  <TableChart fullWidth accountId={accountId} query={trxOverview+since} />
                                  </main>
                              </GridItem>
                              <GridItem className="primary-content-container" columnSpan={6}>
                                  <main className="primary-content full-height">
                                  <HeadingText spacingType={[HeadingText.SPACING_TYPE.MEDIUM]} type={HeadingText.TYPE.HEADING_4}>
                                      Average Response Time
                                  </HeadingText>
                                  <AreaChart fullWidth accountId={accountId} query={avgResTime+since} />
                                  </main>
                              </GridItem>
                              <GridItem className="primary-content-container" columnSpan={6}>
                                  <main className="primary-content full-height">
                                  <HeadingText spacingType={[HeadingText.SPACING_TYPE.MEDIUM]} type={HeadingText.TYPE.HEADING_4}>
                                      Response Code
                                  </HeadingText>
                                  <PieChart fullWidth accountId={accountId} query={responseCodes+since} />
                                  </main>
                              </GridItem>
                              <GridItem className="primary-content-container" columnSpan={6}>
                                  <main className="primary-content full-height">
                                  <HeadingText spacingType={[HeadingText.SPACING_TYPE.MEDIUM]} type={HeadingText.TYPE.HEADING_4}>
                                      Transaction Errors
                                  </HeadingText>
                                  <PieChart fullWidth accountId={accountId} query={errCount+since} />
                                  </main>
                              </GridItem>
                          </Grid>
                        );
                    }}
                    </PlatformStateContext.Consumer>
                </StackItem>
            </Stack>
        )
    }
}

Resumen

Ahora que completó todos los pasos de este ejemplo, consultó correctamente los datos de su cuenta empleando el componente NerdGraphQuery de dos métodos:

Usar el componente NerdGraphQuery dentro del método de renderizado de la aplicación y luego pasar los datos devueltos a los componentes secundarios.
Usando el método NerdGraphQuery.query para consultar datos antes de que se procese la aplicación.

Te ofrecemos esta traducción automática para facilitar la lectura.

Agregue el componente NerdGraphQuery a una aplicación

Importante

Antes de que empieces .css-21sua1{background:none;border:none;width:0;padding:0;}

Importante

Prepare el código de muestra

Importante

Agregue el componente NerdGraphQuery

Importante

Cómo emplear NerdGraphQuery.query

Revisar los resultados de la consulta NerdGraph

Resumen

Antes de que empieces

Agregue el componente `NerdGraphQuery`

Cómo emplear `NerdGraphQuery.query`