サンプルアプリに戻る
『SQL Explorer 実践ガイド』
Quicknode SQL Explorer を使用して、標準の SQL で Hyperliquid のオンチェーンデータをクエリします。
フロントエンドフレームワーク／ライブラリ：
React
言語：
TypeScript
ビルドツール／開発サーバー：
Next.js
概要
Quicknode SQL Explorerを使えば、標準の SQL を使ってオンチェーンデータをクエリできます。インデクサーもサブグラフも不要で、REST API と API キーさえあれば利用可能です。このサンプルアプリでは、SQL Explorer をフロントエンドに統合する方法を示しています。Hyperliquid のオンチェーンデータに対して実行可能な 40 以上のクエリが同梱されており、テーブルやグラフでの表示機能も備わっているため、結果を即座に確認できます。
建築
ブラウザ（Next.js フロントエンド）
-> /api/query（サーバーサイドプロキシルート）
-> Quicknode SQL Explorer REST API
-> 構造化された行を返す
-> テーブル表示 + チャートによる可視化
特長
- カテゴリー別に分類された40以上の既成クエリ：「取引」、「約定」、「注文」、「資金調達」、「市場」、「ポートフォリオとポジション」、「ステーキングと報酬」
- ウォレットアドレス、バリデーター、コインシンボルに対して動的な入力を用いたパラメータ化されたクエリ
- 結果表示の2つの形式— 並べ替え・ページネーション機能付きテーブル、および棒グラフ・折れ線グラフ・面グラフ・円グラフ
- コードスニペット— あらゆるクエリに対応した、SQL、curl、TypeScript、Pythonのコピー＆ペースト可能なコード
- ユースケースページ— バリデーター報酬、ウォレットのアクティビティ、および清算に関する詳細な実装
- サーバーサイドAPIプロキシ— バックエンドでAPIキーを安全に保護します
前提条件
- Node.js20以降
- SQLアプリケーションが有効になっているAPIキーを持つQuicknodeアカウント（こちらから作成してください）
プロジェクトの構成
src/
app/
api/query/route.ts # SQL Explorer API へのサーバーサイドプロキシ
explorer/page.tsx # クエリエクスプローラーページ
use-cases/
liquidations/page.tsx # 清算モニタリングのユースケース
validator-rewards/page.tsx # バリデーター報酬のユースケース
wallet-activity/page.tsx # ウォレットアクティビティのユースケース
components/
query/ # クエリ実行、結果テーブル、チャート、コードスニペット
ui/ # カテゴリフィルター、コピーボタン、テーマ切り替え
use-cases/ # インサイトバナー、統計ハイライト
data/queries.ts # 40以上の事前定義済みクエリ定義すべて
lib/
sql-explorer.ts # SQL Explorer API クライアント
snippets.ts # コードスニペットジェネレータ
chart-utils.ts # チャート設定ヘルパー
hooks/useQueryExecution.ts # クエリ実行フック
環境変数
QUICKNODE_API_KEY=ここにAPIキーを入力 # SQLが有効になっているQuicknode APIキー
QUICKNODE_SQL_ENDPOINT=https://api.quicknode.com/sql/rest/v1/query # SQL ExplorerのRESTエンドポイント
QUICKNODE_CLUSTER_ID=hyperliquid-core-mainnet # 対象クラスタID
はじめに
1. リポジトリをクローンする
git https://github.com/quiknode-labs/qn-guide-examples.git をクローンする
cd sample-dapps/sql-explorer-cookbook
2. 依存関係をインストールする
npm install
3. 環境変数の設定
cp .env.example .env.local
編集 .env.local QuicknodeのAPIキーとエンドポイントの詳細を指定してください。
4. 開発サーバーを起動する
npm run dev
http://localhost:3000を開いて、クエリの探索を始めましょう。
APIエンドポイント
POST /api/query— SQLクエリをQuicknode SQL ExplorerのREST APIに転送し、結果を返すサーバーサイドプロキシ
プレビュー
使用方法
- 出発点を選びましょう— ホームページにある3つのサンプルユースケース（「ウォレットのアクティビティ」、「バリデーター報酬」、「清算」）のいずれかを選択するか、エクスプローラーで40以上の事前作成済みクエリをすべて確認してください。
- クエリを実行する— 「実行」をクリックすると、Hyperliquidのオンチェーンデータに対してSQLが実行されます。結果は、並べ替え可能な表またはグラフとして表示されます。
- パラメータのカスタマイズ— 一部のクエリでは、ウォレットアドレス、バリデーター、コインシンボルなどの動的な入力を受け付けます。「サンプルを試す」をクリックして例となる値を入力し、再度実行してください。
- コードスニペットのコピー— 各クエリには、SQL、curl、TypeScript、Python形式の、そのままコピー＆ペーストできるコードが用意されています。
カスタムクエリの追加
に項目を追加する src/data/queries.ts:
{
id: "my-query",
title: "My Custom Query",
description: "Description of what this query does",
category: "Trading",
sql: `SELECT * FROM hyperliquid_trades LIMIT 10`,
chartConfig: { // optional
type: "bar",
xKey: "coin",
yKeys: ["volume_usd"],
},
}
投稿とフィードバック
皆様からのご意見をお待ちしております。また、このサンプルアプリへのご協力も大歓迎です！
問題の報告やフィードバックをお寄せいただくには、GitHubのイシューを qn-ガイド-例 リポジトリ。
投稿するには、以下の手順に従ってください：
- リポジトリをフォークする
- フィーチャーブランチを作成する：git checkout -b feature/amazing-feature
- 変更内容をコミットします：git commit -m "素晴らしい機能を追加"
- ブランチをプッシュしてください：git push origin feature/amazing-feature
- プルリクエストを作成してください。
その他のサンプルアプリを見る
