NerdStorage を使用してデータを追加、クエリ、変更する

NerdStorage は、New Relic 内でアクセス可能なドキュメントデータベースです。セッション間でドキュメントを変更、保存、取得することができます。

NerdStorage を使用すると、最大 64 KB の個別のドキュメントを作成したり、さまざまなドキュメントコレクションを作成したり、エンティティ、アカウント、またはユーザーレベルごとにデータを保存したりできます。

このガイドでは、NerdStorage にデータとドキュメントを追加する方法について説明します。

あなたが始める前に

このガイドでは、 APIキーとNew Relic CLI が必要です。

始めましょう

まず、NerdStorage アプリを New Relic 内で正常に実行します。

GitHub リポジトリからサンプルアプリケーションをクローンします。

New Relic CLI を使用してアプリケーション UUID を更新し、アプリケーションをローカルで実行します。

ターミナルで、 /nr1-how-to/use-nerdstorageディレクトリに切り替えます。
bash
```
$cd /nr1-how-to/use-nerdstorage
```
UUID を更新してアプリケーションを提供します。
bash
```
$nr1 update
$nr1 nerdpack:uuid -gf
$nr1 nerdpack:serve
```

アプリが正常に提供されると、ターミナルはNew Relicで実行中のアプリケーションを表示するための URL を返します。

URL を読み込みます。 Apps [アプリ]をクリックすると、 Your apps [あなたのアプリ]の下にUse Nerdstorage [Nerdstorage を使用する]アプリがリストされます。クリックしてアプリをリリースします。

NerdStorageにデータを追加する

アプリが New Relic 上で起動したら、アプリを準備してデータの追加を開始できます。

How To Use NerdStorage [NerdStorage アプリの使用方法]画面には、データを追加するためのフィールドがあるSaved to NerdStorage [NerdStorage に保存]ペインがあります。ただし、何かを入力するとエラーメッセージが表示されます。これは、 Userレベルでデータを保存するように設定する必要があるためです。これは、 UserStorageMutationコンポーネントの助けを借りて実行できます。

任意のテキストエディターでアプリケーションの./nerdlets/use-nerdstorage-nerdlet/index.jsファイルを開き、データの入力に使用されるTextFieldとButtonのコードを見つけます。 Button onClickプロパティは_addToNerdStorageと呼ばれるヘルパーメソッドを呼び出します。これを更新して、 UserStorageMutation

UserStorage NerdStorage コンポーネントにはcollectionとdocumentId必要です。アプリケーションのindex.jsファイル内のコンストラクターメソッドでは、提供されている変数を確認できます。 .jsファイルでは、次のようになります。

constructor(props) {
    super(props)
    this.collectionId = 'mycollection';
    this.documentId = 'learning-nerdstorage';
    this.state = {
        isOpen: true,
        storage: [],
        text: '',
    };
    this._addToNerdStorage = this._addToNerdStorage.bind(this);
    this._removeFromNerdStorage = this._removeFromNerdStorage.bind(this);
    this._deleteDocument = this._deleteDocument.bind(this);
}

index.jsファイルの先頭にあるimportステートメントにUserStorageMutationを追加してインポートします。

import { UserStorageMutation } from 'nr1';

次に、 _addToNerdStorageで始まる次のコードでヘルパーを更新します。

_addToNerdStorage(){
    const { text, storage } = this.state;
    storage.push(text);
    this.setState({storage}, () => {
        UserStorageMutation.mutate({
            actionType: UserStorageMutation.ACTION_TYPE.WRITE_DOCUMENT,
            collection: this.collectionId,
            documentId: this.documentId,
            document: { storage },
        })
        .then((res) => {
            this.setState({text: ''});
            Toast.showToast({ title: "NerdStorage Update.", type: Toast.TYPE.NORMAL });
        })
        .catch((err) => console.log(err));
    });
}

New Relic で実行中のHow To Use NerdStorage [NerdStorage アプリの使用方法]画面に戻り、ページを再読み込みします。
テキスト入力フィールドにテキストを追加し、チェックボタンをクリックします。これにより、NerdStorage が更新され、アプリ内でToast通知がトリガーされます。すると、入力したテキストがテキスト入力フィールドの下のテーブル行として表示されます。

NerdStorageからデータをクエリする

上のセクションで説明したようにデータストレージが機能するようになったら、アプリが NerdStorage からデータを適切に読み取れるようにする必要があります。そうしないと、アプリページから移動して戻るたびに、アプリが空の状態で再読み込みされます。これを行うには、 UserStorageQueryコンポーネントを追加し、 componentDidMountメソッドを更新します。

アプリケーションの./nerdlets/use-nerdstorage-nerdlet/index.jsファイル内のインポートステートメントにUserStorageQueryを追加してインポートします。

import { UserStorageMutation, UserStorageQuery } from 'nr1';

次に、次のcomponentDidMountメソッドをアプリケーションに追加します。

componentDidMount(){
    UserStorageQuery.query({
        collection: this.collectionId,
        documentId: this.documentId,
    })
    .then(({ data }) => {
        if(data !== null) {
            this.setState({storage: data.storage});
        }
    })
    .catch(err => console.log(err));
}

NerdStorage アプリに戻り、テキスト入力フィールドを使用してさらにいくつかの行を追加して変更をテストします。その後、アプリケーションを終了して再起動します。アプリケーションは、移動する前に入力したすべてのデータを読み込み、表示します。

NerdStorageでデータを変更する

アプリ内のテーブルに表示される各 NerdStorage エントリには、特定のエントリを更新するために使用できるゴミ箱ボタンがあります。ゴミ箱ボタンは、 _removeFromNerdStorageヘルパーメソッドを呼び出すことによって機能します。

このプロセスを機能させるには、 _removeFromNerdStorageのコードを更新します。

_removeFromNerdStorage(index, data){
    const { storage } = this.state;
    storage.pop(data);

    this.setState({storage}, () => {
        UserStorageMutation.mutate({
            actionType: UserStorageMutation.ACTION_TYPE.WRITE_DOCUMENT,
            collection: this.collectionId,
            documentId: this.documentId,
            document: { storage },
        })
        .then((res) => {
            Toast.showToast({ title: "NerdStorage Update.", type: Toast.TYPE.NORMAL });
        })
        .catch((err) => console.log(err));
    });
}

これを実行すると、ゴミ箱ボタンをクリックすると、関連付けられているアイテムが削除され、アプリが更新されて変更が反映されます。

NerdStorageからコレクションを削除する

ゴミ箱ボタンは特定のエントリを 1 つずつ削除するのに適した方法ですが、NerdStorage ドキュメント全体を一度に削除する機能も必要な場合があります。これを行うには、アプリにDelete Document [ドキュメントの削除]ボタンを追加します。

アプリケーションの終了タグGridの直前に新しいGridItemを追加します。新しいGridItemに次のコードを追加して、新しいボタンを表示します。

<Button
  onClick={() => this._deleteDocument()}
  type={Button.TYPE.DESTRUCTIVE}
  sizeType={Button.SIZE_TYPE.SMALL}
  iconType={Button.ICON_TYPE.INTERFACE__OPERATIONS__TRASH}
>
  Delete Document
</Button>;

新しいDelete Document [ドキュメントの削除]ボタンは_deleteDocumentヘルパーメソッドを呼び出すため、次のコードを使用してそれを更新する必要があります。

_deleteDocument(){
    this.setState({storage: []});
    UserStorageMutation.mutate({
        actionType: UserStorageMutation.ACTION_TYPE.DELETE_DOCUMENT,
        collection: this.collectionId,
        documentId: this.documentId,
    });
    Toast.showToast({ title: "NerdStorage Update.", type: Toast.TYPE.CRITICAL });
}

アプリケーションに戻ると、個別のゴミ箱ボタンと新しく追加されたDelete Document [ドキュメントの削除]ボタンの両方が表示されます。

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