Retour aux exemples d'applications
Guide pratique de SQL Explorer
Interrogez les données on-chain d'Hyperliquid à l'aide de requêtes SQL standard via Quicknode SQL Explorer.
Framework/bibliothèque front-end :
Réagir
Langue :
TypeScript
Outil de compilation/serveur de développement :
Next.js
Aperçu
Quicknode SQL Explorer vous permet d'interroger les données sur la blockchain à l'aide de requêtes SQL standard — sans indexeurs ni sous-graphes, simplement grâce à une API REST et à votre clé API. Cette application d'exemple montre comment intégrer SQL Explorer dans une interface utilisateur ; elle est fournie avec plus de 40 requêtes prêtes à l'emploi sur les données Hyperliquid de la blockchain, accompagnées de vues sous forme de tableaux et de graphiques pour que vous puissiez visualiser immédiatement les résultats.
Architecture
Navigateur (front-end Next.js)
-> /api/query (route de proxy côté serveur)
-> API REST de Quicknode SQL Explorer
-> Renvoie des lignes structurées
-> Affichage sous forme de tableau + visualisation sous forme de graphique
Fonctionnalités
- Plus de 40 requêtes prédéfinies classées par catégorie : Trading, Exécutions, Ordres, Financement, Marchés, Portefeuille et positions, Staking et récompenses
- Requêtes paramétrées avec des entrées dynamiques pour les adresses de portefeuille, les validateurs et les symboles de cryptomonnaies
- Deux modes d'affichage des résultats: tableaux triables et paginés, et graphiques à barres, linéaires, en surface et circulaires
- Extraits de code — du code prêt à copier-coller en SQL, curl, TypeScript et Python pour chaque requête
- Pages consacrées aux cas d'utilisation — implémentations plus approfondies concernant les récompenses des validateurs, l'activité des portefeuilles et les liquidations
- Proxy API côté serveur — assure la sécurité de votre clé API au niveau du backend
Prérequis
- Node.js 20 et plus
- Un compte Quicknode doté d'une clé API pour laquelle l'application SQL est activée (créez-en un ici)
Structure du projet
src/
app/
api/query/route.ts # Proxy côté serveur vers l'API SQL Explorer
explorer/page.tsx # Page de l'explorateur de requêtes
use-cases/
liquidations/page.tsx # Cas d'utilisation de la surveillance des liquidations
validator-rewards/page.tsx # Cas d'utilisation des récompenses des validateurs
wallet-activity/page.tsx # Cas d'utilisation de l'activité du portefeuille
composants/
query/ # Exécuteur de requêtes, tableau de résultats, graphiques, extraits de code
ui/ # Filtre par catégorie, bouton de copie, bascule de thème
use-cases/ # Bannière « Insights », faits marquants des statistiques
data/queries.ts # Les plus de 40 définitions de requêtes prédéfinies
lib/
sql-explorer.ts # Client API de SQL Explorer
snippets.ts # Générateurs d’extraits de code
chart-utils.ts # Aides à la configuration des graphiques
hooks/useQueryExecution.ts # Hook d'exécution de requêtes
Variables d'environnement
QUICKNODE_API_KEY=votre_clé_API_ici # Clé API Quicknode avec SQL activé
QUICKNODE_SQL_ENDPOINT=https://api.quicknode.com/sql/rest/v1/query # Point de terminaison REST de SQL Explorer
QUICKNODE_CLUSTER_ID=hyperliquid-core-mainnet # ID du cluster cible
Démarrer
1. Cloner le dépôt
git clone https://github.com/quiknode-labs/qn-guide-examples.git
cd sample-dapps/sql-explorer-cookbook
2. Installer les dépendances
npm installer
3. Configurer les variables d'environnement
cp .env.example .env.local
Modifier .env.local en indiquant votre clé API Quicknode et les informations relatives au point de terminaison.
4. Démarrer le serveur de développement
npm exécuter en mode développement
Rendez-vous sur http://localhost:3000 pour commencer à explorer les requêtes.
Points de terminaison de l'API
POST /api/query— Proxy côté serveur qui transmet les requêtes SQL à l'API REST de Quicknode SQL Explorer et renvoie les résultats
Aperçu
Utilisation
- Choisissez un point de départ: sélectionnez l'un des trois exemples de cas d'utilisation (Activité du portefeuille, Récompenses des validateurs, Liquidations) sur la page d'accueil, ou explorez l'ensemble des plus de 40 requêtes prédéfinies dans l'explorateur.
- Lancer une requête — Cliquez sur « Exécuter » pour exécuter la requête SQL sur les données on-chain d'Hyperliquid. Les résultats s'affichent sous forme de tableau ou de graphique triable.
- Personnaliser les paramètres — Certaines requêtes acceptent des entrées dynamiques telles que des adresses de portefeuille, des validateurs ou des symboles de cryptomonnaies. Cliquez sur « Essayer l'exemple » pour remplir les champs avec des valeurs d'exemple, puis relancez la requête.
- Copier des extraits de code — Chaque requête fournit du code prêt à être copié-collé en SQL, curl, TypeScript et Python.
Ajout de requêtes personnalisées
Ajouter des entrées à 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"],
},
}
Contributions et commentaires
Nous serions ravis de connaître votre avis et nous vous invitons à contribuer à cette application d'exemple !
Pour signaler des problèmes ou faire part de vos commentaires, ouvrez un ticket GitHub dans le qn-guide-exemples référentiel.
Pour contribuer, procédez comme suit :
- Créer une branche du dépôt
- Créer une branche de fonctionnalité :git checkout -b feature/amazing-feature
- Validez vos modifications :git commit -m "Ajout d'une fonctionnalité géniale"
- Publiez votre branche :git push origin feature/amazing-feature
- Créez une Pull Request.
Découvrez d'autres exemples d'applications
