✦ Preact Dev GraphQL Studio

An executable local GraphQL workspace for schema discovery, document validation, variables, responses, and replayable history.

---

✨ Highlights

• Executable Schema: Builds the included SDL through the official graphql implementation and runs deterministic local resolvers.
• Schema Explorer: Searches object, input, enum, scalar, and interface types with field and return-type inspection.
• Operation Editor: Uses deferred CodeMirror loading for readable query editing with line wrapping and keyboard behavior.
• Document Validation: Parses and validates every operation against the active schema before execution.
• Variables: Parses a real JSON variables object and reports malformed or non-object input before running.
• Request Headers: Adds, enables, edits, and removes integration-ready header rows with duplicate-name validation.
• Response Inspection: Shows formatted data, GraphQL errors, execution time, and clipboard-ready JSON.
• Operation Formatting: Parses and prints the current document with the GraphQL formatter.
• Replay History: Retains the latest twenty complete local executions and restores query, variables, and response.
• Responsive Workflow: Provides Schema, Query, Response, and History views on compact screens and a three-pane desktop studio.

🧱 Project Structure

public/
|-- favicon.svg
|-- sample-graphql-workspace.json
`-- sample-operation.graphql
src/
|-- app.tsx
|-- main.tsx
|-- index.css
|-- components/
|   |-- code-editor.tsx
|   |-- history-panel.tsx
|   |-- operation-editor.tsx
|   |-- response-panel.tsx
|   |-- schema-explorer.tsx
|   `-- workspace-state.tsx
|-- domain/
|   `-- graphql-workspace.ts
`-- services/
    `-- graphql-store.ts

🛠️ Tech Stack

• Preact 10 with Vite 8
• TypeScript 6
• Tailwind CSS 4
• graphql, codemirror, @codemirror/lang-json, zod, idb-keyval, and lucide-preact

📦 Included Sample Data

public/sample-graphql-workspace.json contains a fictional commerce SDL, endpoint metadata, variables, and request headers. public/sample-operation.graphql provides a ready-to-run product search and health query.

🚀 Local Development

npm install
npm run dev

Open http://localhost:5173.

🔌 Extension Notes & Nuances

• Execution is local and deterministic. The displayed endpoint and headers are preserved integration metadata and are not sent over the network.
• Schema SDL is imported as part of the complete workspace rather than edited independently in the current UI.
• CodeMirror is loaded dynamically when the operation editor mounts, reducing work for other compact views.
• History retains the latest twenty executions and includes complete response data.
• Replace executeLocal with a Fetch adapter to call a remote endpoint; browser CORS and credential policies will then apply.
• The bundled token, endpoint, products, and order resolver are fictional and safe for demonstration.

🧪 Build & Checks

npm run format:check
npm run build
npm run preview

🌐 Vercel Deployment

The repository includes a Vite-ready vercel.json with SPA rewrites.

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "framework": "vite",
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

📄 License

MIT License. See LICENSE.