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を参照してください。