A modern, high-performance web-based GraphQL client built with React, Vite, Redux Toolkit, and Tailwind CSS.
- ⚡️ Live GraphQL Execution: Execute queries and mutations against any GraphQL endpoint.
- 🎨 Syntax Highlighting: Real-time syntax highlighting for GraphQL queries, variables, and JSON responses.
- 📖 Auto-Documentation (Introspection): Automatically fetches and navigates the API schema documentation based on the provided endpoint.
- 🕒 Query History: Automatically saves your run queries. Save your favorite queries, rename them, and click to load them back into the editor.
- ⚙️ Variables & Headers: Easily pass custom JSON variables and headers along with your queries.
- 💾 Local Storage Persistence: Your queries, variables, headers, and history are securely persisted in your browser's local storage.
- 🌓 Dark/Light Mode: First-class theme support.
- Framework: React 19 + Vite
- State Management: Redux Toolkit
- Styling: Tailwind CSS + styled-components
- Editor: CodeMirror 6 with GraphQL extensions
- UI Components: Radix UI + shadcn/ui
Make sure you have Node.js installed on your machine.
-
Clone the repository and navigate to the project directory:
git clone <repository-url> cd GraphQl_client
-
Install dependencies (using npm, yarn, or pnpm):
npm install
-
Start the development server:
npm run dev
-
Build for production:
npm run build
- Open the Settings panel to configure your target GraphQL endpoint (default is the Rick and Morty API).
- Write your query in the main Editor panel.
- Supply any necessary Variables or Headers in the bottom-left panel.
- Press the Play button (or
Ctrl+Enter) to execute the query. - View the response in the Output panel. Use the sidebar to browse your History or the auto-generated Docs.