SubgraphのデプロイからGraphQLエンドポイントの使用について｜URQLを使用してSubgraphからデータをフェッチする方法

SubgraphをSubgraphStudioにデプロイするのは非常に簡単です。これにより、次の手順を実行できます。

Graph CLIをインストールします（yarnとnpmの両方を使用）
SubgraphStudioでサブグラフを作成します
CLIからアカウントを認証します
サブグラフをサブグラフスタジオにデプロイする

GraphCLIのインストール

同じCLIを使用して、サブグラフをレガシーエクスプローラーとサブグラフスタジオにデプロイしています。graph-cliをインストールするためのコマンドは次のとおりです。これは、npmまたはyarnを使用して実行できます。

yarnでインストール：

yarn global add @graphprotocol/graph-cli

npmでインストール：

npm install -g @graphprotocol/graph-cli

Subgraph Studioでサブグラフを作成する

実際のサブグラフを展開する前に、SubgraphStudioでサブグラフを作成する必要があります。詳細については、Studioのドキュメントを読むことをお勧めします。

サブグラフを初期化します

Subgraph Studioでサブグラフを作成したら、次のコマンドを使用してサブグラフコードを初期化できます。

graph init --studio <SUBGRAPH_SLUG>

<SUBGRAPH_SLUG>値がサブグラフStudioであなたのサブグラフの詳細ページで確認できます。

graph initを実行した後、照会するコントラクトアドレス、ネットワーク、およびabiを入力するように求められます。これを行うと、サブグラフでの作業を開始するための基本的なコードを含む新しいフォルダーがローカルマシンに生成されます。次に、サブグラフを完成させて、期待どおりに機能することを確認できます。

グラフ認証

サブグラフをSubgraphStudioにデプロイする前に、CLI内でアカウントにログインする必要があります。これを行うには、「マイサブグラフ」ページまたはサブグラフの詳細ページにあるデプロイキーが必要になります。

CLIからの認証に使用する必要のあるコマンドは次のとおりです。

graph auth --studio <DEPLOY KEY>

SubgraphをSubgraphStudioにデプロイする

準備ができたら、サブグラフをSubgraphStudioにデプロイできます。これを行っても、サブグラフは分散型ネットワークに公開されません。サブグラフは、テストしてメタデータを更新できるStudioアカウントにのみデプロイされます。

サブグラフを展開するために使用する必要があるCLIコマンドは次のとおりです。

graph deploy --studio <SUBGRAPH_SLUG>

このコマンドを実行すると、CLIはバージョンラベルを要求します。好きなように名前を付けることができます。やなどのラベルを使用したり、などの文字を使用0.1し0.2たりできますuniswap-v2-0.1。これらのラベルはグラフエクスプローラーに表示され、キュレーターがこのバージョンで通知するかどうかを決定するために使用できるため、賢明に選択してください。

デプロイしたら、プレイグラウンドを使用してSubgraph Studioでサブグラフをテストし、必要に応じて別のバージョンをデプロイし、メタデータを更新し、準備ができたら、サブグラフをグラフエクスプローラーに公開できます。

分散型ネットワークにサブグラフを公開する

サブグラフがSubgraphStudioにデプロイされ、テストが完了し、本番環境に移行する準備ができたら、分散型ネットワークに公開できます。

サブグラフを分散型ネットワークに公開すると、キュレーターがサブグラフのキュレーションを開始し、インデクサーがサブグラフのインデックス作成を開始できるようになります。

分散型ネットワークにサブグラフを公開する方法のウォークスルーについては、このビデオを参照してください。

ネットワーク

分散型ネットワークは現在、RinkebyとEthereumMainnetの両方をサポートしています。

サブグラフの公開

サブグラフは、[公開]ボタンをクリックして、SubgraphStudioダッシュボードから直接分散型ネットワークに公開できます。サブグラフが公開されると、グラフエクスプローラーで表示できるようになります。

Rinkebyに公開されたサブグラフは、RinkebyネットワークまたはEthereumMainnetのいずれかからデータにインデックスを付けてクエリを実行できます。

イーサリアムメインネットに公開されたサブグラフは、イーサリアムメインネットからのデータのインデックス作成とクエリのみを実行できます。つまり、テストネットデータのインデックス作成とクエリを行うメインの分散型ネットワークにサブグラフを公開することはできません。

既存のサブグラフの新しいバージョンを公開する場合、上記と同じルールが適用されます。

公開されたサブグラフのメタデータを更新する

サブグラフが分散型ネットワークに公開されたら、サブグラフのSubgraph Studioダッシュボードで更新を行うことにより、いつでもメタデータを変更できます。変更を保存してネットワークに更新を公開すると、グラフエクスプローラーに反映されます。デプロイメントが変更されていないため、これによって新しいバージョンが作成されることはありません。

グラフのクエリ

サブグラフがデプロイされたら、グラフエクスプローラーにアクセスしてGraphiQLインターフェースを開きます。ここで、クエリを発行してスキーマを表示することにより、サブグラフ用にデプロイされたGraphQLAPIを探索できます。

以下に例を示しますが、サブグラフのエンティティをクエリする方法の完全なリファレンスについては、クエリAPIを参照してください。

例

このクエリは、マッピングが作成したすべてのカウンターを一覧表示します。作成するのは1つだけなので、結果には1つだけが含まれますdefault-counter。

{
 counters {
   id
   value
 }
}

グラフエクスプローラーの使用

分散グラフエクスプローラーに公開された各サブグラフには、サブグラフの詳細ページに移動して右上隅の[クエリ]ボタンをクリックすると見つけることができる一意のクエリURLがあります。これにより、サブグラフの一意のクエリURLと、そのクエリ方法に関するいくつかの指示が表示されるサイドペインが開きます。

お気づきのとおり、このクエリURLは一意のAPIキーを使用する必要があります。APIキーは、SubgraphStudioの[ APIキー]セクションで作成および管理できます。Subgraph Studioの使用方法について詳しくは、こちらをご覧ください。

APIキーを使用してサブグラフをクエリすると、GRTで支払われるクエリ料金が生成されます。請求について詳しくは、こちらをご覧ください。

[プレイグラウンド]タブのGraphQLプレイグラウンドを使用して、グラフエクスプローラー内のサブグラフをクエリすることもできます。

アプリケーションからのクエリ

サブグラフがSubgraphStudioまたはGraphExplorerにデプロイされると、次のようなGraphQLAPIのエンドポイントが提供されます。

サブグラフスタジオ（テストエンドポイント）

Queries (HTTP)
https://api.studio.thegraph.com/query/<ID>/<SUBGRAPH_NAME>/<VERSION>

グラフエクスプローラー

Queries (HTTP)
https://gateway.thegraph.com/api/<API_KEY>/subgraphs/id/<SUBGRAPH_ID>

GraphQLエンドポイントを使用すると、さまざまなGraphQLクライアントライブラリを使用してサブグラフをクエリし、サブグラフによってインデックス付けされたデータをアプリに入力できます。

エコシステムで人気のあるGraphQLクライアントのいくつかとその使用方法を次に示します。

Apolloクライアント

Apolloクライアントは、ReactやVueなどのフレームワークを含むWebプロジェクト、およびiOS、Android、ReactNativeなどのモバイルクライアントをサポートします。WebプロジェクトでApolloクライアントを使用してサブグラフからデータをフェッチする方法を見てみましょう。

まず、インストール@apollo/clientしてgraphql：

npm install @apollo/client graphql

次に、次のコードを使用してAPIをクエリできます。

import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

const APIURL = "https://api.studio.thegraph.com/query//<SUBGRAPH_NAME>/";

const tokensQuery = `
 query {
   tokens {
     id
     tokenID
     contentURI
     metadataURI
   }
 }
`

const client = new ApolloClient({
 uri: APIURL,
 cache: new InMemoryCache()
});

client.query({
 query: gql(tokensQuery)
})
.then(data => console.log("Subgraph data: ", data))
.catch(err => { console.log("Error fetching data: ", err) });

変数を使用variablesするには、クエリに引数を渡すことができます。

const tokensQuery = `
 query($first: Int, $orderBy: BigInt, $orderDirection: String) {
   tokens(
     first: $first, orderBy: $orderBy, orderDirection: $orderDirection
   ) {
     id
     tokenID
     contentURI
     metadataURI
   }
 }
`

client.query({
 query: gql(tokensQuery),
 variables: {
   first: 10, orderBy: "createdAtTimestamp", orderDirection: "desc"
 }
})
.then(data => console.log("Subgraph data: ", data))
.catch(err => { console.log("Error fetching data: ", err) });

URQL 

別のオプションは、URQL、やや軽量GraphQLクライアントライブラリ。

WebプロジェクトでURQLを使用してサブグラフからデータをフェッチする方法を見てみましょう。

まず、urql graphqlをインストールします。

npm install urql graphql

次に、次のコードを使用してAPIをクエリできます。

import { createClient } from 'urql';

const APIURL = "https://api.thegraph.com/subgraphs/name/username/subgraphname";

const tokensQuery = `
 query {
   tokens {
     id
     tokenID
     contentURI
     metadataURI
   }
 }
`

const client = createClient({
 url: APIURL
});

const data = await client.query(tokensQuery).toPromise();

Deploy a Subgraph to the Subgraph Studio | Graph Docs

Publish a Subgraph to the Decentralized Network | Graph Docs

Query The Graph | Graph Docs

Querying from An Application | Graph Docs