Adicione o componente NerdGraphQuery a um aplicativo

Este guia orienta você no processo de adição do componente NerdGraphQuery a um exemplo de aplicativo de visão geral de transação. Isso permite que você consulte os dados da sua conta New Relic e adicione-os a um menu dropdown .

NerdGraph é nossa implementação GraphQL. GraphQL tem algumas diferenças importantes quando comparado ao REST:

O cliente, e não o servidor, determina quais dados serão retornados.
Você pode coletar facilmente dados de várias fontes. Por exemplo, em uma única consulta, você pode obter informações da conta, dados de infraestrutura e emitir uma solicitação NRQL.

Importante

Antes de concluir este exercício, você pode experimentar a consulta GraphQL em nosso NerdGraph API Explorer.

Também temos um vídeo de 14 minutos que aborda as etapas abaixo.

Antes de você começar

Para desenvolver projetos, você precisa da nossa New RelicCLI (interface de linha de comando). Se você ainda não o instalou, faça o seguinte:

Instale Node.js.
Conclua as etapas 1 a 4 do nosso início rápido da CLI e certifique-se de fazer uma cópia do ID da sua conta da etapa 1, pois você precisará dela mais tarde.

Importante

Se você já instalou o New Relic CLI, mas não consegue lembrar do ID da sua conta, inicie o início rápido do CLI novamente e clique na seta para baixo em Get your API key . O ID da conta é o número que precede o nome da sua conta.

Para detalhes adicionais, consulte Configurar seu ambiente de desenvolvimento.

Prepare o código de exemplo

Para começar, conclua estas etapas para atualizar o aplicativo UUID (ID único) e execute o aplicativo de amostra localmente:

Caso ainda não tenha feito isso, clone o aplicativo de exemplo em nosso repositório GitHub de instruções. Aqui está um exemplo usando HTTPS:

bash

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

Mude para o diretório use-nerdgraph-nerdlet:

bash

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

No seu editor de texto preferido, abra index.js.

Substitua <ADD YOUR ACCOUNT ID> pelo ID da sua conta:

Importante

O ID da sua conta está disponível no início rápido da CLI (consulte Before you begin).

this.accountId = <ADD YOUR ACCOUNT ID>;

Mude para o diretório /nr1-howto/use-nerdgraph :

bash

$cd ../..

Se esta for a primeira vez que você executa este código, execute o comando abaixo para instalar todos os módulos necessários:

bash

$npm install

Execute estes comandos para atualizar o UUID e servir o aplicativo de amostra:

bash

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

Depois que o aplicativo de amostra for atendido com êxito, acesse a página inicial local do New Relic, clique em Apps e, em seguida, clique em Use NerdGraph.

Após iniciar o aplicativo Use NerdGraph , você verá um dashboard que fornece uma visão geral da transação em sua conta.

Adicione o componente `NerdGraphQuery`

Agora você pode criar um menu dropdown para alterar a conta que o aplicativo está visualizando. A primeira etapa é importar o componente NerdGraphQuery para o arquivo index.js do aplicativo.

Adicione o componente NerdGraphQuery ao primeiro StackItem dentro de return no arquivo 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>;

O componente NerdGraphQuery utiliza um objeto de consulta que indica a origem que você deseja acessar e os dados que deseja retornar.

Adicione o seguinte código ao arquivo index.js no método render :

Importante

No console do browser, você pode ver os dados da sua consulta retornados em um objeto que segue a mesma estrutura do objeto da consulta inicial.

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

Para pegar os dados retornados pela consulta NerdGraph e exibi-los no aplicativo, substitua o return null no componente NerdGraphQuery atual por esta instrução return :

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

Ao voltar ao browser e visualizar seu aplicativo, você verá um novo título mostrando o nome da sua conta retornada do NerdGraph.

Como usar `NerdGraphQuery.query`

Neste ponto, você implementou o componente NerdGraphQuery com o método render do aplicativo e exibiu os dados de retorno no aplicativo de visão geral da transação.

Aqui está o que você precisa fazer a seguir:

Consulta NerdGraph dentro do método de ciclo de vida componentDidMount .
Salve os dados retornados para uso posterior no aplicativo.

Este código pega a resposta do NerdGraph e garante que os resultados sejam processados, armazenados no estado do aplicativo e registrados no console do browser para visualização.

Adicione este código ao arquivo index.js logo abaixo 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); })
}

Depois que os dados forem armazenados no estado, exiba uma seleção para que o usuário possa alterar as contas e atualizar o aplicativo.

Para fazer isso, adicione este código a index.js para o segundo StackItem na instrução 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>
  );
}

Revise os resultados da consulta NerdGraph

Depois de concluir essas etapas, observe o aplicativo em seu browser e observe o seguinte:

O menu dropdown agora exibe os dados retornados de NerdGraphQuery.query e permite selecionar uma conta.
Depois de selecionar uma nova conta, o aplicativo mostra os dados da nova seleção.

O arquivo index.js final deve ter um código semelhante ao código abaixo. Este exemplo completo está em seu 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>
        )
    }
}

Resumo

Agora que concluiu todas as etapas deste exemplo, você consultou com sucesso os dados da sua conta usando o componente NerdGraphQuery em dois métodos:

Usar o componente NerdGraphQuery dentro do método de renderização do aplicativo e depois passar os dados retornados para os componentes filhos.
Usando o método NerdGraphQuery.query para consultar dados antes da renderização do aplicativo.

Esta tradução de máquina é fornecida para sua comodidade.

Adicione o componente NerdGraphQuery a um aplicativo

Importante

Antes de você começar .css-21sua1{background:none;border:none;width:0;padding:0;}

Importante

Prepare o código de exemplo

Importante

Adicione o componente NerdGraphQuery

Importante

Como usar NerdGraphQuery.query

Revise os resultados da consulta NerdGraph

Resumo

Antes de você começar

Adicione o componente `NerdGraphQuery`

Como usar `NerdGraphQuery.query`