NerdGraphQueryコンポーネントをアプリケーションに追加する

このガイドでは、サンプルのトランザクション概要アプリケーションにNerdGraphQueryコンポーネントを追加するプロセスを段階的に説明します。これにより、 New Relicアカウントからデータをクエリし、それを参加メニューに追加できるようになります。

NerdGraph は GraphQL 実装です。 GraphQL には、REST と比較するといくつかの重要な違いがあります。

返されるデータはサーバーではなくクライアントによって決定されます。
複数のソースからデータを簡単に収集できます。たとえば、1 回のクエリで、アカウント情報、インフラストラクチャデータを取得し、NRQL リクエストを発行できます。

重要

この演習を完了する前に、 NerdGraph API エクスプローラーで GraphQL クエリを試すことができます。

以下の手順を説明する 14 分間のビデオも用意されています。

あなたが始める前に

プロジェクトを開発するには、New RelicCLI (コマンドラインインターフェース) が必要です。まだインストールしていない場合は、次の手順に従ってください。

Node.js をインストールします。
CLI クイックスタートの手順 1 ～ 4 を完了し、後で必要になるので手順 1 のアカウント ID のコピーを必ず作成してください。

重要

New Relic CLI をすでにインストールしているが、アカウント ID を思い出せない場合は、CLI クイックスタートを再度起動し、Get your API key [API キーの取得] の下矢印をクリックします。アカウント ID は、アカウント名の前の番号です。

詳細については、開発環境のセットアップを参照してください。

サンプルコードを準備する

開始するには、次の手順を実行してアプリケーション UUID (一意ID)を更新し、サンプルアプリケーションをローカルで実行します。

まだ行っていない場合は、ハウツー GitHub リポジトリからサンプルアプリケーションをクローンしてください。 HTTPS を使用した例を次に示します。

bash

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

ディレクトリuse-nerdgraph-nerdletに変更します:

bash

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

好みのテキストエディターでindex.jsを開きます。

<ADD YOUR ACCOUNT ID>をアカウント ID に置き換えます:

重要

アカウント ID は CLI クイックスタートで確認できます ( 始める前にを参照)。

this.accountId = <ADD YOUR ACCOUNT ID>;

/nr1-howto/use-nerdgraphディレクトリに変更します:

bash

$cd ../..

このコードを初めて実行する場合は、以下のコマンドを実行して必要なモジュールをすべてインストールしてください。

bash

$npm install

次のコマンドを実行して UUID を更新し、サンプルアプリケーションを提供します。

bash

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

サンプルアプリケーションが正常に提供されたら、ローカルの New Relic ホームページに移動し、 Appsをクリックして、 Use NerdGraphをクリックします。

Use NerdGraphアプリケーションを起動すると、アカウント内のトランザクションの概要を示すダッシュボードが表示されます。

`NerdGraphQuery`コンポーネントを追加します

これで、アプリケーションが表示するアカウントを変更するためのドロップダウンメニューを作成できます。最初のステップは、 NerdGraphQueryコンポーネントをアプリケーションのindex.jsファイルにインポートすることです。

index.jsファイルのreturn内の最初のStackItemにNerdGraphQueryコンポーネントを追加します。

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

NerdGraphQueryコンポーネントは、アクセスするソースと返されるデータを指定するクエリオブジェクトを受け取ります。

renderメソッドのindex.jsファイルに次のコードを追加します。

重要

browserコンソールでは、最初のクエリのオブジェクトと同じ構造に従うオブジェクトで返されたクエリのデータを確認できます。

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

NerdGraph クエリによって返されたデータを取得してアプリケーションに表示するには、現在のNerdGraphQueryコンポーネントのreturn nullを次のreturnステートメントに置き換えます。

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

browserに戻ってアプリケーションを表示すると、NerdGraph から返されたアカウント名を示す新しい見出しが表示されます。

使い方 `NerdGraphQuery.query`

この時点で、アプリケーションのrenderメソッドを使用してNerdGraphQueryコンポーネントを実装し、トランザクション概要アプリケーション内で戻りデータを表示しました。

次に行う必要があるのは以下のとおりです。

componentDidMountライフサイクルメソッド内で NerdGraph をクエリします。
返されたデータをアプリケーションで後で使用するために保存します。

このコードは、NerdGraph からの応答を受け取り、結果が処理され、アプリケーション状態に保存され、表示のためにbrowserコンソールにログが記録されることを確認します。

このコードをconstructorのすぐ下のindex.jsファイルに追加します。

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

データが状態に保存された後、ユーザーがアカウントを変更してアプリケーションを更新できるように選択項目を表示します。

これを行うには、 returnステートメントの 2 番目のStackItemのindex.jsに次のコードを追加します。

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

NerdGraphクエリの結果を確認する

これらの手順を完了したら、 browserでアプリケーションを確認し、次の点に注意してください。

ドロップダウンメニューにNerdGraphQuery.queryから返されたデータが表示され、アカウントを選択できるようになりました。
新しいアカウントを選択すると、アプリケーションは新しい選択からのデータを表示します。

最終的なindex.jsファイルには、以下のコードと同様のコードが含まれている必要があります。この完成したサンプルは、あなたのナードレット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>
        )
    }
}

概要

この例のすべての手順を完了したので、次の 2 つの方法でNerdGraphQueryコンポーネントを使用してアカウントからデータを正常にクエリできました。

アプリケーションのレンダリングメソッド内でNerdGraphQueryコンポーネントを使用し、返されたデータを子コンポーネントに渡します。
アプリケーションがレンダリングされる前に、 NerdGraphQuery.queryメソッドを使用してデータをクエリします。

この機械翻訳は、参考として提供されています。

NerdGraphQueryコンポーネントをアプリケーションに追加する

重要

あなたが始める前に .css-21sua1{background:none;border:none;width:0;padding:0;}

重要

サンプルコードを準備する

重要

NerdGraphQueryコンポーネントを追加します

重要

使い方 NerdGraphQuery.query

NerdGraphクエリの結果を確認する

概要

あなたが始める前に

`NerdGraphQuery`コンポーネントを追加します

使い方 `NerdGraphQuery.query`