データのクエリと保存

New Relic アプリケーションの構築を支援するために、New Relic One SDK を提供しています。ここでは、GraphQL インターフェースであるNerdGraphを介してクエリとミューテーションを実行できる SDK クエリコンポーネントの使用方法を学習できます。

ヒント

クエリ関連の React コンポーネントは、 Queryサフィックスで識別できます。変異関連のコンポーネントは、 Mutationプレフィックスによって識別できます。

コンポーネントの概要

私たちのデータコンポーネントはReact Apolloに基づいています。最も基本的なコンポーネントはNerdGraphQueryで、これはgraphql-tagライブラリによって生成された任意の GraphQL または GraphQL AST をクエリ引数として受け入れ、クエリ変数のセットをvariablesとして渡します。このクエリに対して、次の 4 つのグループに分けられる追加のクエリセットを作成しました。

ユーザークエリ: 現在のユーザーとそれに関連付けられたアカウントをクエリできます。このカテゴリのコンポーネント: UserStorageQueryおよびAccountsQuery 。
エンタープライズクエリ: New Relicはエンタープライズ中心であるため、クエリを使用してエンタープライズへのアクセスを容易にします。カウント、検索、リスト、クエリ、お気に入りへの追加が可能です。このカテゴリのコンポーネント: EntityCountQuery 、 EntitySearchQuery 、 EntitiesByDomainTypeQuery 、 EntitiesByGuidsQuery 、 EntityByGuidQuery 、 EntityByNameQuery 。
ストレージクエリ: New Relic は、 NerdStorageと呼ばれるシンプルなストレージメカニズムを提供します。 Nerdpack の作成者は、これを使用して、アプリケーション構成設定データ、ユーザー固有のデータ、およびその他の小さなデータを保存できます。このカテゴリには、次のコンポーネントが含まれます: UserStorageQuery 、 AccountStorageQuery 、 EntityStorageQuery 、 UserStorageMutation 、 AccountStorageMutation 、およびEntityStorageMutation 。
NRQLクエリ :New Relic NRQL経由でデータをクエリできるように、NrqlQuery コンポーネントを提供します。このコンポーネントはさまざまな形式でデータを返すことができるため、クエリだけでなくグラフ作成にも使用できます。

クエリの構成要素

すべてのクエリコンポーネントは、さまざまなステータスを渡すことができる関数を children プロパティとして受け入れます。このコールバックは、次のプロパティを持つオブジェクトを受け取ります。

loading: データ取得が行われているときに true に設定されるブール値。当社のコンポーネントはcache-and-network戦略を使用します。つまり、データが読み込まれた後、後続のデータの再読み込みは最初に古いデータでトリガーされ、最新のデータが到着したときに更新される可能性があります。
data: 要求されたデータが取得されるルートプロパティ。構造は、NerdGraph スキーマに基づくルート構造と一致します。これは、高度にネストされたデータ構造の場合でも当てはまり、目的のデータを見つけるには下方向にトラバースする必要があります。
error: クエリが失敗した場合はErrorインスタンスが含まれます。データの読み込み中またはフェッチが成功した場合はundefinedに設定されます。
fetchMore: クエリがチャンクでロードされるときに使用できるコールバック関数。この関数は、実行可能であり、さらにデータが利用可能であり、 fetchMoreがまだトリガーされていない場合にのみ存在します。デフォルトでは、データは 200 個ずつバッチでロードされます。 DropdownやListなど、プラットフォームによって提供される他のコンポーネントはfetchMoreを受け入れることができるため、簡単に組み合わせることができます。

突然変異の構成要素

ミューテーションコンポーネントも、クエリコンポーネントと同様に、子を関数として受け入れます。ミューテーションはコンポーネントレベルで事前に構成することができ、コンポーネントで使用できる関数が返されます。

これは、変更を実行するための標準的な React Apollo アプローチですが、コンポーネントに追加された静的mutationメソッドを使用する方が簡単だと感じるかもしれません。このトピックの詳細については以下を参照してください。

静的メソッド

説明したすべてのコンポーネントは静的メソッドも公開しているため、宣言的ではなく命令的に使用できます。すべてのQueryコンポーネントには静的Queryメソッドがあり、すべてのMutationコンポーネントにはmutationメソッドがあります。これらの静的メソッドは、クエリコンポーネントと同じプロパティを受け入れますが、オブジェクトとして渡されます。例えば：

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

同様に、突然変異は宣言的または命令的のどちらの方法でも発生する可能性があります。

Nrqlクエリ

NrqlQuery そこからデータを返すことができる形式が複数あるため、追加の説明が必要です。最大限の機能を提供するために、これら 3 つすべてがformatTypeプロパティを通じて公開されます。さまざまな値はNrqlQuery.formatTypeで確認できます。

NERD_GRAPH: NerdGraph から受信した形式を返します。
RAW: JSON としてプロットされるときに、インサイトとダッシュボードでデフォルトで公開される形式。この形式は、この形式の既存のスクリプトがあり、それを移行または組み込む場合に便利です。
CHART: チャート作成エンジンで使用される形式であり、これも公開されています。

データをプッシュする場合でも、現時点ではNrqlMutationは公開されません。これを行うには、カスタムイベントを追加する方法については、イベントAPIを参照してください。

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

ヒント

コンポーネントの概要 .css-21sua1{background:none;border:none;width:0;padding:0;}

クエリの構成要素

突然変異の構成要素

静的メソッド

Nrqlクエリ

コンポーネントの概要