GraphQL Client

A modern, high-performance web-based GraphQL client built with React, Vite, Redux Toolkit, and Tailwind CSS.

Features

• ⚡️ 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.

Tech Stack

• 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

Getting Started

Prerequisites

Make sure you have Node.js installed on your machine.

Installation

1. Clone the repository and navigate to the project directory:

   git clone <repository-url>
   cd GraphQl_client

2. Install dependencies (using npm, yarn, or pnpm):

   npm install

3. Start the development server:

   npm run dev

4. Build for production:

   npm run build

Usage

1. Open the Settings panel to configure your target GraphQL endpoint (default is the Rick and Morty API).
2. Write your query in the main Editor panel.
3. Supply any necessary Variables or Headers in the bottom-left panel.
4. Press the Play button (or Ctrl+Enter) to execute the query.
5. View the response in the Output panel. Use the sidebar to browse your History or the auto-generated Docs.