WPGraphQL
WPGraphQL

Introduction

WPGraphQL IDE is a WordPress plugin that provides a modern GraphQL query editor built with CodeMirror 6, @wordpress/components, and @wordpress/data. It runs inside the WordPress admin as a slide-up drawer (reachable from any admin page) or as a dedicated full-page editor, and can optionally expose a public, unauthenticated endpoint for headless developers.

It depends on the WPGraphQL core plugin and integrates with WPGraphQL Smart Cache for persisted documents. With Smart Cache inactive, the IDE still works as a standalone GraphQL client — editor, schema, execute, response panes, history, and preferences.

Key features

  • Tabbed document editor with auto-save and per-document state.
  • CodeMirror 6 with GraphQL syntax highlighting, autocomplete, and linting.
  • Schema-aware autocomplete and a docs explorer.
  • Response viewer with JSON, Table, and Raw modes.
  • Response extension tabs for Errors, Debug, Tracing, Query Log, and any plugin’s extensions data.
  • Execution history persisted to localStorage per (WordPress user, IDE context) — works for anonymous public-endpoint visitors too.
  • Query composer for visual query building.
  • Extensible through access functions, public @wordpress/data stores, and WordPress hooks.

How it’s put together

  • State management — @wordpress/data (Redux) stores. The store names are public API: wpgraphql-ide/app, wpgraphql-ide/document-editor, wpgraphql-ide/activity-bar, and the registry stores under wpgraphql-ide/*.
  • Editors — CodeMirror 6 (cm6-graphql for GraphQL, @codemirror/lang-json for JSON).
  • UI — @wordpress/components, following the Gutenberg post-editor layout: a global top bar, a left activity bar for global panels, and a document-scoped editor area with tabs.
  • Persistence — saved documents are Smart Cache’s graphql_document custom post type, accessed over the REST API; user preferences are user meta; execution history is browser localStorage (per user + context). See API Surface.

Layout philosophy

Controls are scoped by their relationship to the active document:

  • Global (activity bar / left sidebar): docs explorer, history, help — things that apply regardless of which tab is active.
  • Document-scoped (editor area): tabs, auth toggle, query composer, send button, variables, headers — things that change per document.

Next steps