A Professional GraphQL Workspace for Shopify Developers
Shopify ships a single-tab GraphQL editor inside the Admin. It covers the basics. iGraphQL was built for the work that comes after basics — bulk data operations, multi-user teams, persistent workspaces, and an editor that actually knows your schema.
Prologue
The pilgrim who sets out without tools finds the road longer than it need be.
Every Shopify developer reaches the same moment: a query to write, a schema to understand, a bulk export to run, a mutation to verify. Shopify’s built-in editor is there — it executes queries, it shows responses. But it forgets everything the moment you close the tab. It cannot paginate for you, cannot export a dataset, cannot tell a junior developer which fields they are allowed to mutate.
The name CodeWomplers is a play on coddiwomple — to travel purposefully toward a vague destination. That describes GraphQL development honestly: you know the data you need, but the path through the schema requires exploration. iGraphQL is the workspace that makes that journey deliberate rather than accidental.
What follows is a complete account of every feature. Read the chapter that serves you today, or read the whole pilgrimage.
Chapter I
Of the writing of queries, and the tools that make the work go clean.
A CodeMirror editor with a custom GraphQL grammar mode tuned for Shopify’s schema. Syntax highlighting distinguishes keywords, field names, string values, and comments. Lint runs in real time across three phases: syntax errors, schema violations, and deprecated field warnings.
Query editor with live lint and autocomplete
Prettify rewrites your query with correct indentation in one keystroke.
Compress collapses it to a single line for embedding in code.
Merge Fragments inlines all ...FragmentName references
into the main operation — useful when exporting to a language target.
Before prettify → after
Every tab is a complete, independent IDE: its own query, variables, response, undo history, and API type. Tabs are stored in IndexedDB and survive a browser close. Return the next morning and your work is exactly where you left it.
Tab bar with environment indicators
A persistent library of named queries stored server-side in Shopify metafields. Organize by category, search by name, and load any saved query into the current tab with a single click. Categories, queries, and sort order all survive clearing your browser.
Saved query library panel
Every executed query is automatically captured with its timestamp, variables, response status, and duration. Recall anything you ran in this session or prior sessions, inspect the result, and restore it to the current tab with one click.
History panel
Chapter II
Of the finding of fields, and understanding their natures and lineages.
The documentation panel provides a full type browser: search types, drill into fields, read argument signatures and defaults, and follow type references through the schema graph. Hover any field in the editor and the panel scrolls to that field’s documentation automatically.
Hover documentation pop-up
The Query Explorer presents every field in your schema as an interactive tree. Click the circle next to a field to add it to your query; click again to remove it. The editor updates immediately. Edit the query by hand and the circles update to reflect the new state. The two are always in sync.
No comparable tool exists in Shopify’s built-in editor. This is the single largest UX difference between the two products.
first: 10 inserted for connection fieldsQuery Explorer panel — products › edges › node
Toggle between Shopify’s Admin API and Storefront API at the tab level. Each API loads its own schema; autocomplete, lint, and the explorer all adapt. API type and version are saved per tab so switching tabs never loses context.
API selector and version picker
Stock iGraphiQL applies one API and one version to the entire window. Switch versions and every tab is reinterpreted under the new schema, with no way back. iGraphQL pins API type and version to each tab, persisted with the tab. Each tab is its own GraphQL session. The only thing shared is auth.
@inContext(country: CA), both persistentParallel GraphQL sessions in one window. Different endpoints, different schemas, different versions. Closer to a multi-window IDE than a single editor.
Two tabs — two APIs, two versions, one window
Chapter III
Of the moving of great quantities of data, and the management thereof.
Write a bulkOperationRunQuery in the editor, press Ctrl+Shift+B, and
iGraphQL submits it to Shopify’s asynchronous Bulk Operations API.
Shopify’s built-in editor has no bulk operation support at all — you would
need to write and poll the mutation by hand in a separate tool.
Bulk submit modal
Admins see every bulk job submitted across all users — status, submitter, object count, file size. Regular users see only their own jobs. All queue data lives in Shopify metafields; no external service required.
Queue manager — admin view
Shopify bulk operations produce JSONL — one JSON object per line,
with child records referencing parent __parentId. iGraphQL parses
that structure server-side and produces a spreadsheet-ready CSV in two modes.
Flat CSV output from bulk product export
Chapter IV
Of the turning of pages, and the keeping of one’s place in the long journey.
Shopify’s cursor-based pagination requires you to copy endCursor
from the response JSON and paste it into your query variables by hand. iGraphQL
reads the cursor, maintains a history stack, and navigates forward and back
with a single keystroke.
pageInfo.endCursor, injects as after: variablePagination state display
Run a query, make a mutation, run the query again, and see exactly what changed. The diff view compares the previous and current response with line-level highlighting — useful for verifying mutations and reviewing data changes without reading the raw JSON.
Unified diff view
Find any value in a large JSON response with Ctrl+F. Matches are highlighted via CodeMirror’s markText API so the virtual scroll of the response pane is never disrupted. Export the response to a flattened CSV or XLSX with one click.
Spreadsheet export from query response
Chapter V
Of the transcription of queries into the tongues of many languages, and the mending of old writings.
Once your query is working, export it as production-ready code. Shopify’s built-in editor offers no code export. iGraphQL generates complete, runnable code with authentication headers, variable handling, and proper error patterns for eleven target environments.
VBScript / ASP Classic export
Shopify deprecates GraphQL fields in every API version cycle. iGraphQL detects deprecated fields via live lint (yellow underlines) and provides a structured fixer: known migrations are applied automatically; others are flagged with the deprecation reason from the schema.
bodyHtml → body, inventoryQuantity → InventoryLevel)Deprecation fixer panel
The introspected schema is cached in IndexedDB keyed by API type and version. A staleness indicator appears in the editor when the schema has not been refreshed recently. On API version change, all caches are cleared and fresh introspection runs automatically.
Schema status indicator
Chapter VI
Of the ordering of pilgrims, and who may speak, and who may not.
Shopify’s built-in editor has no concept of users or roles — anyone with Admin access can run any mutation. iGraphQL introduces four roles and per-user permission flags, enforced at the server layer. A developer cannot run mutations their role doesn’t allow, regardless of what they send to the API endpoint.
User management panel — admin view
Shopify session tokens expire. iGraphQL monitors token validity in the background and re-authenticates proactively — before your next query fails, not after. Your tabs and their content are never lost during a session refresh.
Session status indicator
Export your entire workspace — all tabs, saved queries, history, and preferences — as a single JSON backup file. Import it on another machine or after a browser reset. The full cycle takes seconds.
Settings panel — data management
Chapter VII
Of swift hands and quicker minds, and the palette from which all actions are drawn.
Every major action in iGraphQL is registered in the Command Palette. Open it with Ctrl+Shift+K, type any part of a command name, and execute without lifting your hands from the keyboard. Find-in-pane (Ctrl+F) works independently in the query, variables, and response panes.
Command Palette (Ctrl+Shift+K)
iGraphQL ships with a dark theme and a light theme, toggled in one click in the header. Font size is adjustable via a slider for every display size. Fullscreen mode removes all browser chrome for maximum editor space. All preferences are saved to localStorage and restored on return.
Appearance controls in header
Submit a support ticket without leaving the IDE. iGraphQL captures diagnostic context automatically — the API version you were using, your browser, and optionally the query and response at the time of the issue. Track open tickets in the “My Tickets” tab.
Support panel
A factual comparison, feature by feature
| Feature | Shopify iGraphiQL built-in Admin editor |
Codewomplers iGraphQL |
|---|---|---|
| Query tabs | 1 tab, not persisted | Unlimited tabs, IndexedDB-persistent |
| Workspace persistence | Lost on page close | Survives browser close and refresh |
| Query Explorer (visual field selector) | None | Interactive tri-state tree, two-way editor sync |
| Pagination | Manual copy-paste cursor | Ctrl+. / Ctrl+, auto-navigation with history stack |
| Bulk operations | Not supported | Submit, monitor, queue-manage, JSONL+CSV export |
| Code export | None | 11 languages: cURL, JS, Node, Python, PHP, C#, VB.NET, Ruby, Go, VBScript, Postman |
| Multi-user with roles | Single user (anyone with Admin) | Owner, admin, user, readonly — server-enforced |
| Mutation permissions | No restrictions | Per-user flag, enforced at API layer |
| Saved query library | None | Server-side, categorized, searchable |
| Query history | None | Full timestamped history with restore |
| Response diff | None | Unified and side-by-side diff views |
| Spreadsheet export | None | CSV + XLSX with auto-flattened nested data |
| Hover documentation | Basic type popup | Full docs panel, deprecation, directives, sub-type drill-through |
| Deprecation detection | Lint warning only | Real-time underline + auto-fixer with known migrations |
| Admin and Storefront APIs | Separate app installs | Per-tab toggle, shared schema cache per type |
| API version selector | Yes | Yes, with auto schema refresh on change |
| Command palette | None | Full fuzzy-search palette for all IDE actions |
| Find in pane | None | Ctrl+F in query, variables, or response pane |
| Dark / light theme | Light only | Dark and light, one-click toggle |
| Built-in support tickets | None | Submit and track tickets from inside the IDE |
| Settings backup / restore | None | Full workspace export and import |
Every major action has a keyboard shortcut. The full legend is also available at any time from within the IDE with Ctrl+/.
| Shortcut | Action |
|---|---|
| Ctrl+Enter | Execute query |
| Ctrl+Shift+F | Prettify / Compress query |
| Ctrl+Shift+Q | Copy query to clipboard |
| Ctrl+Shift+M | Merge fragments inline |
| Ctrl+Shift+E | Open code export modal |
| Ctrl+Shift+D | Fix deprecated fields |
| Ctrl+Shift+K | Command Palette |
| Ctrl+Shift+L | Open saved queries library |
| Ctrl+Shift+S | Save current query |
| Ctrl+Shift+B | Open bulk operations modal |
| Shortcut | Action |
|---|---|
| Ctrl+H | Toggle history panel |
| Ctrl+D | Toggle documentation sidebar |
| Ctrl+S | Save tabs to storage |
| Ctrl+T | New tab |
| Ctrl+W | Close current tab |
| Ctrl+1–9 | Switch to tab N |
| Ctrl+F | Find in active pane |
| Ctrl+. | Next page (pagination) |
| Ctrl+, | Previous page (pagination) |
| Ctrl+Alt+D | Toggle response diff |
| Ctrl+/ | Keyboard shortcuts legend |
| F11 | Toggle fullscreen |
| Escape | Close topmost panel or modal |
The journey is open to those who seek it.
Codewomplers iGraphQL is completing private testing ahead of its public Shopify App Store launch. If your team works with the Shopify Admin API and wants a proper development workspace — with multi-user permissions, bulk operations, persistent tabs, and an IDE that truly knows your schema — write to us to join the early access program.
Request Early AccessWrite to chris@codewomplers.com with your shop domain and a brief description of how you use the Shopify API. Shopify App Store listing in progress.