샘플 앱으로 돌아가기
SQL Explorer Cookbook
Query Hyperliquid on-chain data with standard SQL using Quicknode SQL Explorer.
프론트엔드 프레임워크/라이브러리:
React
언어:
TypeScript
빌드 도구/개발 서버:
Next.js
개요
Quicknode SQL Explorer lets you query on-chain data with standard SQL — no indexers, no subgraphs, just a REST API and your API key. This sample app demonstrates how to integrate SQL Explorer into a frontend, shipping with 40+ ready-to-run queries against Hyperliquid on-chain data with table and chart views so you can see results immediately.
건축
Browser (Next.js frontend)
-> /api/query (server-side proxy route)
-> Quicknode SQL Explorer REST API
-> Returns structured rows
-> Table view + Chart visualization
주요 기능
- 40+ pre-built queries organized by category: Trading, Fills, Orders, Funding, Markets, Portfolio & Positions, Staking & Rewards
- Parameterized queries with dynamic inputs for wallet addresses, validators, and coin symbols
- Dual result views — sortable/paginated tables and bar/line/area/pie charts
- Code snippets — copy-paste ready code in SQL, curl, TypeScript, and Python for every query
- Use-case pages — deeper implementations for validator rewards, wallet activity, and liquidations
- Server-side API proxy — keeps your API key secure on the backend
필수 조건
- Node.js 20+
- A Quicknode account with an API key that has the SQL application enabled (create one here)
프로젝트 구조
src/
app/
api/query/route.ts # Server-side proxy to SQL Explorer API
explorer/page.tsx # Query explorer page
use-cases/
liquidations/page.tsx # Liquidation monitoring use case
validator-rewards/page.tsx # Validator rewards use case
wallet-activity/page.tsx # Wallet activity use case
components/
query/ # Query runner, results table, charts, code snippets
ui/ # Category filter, copy button, theme toggle
use-cases/ # Insights banner, stat highlights
data/queries.ts # All 40+ pre-built query definitions
lib/
sql-explorer.ts # SQL Explorer API client
snippets.ts # Code snippet generators
chart-utils.ts # Chart configuration helpers
hooks/useQueryExecution.ts # Query execution hook
환경 변수
QUICKNODE_API_KEY=your_api_key_here # Quicknode API key with SQL enabled
QUICKNODE_SQL_ENDPOINT=https://api.quicknode.com/sql/rest/v1/query # SQL Explorer REST endpoint
QUICKNODE_CLUSTER_ID=hyperliquid-core-mainnet # Target cluster ID
시작하기
1. Clone the repository
git clone https://github.com/quiknode-labs/qn-guide-examples.git
cd sample-dapps/sql-explorer-cookbook
2. 종속성 설치
npm 설치
3. Configure environment variables
cp .env.example .env.local
Edit .env.local with your Quicknode API key and endpoint details.
4. Start the development server
npm run dev
Open http://localhost:3000 to start exploring queries.
API Endpoints
POST /api/query— Server-side proxy that forwards SQL queries to the Quicknode SQL Explorer REST API and returns results
미리 보기
사용법
- Pick a starting point — Choose one of the 3 sample use cases (Wallet Activity, Validator Rewards, Liquidations) from the home page, or explore all 40+ pre-built queries in the explorer.
- Run a query — Click run to execute the SQL against Hyperliquid on-chain data. Results appear as a sortable table or chart.
- Customize parameters — Some queries accept dynamic inputs like wallet addresses, validators, or coin symbols. Click Try sample to populate example values, then re-run.
- Copy code snippets — Each query provides copy-paste ready code in SQL, curl, TypeScript, and Python.
Adding Custom Queries
Add entries to 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
- 풀 리퀘스트를 제출하세요.
더 많은 샘플 앱 살펴보기
