Ajouter le composant NerdGraphQuery à une application

Ce guide vous guide tout au long du processus d'ajout du composant NerdGraphQuery à un exemple d'application de présentation de transaction. Cela vous permet d'interroger les données de votre compte New Relic et de les ajouter à une liste déroulante.

NerdGraph est notre implémentation GraphQL. GraphQL présente quelques différences clés par rapport à REST :

C'est le client, et non le serveur, qui détermine les données renvoyées.
Vous pouvez facilement collecter des données à partir de plusieurs sources. Par exemple, dans une seule requête, vous pouvez obtenir des informations sur le compte, des données sur l'infrastructure et émettre une requête NRQL.

Important

Avant de terminer cet exercice, vous pouvez expérimenter la requête GraphQL dans notre explorateur d'API NerdGraph.

Nous avons également une vidéo de 14 minutes qui couvre les étapes ci-dessous.

Avant de commencer

Pour développer des projets, vous avez besoin de notre New RelicCLI (interface de ligne de commande). Si vous ne l'avez pas déjà installé, procédez comme suit :

Installez Node.js.
Suivez les étapes 1 à 4 de notre démarrage rapide CLI et assurez-vous de faire une copie de votre ID de compte de l’étape 1, car vous en aurez besoin plus tard.

Important

Si vous avez déjà installé la CLI New Relic, mais que vous ne vous souvenez pas de votre identifiant de compte, redémarrez le démarrage rapide de la CLI , puis cliquez sur la flèche vers le bas Get your API key. L'ID de compte est le numéro qui précède le nom de votre compte.

Pour plus de détails, consultez Configurer votre environnement de développement.

Préparez l'exemple de code

Pour commencer, procédez comme suit pour mettre à jour l'UUID (ID unique) de l'application et exécuter l'exemple d'application localement :

Si vous ne l'avez pas déjà fait, clonez les exemples d'applications à partir de notre référentiel GitHub pratique. Voici un exemple utilisant HTTPS :

bash

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

Passer au répertoire use-nerdgraph-nerdlet:

bash

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

Dans votre éditeur de texte préféré, ouvrez index.js.

Remplacez <ADD YOUR ACCOUNT ID> par votre identifiant de compte :

Important

Votre ID de compte est disponible dans le démarrage rapide de la CLI (voir Avant de commencer).

this.accountId = <ADD YOUR ACCOUNT ID>;

Accédez au répertoire /nr1-howto/use-nerdgraph :

bash

$cd ../..

Si c'est la première fois que vous exécutez ce code, exécutez la commande ci-dessous pour installer tous les modules requis :

bash

$npm install

Exécutez ces commandes pour mettre à jour l’UUID et diffuser l’exemple d’application :

bash

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

Une fois l’exemple d’application correctement diffusé, accédez à la page d’accueil locale de New Relic, cliquez sur Apps, puis sur Use NerdGraph.

Après avoir lancé l'application Use NerdGraph , vous voyez un dashboard qui donne un aperçu des transactions de votre compte.

Ajouter le composant `NerdGraphQuery`

Vous pouvez maintenant créer une liste déroulante pour changer le compte que l'application consulte. La première étape consiste à importer le composant NerdGraphQuery dans le fichier index.js de l'application.

Ajoutez le composant NerdGraphQuery dans le premier StackItem à l'intérieur du return dans le fichier 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>;

Le composant NerdGraphQuery prend un objet de requête qui indique la source à laquelle vous souhaitez accéder et les données que vous souhaitez renvoyer.

Ajoutez le code suivant à votre fichier index.js dans la méthode render :

Important

Dans la console du navigateur, vous pouvez voir les données de votre requête renvoyées dans un objet qui suit la même structure que l'objet de la requête initiale.

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

Pour prendre les données renvoyées par la requête NerdGraph et les afficher dans l'application, remplacez le return null dans le composant NerdGraphQuery actuel par cette instruction return :

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

Lorsque vous revenez au navigateur et affichez votre application, vous voyez un nouveau titre indiquant le nom de votre compte renvoyé par NerdGraph.

Comment utiliser `NerdGraphQuery.query`

À ce stade, vous avez implémenté le composant NerdGraphQuery avec la méthode render de l'application et affiché les données de retour dans l'application de présentation des transactions.

Voici ce que vous devez faire ensuite :

requête NerdGraph à l'intérieur de la méthode du cycle de vie componentDidMount .
Enregistrez les données renvoyées pour une utilisation ultérieure dans l'application.

Ce code prend la réponse de NerdGraph et s'assure que les résultats sont traités, stockés dans l'état de l'application et enregistrés dans la console du navigateur pour visualisation.

Ajoutez ce code dans le fichier index.js juste sous le 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); })
}

Une fois les données stockées dans l'état, affichez une sélection afin que l'utilisateur puisse modifier les comptes et mettre à jour l'application.

Pour ce faire, ajoutez ce code à index.js pour le deuxième StackItem dans l'instruction 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>
  );
}

Consultez les résultats de la requête NerdGraph

Une fois ces étapes terminées, examinez l’application dans votre navigateur et notez les éléments suivants :

Le menu déroulant affiche désormais les données renvoyées par le NerdGraphQuery.query et vous permet de sélectionner un compte.
Après avoir sélectionné un nouveau compte, l’application affiche les données de la nouvelle sélection.

Le fichier index.js final doit avoir un code similaire au code ci-dessous. Cet échantillon terminé se trouve dans votre 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>
        )
    }
}

Résumé

Maintenant que vous avez terminé toutes les étapes de cet exemple, vous avez réussi à interroger les données de votre compte à l'aide du composant NerdGraphQuery selon deux méthodes :

En utilisant le composant NerdGraphQuery dans la méthode de rendu de l'application, puis en transmettant les données renvoyées aux composants enfants.
Utilisation de la méthode NerdGraphQuery.query pour interroger les données avant le rendu de l'application.

Cette traduction automatique est fournie pour votre commodité.

Ajouter le composant NerdGraphQuery à une application

Important

Avant de commencer .css-21sua1{background:none;border:none;width:0;padding:0;}

Important

Préparez l'exemple de code

Important

Ajouter le composant NerdGraphQuery

Important

Comment utiliser NerdGraphQuery.query

Consultez les résultats de la requête NerdGraph

Résumé

Avant de commencer

Ajouter le composant `NerdGraphQuery`

Comment utiliser `NerdGraphQuery.query`