TheGraphの始め方｜CLIの設定からReactで構築されたdAppのsubgraphを使用するまで
このページでは、ローカルテストネット（Ganacheを使用するなど）、メインネット、またはイーサリアムテストネット（Ropsten、Rinkeby、Kovan）のいずれかにデプロイしたコントラクトのsubgraphを作成する方法について説明します。
ローカル開発
このガイドでは、ローカル開発にTruffleとGanacheを使用しています。次の手順について説明します。
1 GanacheCLIを設定する
2 ローカルグラフノードを開始します
3 新しいサブグラフを初期化します
4 スマートコントラクトの例をGanacheにデプロイします
5サブグラフをローカルグラフノードにデプロイします
6 Reactで構築されたdAppでサブグラフを使用する
1. Ganache CLIを設定します
TruffleとGanacheをグローバルにインストールするには、ターミナルから次の2つのコマンドのいずれかを実行します。
# NPM
$ npm install -g truffle ganache-cli
# Yarn
$ yarn global add truffle ganache-cli
Ganacheをインストールすると、次のコマンドを実行できます。
$ ganache-cli -h 0.0.0.0
同じターミナルで。すべてにEtherを使用して10個のテストアカウントを作成します。-h 0.0.0.0 はDocker内および他のマシンからGanacheにアクセスできるようにするために必要であることに注意してください。デフォルトでは、Ganacheは127.0.0.1にのみバインドします。これは、Ganacheが実行されているホストマシンからのみアクセスできます。
注：サブグラフのテストにGanacheを使用すると、予期しない結果が生じる可能性があります。Ganacheはブロックチェーンの状態のスナップショットを取り、テストの実行中にチェーンをコントラクトのクリーンなデプロイに戻します。トリュフテストがこのように設定されている場合、ブロックチェーンがその状態をロールバックすることを期待していないため、グラフノードは捕捉されます。
また、テスト内でコントラクトの新しいインスタンスをデプロイし続けると、コントラクトアドレスはデプロイヤーからのコントラクトアドレスと一致しないため、subgraph.yamlマニフェストに追加する単一のアドレスはありません。ganacheがテストを実行している方法を完全に理解することをお勧めします。そうしないと、グラフノードがハンドラーを実行していないように見えます。
2.ローカルグラフノードを実行します
別のターミナルの場合：
1 グラフノードのクローン
$ git clone https://github.com/graphprotocol/graph-node/
2 グラフノードのDockerディレクトリを入力します。
$ cd graph-node/docker
3 これはLinuxユーザーのみを対象としています。グラフノードのDockerComposeセットアップでは、ホストマシンのエイリアスとしてhost.docker.internalを使用します。Linuxでは、これはまだサポートされていません。ホストIPアドレスに置き換えるには、Dockerディレクトリから次のコマンドを実行します。
./setup.sh
スクリプトはホストIPアドレスをに書き込みます。
docker-compose.yml
4 ホスト上のGanacheに接続するローカルグラフノードを開始します。
$ docker-compose up
3.新しいサブグラフを初期化します
npmまたはyarnを使用してGraphCLIをグローバルにインストールします。
# NPM
$ npm install -g @graphprotocol/graph-cli
# Yarn
$ yarn global add @graphprotocol/graph-cli
マシン上にサブグラフを作成するフォルダー内にいることを確認して、以下を実行します。
$ graph init --from-example <GITHUB_USERNAME>/<SUBGRAPH_NAME> [<DIRECTORY>]
<GITHUB_USERNAME>は必要で、それはあなたのGitHubユーザー名です
<SUBGRAPH_NAME>必要とされている。それはあなたのサブグラフプロジェクトの名前です
<DIRECTORY>オプションです。これは、サブグラフが作成されるディレクトリの名前です。デフォルトは<SUBGRAPH_NAME>。です。
これにより、独自のサブグラフを作成するための開始点として使用できるサンプルサブグラフが作成されます。サブグラフの作成方法の詳細については、サブグラフの定義に関するドキュメントセクションを確認してください。
4.スマートコントラクトの例をGanacheにデプロイします
graph initの手順3で実行した後、サブグラフがGanacheにインデックスを付けるサンプルスマートコントラクトをデプロイできます。
これを行うには、単に実行します
$ truffle compile
$ truffle migrate
手順3のサブグラフのルートディレクトリにあります。これにより、GravatarRegistryスマートコントラクトがコンパイルされ、Ganacheにデプロイされます。また、インデックスを作成するデータがあるように、コントラクトに対していくつかのトランザクションを実行します。
注： truffle migrate GravatarRegistryコントラクトがデプロイされているアドレスを出力します。この契約書は必ずコピーしてください。後で必要になります。
5.サブグラフをローカルグラフノードにデプロイします
サブグラフのルートディレクトリで、前の手順の契約アドレスをサブグラフに追加します。
$ sed -i -e \
's/0x2E645469f354BB4F5c8a05B3b30A929361cf77eC/<CONTRACT_ADDRESS>/g' \
subgraph.yaml
サブグラフの依存関係をインストールし、グラフCLIコード生成を実行します。
$ yarn && yarn codegen
次に、グラフノードにサブグラフ名を割り当てます。
$ yarn create-local
最後に、実行します
$ yarn deploy-local
サブグラフをローカルグラフノードにデプロイします。
処理中のログを確認したい場合は、グラフノードのターミナル出力を確認してください。エラーのトラブルシューティングについても同じです。
6. Reactで構築されたdAppでサブグラフを使用します
このために、別のターミナルを開きます。次に、このサブグラフと互換性のあるサンプルdAppのクローンを作成します。
$ git clone https://github.com/graphprotocol/ethdenver-dapp/
その後、appディレクトリに入り、サンプルサブグラフのGraphQLエンドポイントを使用するように構成します。
$ cd ethdenver-dapp
$ echo 'REACT_APP_GRAPHQL_ENDPOINT=http://localhost:8000/subgraphs/name/<GITHUB_USERNAME>/<SUBGRAPH_NAME>' > .env
最後に、dAppの依存関係をインストールして開始します。
$ yarn && yarn start
ホステッドサービス
このセクションでは、サブグラフをホステッドサービスにデプロイする方法について説明します。Graph Explorerにアカウントをお持ちでない場合は、GitHubにサインアップできます。
アカウントを作成したら、UIを使用してサブグラフの作成を開始し、ターミナルからサブグラフを展開できます。Graph Nodeは、メインネットに加えて、多数のイーサリアムテストネット（Rinkeby、Ropsten、Kovan）をサポートしています。
まず、ダッシュボードに移動し、[サブグラフの追加]をクリックします。オプションの画像を選択して、サブグラフの名前を定義できます。完了したら、[保存]をクリックすると、展開されていない新しいサブグラフがダッシュボードに表示されます。
このサブグラフを作成して展開するには、次の手順を実行します。
1 YarnまたはNPMを使用して、GraphCLIをマシンにグローバルにインストールします。
$ npm install -g @graphprotocol/graph-cli
$ yarn global add @graphprotocol/graph-cli
出発点として使用できるサブグラフの例を用意しました。次のコマンドを実行して設定できます。
$ graph init --from-example <GITHUB_USERNAME>/<SUBGRAPH_NAME> <DIRECTORY>
<GITHUB_USERNAME>が必要です。それはあなたのGitHubユーザー名です
<SUBGRAPH_NAME>必要とされている。それはあなたのサブグラフプロジェクトの名前です。
<DIRECTORY>オプションです。これは、サブグラフが作成されるディレクトリの名前です。デフォルトは<SUBGRAPH_NAME>。です。
前のコマンドは、ホステッドサービスで認証する方法、およびサブグラフを準備してデプロイする方法に関する指示を出力します。次にこれらに従ってください。
注：組織に代わってサブグラフを作成する場合、アクセストークンを取得するには管理者である必要があります。メンバーが1人だけの場合は、管理者に連絡してください。
これで、サブグラフのインデックス作成を監視し、グラフエクスプローラーのGraphQLプレイグラウンドを介して操作できます。
https://thegraph.com/exporer/subgraph/<GITHUB_USERNAME>/<SUBGRAPH_NAME>/
Reactで構築されたdAppのサブグラフを使用します
このために、ターミナルを開きます。次に、このサブグラフと互換性のあるサンプルdAppのクローンを作成します。
$ git clone https://github.com/graphprotocol/ethdenver-dapp/
その後、appディレクトリに入り、サンプルサブグラフのGraphQLエンドポイントを使用するように構成します。
$ cd ethdenver-dapp
$ echo 'REACT_APP_GRAPHQL_ENDPOINT=https://api.thegraph.com/subgraphs/name/<GITHUB_USERNAME>/<SUBGRAPH_NAME>' > .env
最後に、dAppの従属関係をインストールして開始します。
$ yarn && yarn start
この記事が気に入ったらサポートをしてみませんか？