WPGraphQL IDE
| 开发者 |
jasonbahl
joefusco |
|---|---|
| 更新时间 | 2026年6月11日 05:36 |
| PHP版本: | 7.4 及以上 |
| WordPress版本: | 7.0 |
| 版权: | GPL-3.0 |
| 版权网址: | 版权信息 |
详情介绍:
WPGraphQL IDE is a next-generation query editor for WPGraphQL, built on WordPress's component library and CodeMirror 6. It replaces the bundled legacy GraphiQL interface with a faster, more extensible IDE that feels native to wp-admin.
Three ways to open the IDE:
- Dedicated page at
wp-admin/admin.php?page=graphql-ide - Drawer — slide-up panel triggered from the admin bar, available on every wp-admin and front-end page
- Public endpoint mode (opt-in) — visiting the GraphQL endpoint URL in a browser renders the IDE shell instead of returning JSON. Anonymous visitors get a read-only schema browser; signed-in administrators get the full editor.
- Multi-tab editor with auto-save and overflow tab dropdown
- Schema-aware autocomplete, hover-doc tooltips, and inline lint warnings (powered by CodeMirror 6 + cm6-graphql)
- Cmd-click navigation from any field, type, or argument straight to the Docs Explorer
- Response panes: JSON viewer, table view, status code / duration / size / resolver-count badges, request tracing, query log, N+1 detection
- Variables and headers editors with their own autocomplete
- Per-document settings (description, alias names, max-age cache hint, allow/deny)
- Execution history persisted to localStorage, scoped per WordPress user and IDE context — available to anonymous public-endpoint visitors too
- Saved Queries panel with personal collections and share links (when WPGraphQL Smart Cache is also active)
- Full keyboard support: Cmd+Enter to execute, Ctrl+Shift+P to prettify, arrow keys to switch tabs
- Rebuilt UI on
@wordpress/componentsand@wordpress/data. The legacy GraphiQL wrapper is gone — see the Upgrade Notice if you have customizations. - Smart Cache integration. Saved documents now live in
wp-graphql-smart-cache'sgraphql_documentpost type — one canonical primitive for the WPGraphQL ecosystem. The IDE works standalone when Smart Cache isn't installed; Saved Queries / Document Settings / share links light up when it is. - Three render modes (above), each individually configurable.
- Schema-typed data layer. Document and collection operations run through WPGraphQL itself instead of the WordPress REST API.
- Full internationalization. Every UI string passes through
@wordpress/i18nunder thewpgraphql-idetext domain. - Auto-upgrade from 4.x. Open tabs and query history saved by the legacy GraphiQL UI migrate forward on first 5.0 load.
UPGRADE-5.0.md in the plugin or the project's GitHub releases.
安装:
- Install and activate WPGraphQL — required.
- (Optional but recommended) Install and activate WPGraphQL Smart Cache — unlocks Saved Queries, personal collections, share links, and the Document Settings drawer.
- Install WPGraphQL IDE from the WordPress.org plugin directory, or upload the plugin zip and activate it.
- Open the IDE from GraphQL → GraphQL IDE in the admin menu, or click the GraphQL IDE entry in the admin bar.
manage_graphql_ide capability, which is granted to administrators by default. Hosts can override the capability requirement via the wpgraphql_ide_capability_required filter.屏幕截图:
常见问题:
How do I open the IDE?
The plugin adds three entry points: a dedicated admin page under GraphQL → GraphQL IDE, a slide-up drawer triggered from the GraphQL IDE link in the admin bar (works on every wp-admin and front-end page), and an opt-in public endpoint mode that renders the IDE when you visit the GraphQL endpoint URL in a browser.
Do I need WPGraphQL Smart Cache?
No — the IDE works as a standalone GraphQL client without it. Smart Cache is optional but unlocks the saved-document features: the Saved Queries panel, personal collections, share links, and the Document Settings drawer. Install Smart Cache and the IDE detects it automatically; no configuration needed.
What changed in 5.0?
5.0 rebuilds the UI on @wordpress/components and CodeMirror 6, moves saved-document storage onto Smart Cache's graphql_document post type, and ships full internationalization. Extension authors should consult UPGRADE-5.0.md (bundled with the plugin) — several legacy hooks were renamed, and a few were briefly removed and then restored with improved behavior. Open tabs and query history saved by 4.x are migrated forward automatically on first 5.0 load.
How do I enable the public endpoint?
Under GraphQL → IDE Settings, check Public IDE at GraphQL endpoint. Once enabled, browser visits to the GraphQL endpoint URL (with an HTML Accept header) render the IDE shell instead of returning JSON. API clients (curl, fetch with Content-Type: application/json, GraphQL clients in general) keep getting JSON as before. Optionally enable Allow sign-in on the public IDE to surface a sign-in prompt to anonymous visitors.
Where can I find the non-compressed JavaScript and CSS source code?
The non-compressed source code for the JavaScript and CSS files is available in the following directories:
- Scripts: src/ directory
- Styles: styles/ directory
What are the major dependencies?
- CodeMirror 6 (codemirror.net) — the editor surface, with
cm6-graphqlfor schema-aware GraphQL highlighting + autocomplete @wordpress/componentsand@wordpress/data— UI primitives and state management@graphiql/toolkit— fragment-merging utilities reused from the GraphiQL project- vaul (github.com/emilkowalski/vaul) — the slide-up drawer
- graphql-js (github.com/graphql/graphql-js) — the underlying GraphQL parser
Where do I report bugs or request features?
Open an issue at github.com/wp-graphql/wp-graphql. For security issues, please follow the security policy instead of filing a public issue.
How does WPGraphQL IDE handle privacy and telemetry?
WPGraphQL IDE uses the Appsero SDK to collect telemetry data only after user consent. This helps improve the plugin while respecting user privacy. When telemetry is enabled, the same payloads are also mirrored to WPGraphQL-operated infrastructure at https://telemetry.wpgraphql.com.
更新日志:
5.0.1
Bug Fixes
- release: release script no longer crashes mid-run updating readme.txt (#3916)
- IDE UI rebuilt on
@wordpress/components+@wordpress/data+ CodeMirror 6. Legacy GraphiQL wrapper removed. - Saved-document storage moved to WPGraphQL Smart Cache's
graphql_documentpost type. The IDE-ownedgraphql_ide_querypost type,graphql_ide_collectiontaxonomy, and Document-Settings taxonomies are removed. Saved Queries / Document Settings / share links require Smart Cache to be active. - GraphQL types
IdeQuery,IdeQueries,IdeCollection,IdeCollectionsremoved. UsegraphqlDocument/graphqlDocumentGroup(from Smart Cache) instead. - REST routes removed:
/wpgraphql-ide/v1/documents/:id/publishand/wpgraphql-ide/v1/documents/collections/:id. The publish flow is now a standardPOST /wp/v2/graphql_document/:id; cascade-delete is client-side. wpgraphql_ide_capability_requiredfilter now consulted at every IDE permission check — REST callbacks, post-type / taxonomy capability maps, meta auth, admin menu, public-endpoint flag. Hosts overriding the cap to a different value will now find their override honored end-to-end (previously only the admin menu link was gated).- Legacy
graphiql_*hook aliases dropped (enqueue_graphiql_extension,graphiql_external_fragments,graphiql_rendered,graphiql_toolbar_before_buttons,graphiql_toolbar_after_buttons). Use the canonicalwpgraphql_ide_*/wpgraphql-ide.*names.
- Three render modes — dedicated admin page, slide-up drawer (from the admin bar, on any wp-admin or front-end page), and an opt-in public IDE at the GraphQL endpoint URL.
- Smart Cache integration via
SmartCacheBridge. GraphQL fieldsvariablesandheadersadded toGraphqlDocument(read + Create/Update inputs) for execution context. - Schema-typed data layer. Document and collection CRUD inside the IDE run through WPGraphQL via the bundled
gql()client. REST remains for user preferences, the aggregateddocumentSettingsreadback field, and bulk import/export/reorder. Execution history is browser-local. - Full internationalization. Every UI string passes through
@wordpress/i18nwith thewpgraphql-idetext domain. - Auto-upgrade from 4.x. Open tabs (
graphiql:tabState) and query history (graphiql:queries) saved by the legacy GraphiQL UI migrate forward on first 5.0 load; legacy localStorage keys are cleared. - Anonymous history on the public endpoint. Visitors without a logged-in session get a browser-local history bucket (capped at 100, newest first), mirroring the 4.x GraphiQL behavior.
wpgraphql_ide_external_fragmentsfilter restored with smarter merge behavior — only fragments referenced by the outgoing query are prepended, with transitive resolution between external fragments.- New extension API:
registerPreference(typed device/user prefs),executeRequest/executeResponsefilters,wpgraphql-ide.afterExecuteaction. - New autocomplete + hover popups render reliably above the slide-up drawer overlay.
- deps: bump @wordpress/hooks from 3.58.0 to 4.44.0 (#3853)
- deps: bump the npm-prod-minor-patch group across 1 directory with 4 updates (#3826)
- Allow compatible interface field override with
register_graphql_field()(#3539) - deps-dev: bump concurrently from 8.2.2 to 9.2.1 (#3868)
- deps-dev: bump phpstan/phpstan from 2.1.51 to 2.1.54 in /plugins/wp-graphql-ide in the wp-graphql-ide-composer-dev-minor-patch group (#3818)
- deps-dev: bump phpstan/phpstan from 2.1.54 to 2.1.55 in /plugins/wp-graphql-ide in the wp-graphql-ide-composer-dev-minor-patch group (#3872)
- deps-dev: bump symfony/dom-crawler from 5.4.48 to 5.4.52 in /plugins/wp-graphql-ide (#3857)
- deps-dev: bump symfony/yaml from 5.4.45 to 5.4.53 in /plugins/wp-graphql-ide (#3861)
- deps-dev: bump the npm-dev-minor-patch group across 1 directory with 7 updates (#3827)
- deps-dev: bump the npm-dev-minor-patch group with 3 updates (#3849)
- deps-dev: bump dotenv from 16.6.1 to 17.4.1 (#3807)
- deps-dev: bump phpstan/phpstan from 2.1.47 to 2.1.50 in /plugins/wp-graphql-ide in the wp-graphql-ide-composer-dev-minor-patch group (#3790)
- deps-dev: bump phpstan/phpstan from 2.1.50 to 2.1.51 in /plugins/wp-graphql-ide in the wp-graphql-ide-composer-dev-minor-patch group (#3803)
- deps-dev: bump the npm-dev-minor-patch group across 1 directory with 6 updates (#3799)
- telemetry: mirror Appsero insights to telemetry.wpgraphql.com (#3785)
- add Appsero telemetry tracking to WPGraphQL IDE (#3765)
- sync readme.txt changelogs with releases (#3744)
- deps: bump @babel/runtime from 7.24.1 to 7.29.2 in /plugins/wp-graphql-ide (#3700)
- deps: bump axios from 1.7.6 to 1.14.0 in /plugins/wp-graphql-ide (#3706)
- deps: bump basic-ftp from 5.0.5 to 5.2.0 in /plugins/wp-graphql-ide (#3684)
- deps: bump flatted from 3.3.1 to 3.4.2 in /plugins/wp-graphql-ide (#3689)
- deps: bump form-data from 4.0.0 to 4.0.5 in /plugins/wp-graphql-ide (#3693)
- deps: bump http-proxy-middleware from 2.0.6 to 2.0.9 in /plugins/wp-graphql-ide (#3702)
- deps: bump immutable from 4.3.5 to 4.3.8 in /plugins/wp-graphql-ide (#3687)
- deps: bump lodash from 4.17.21 to 4.18.1 in /plugins/wp-graphql-ide (#3691)
- deps: bump node-forge from 1.3.1 to 1.4.0 in /plugins/wp-graphql-ide (#3686)
- deps: bump on-headers and compression in /plugins/wp-graphql-ide (#3678)
- deps: bump picomatch from 2.3.1 to 2.3.2 in /plugins/wp-graphql-ide (#3688)
- deps: bump qs and body-parser in /plugins/wp-graphql-ide (#3696)
- deps: bump simple-git from 3.23.0 to 3.33.0 in /plugins/wp-graphql-ide (#3675)
- deps: bump svgo from 3.2.0 to 3.3.3 in /plugins/wp-graphql-ide (#3690)
- deps: bump the npm-prod-minor-patch group across 1 directory with 5 updates (#3739)
- deps: bump webpack from 5.94.0 to 5.105.4 in /plugins/wp-graphql-ide (#3677)
- deps: bump yaml from 1.10.2 to 1.10.3 in /plugins/wp-graphql-ide (#3698)
- migrate WPGraphQL for ACF to monorepo (#3581)
- deps-dev: bump rimraf from 5.0.10 to 6.1.3 (#3666)
- resolve post by percent-encoded slug/URI when post_name is stored encoded (#3582) (#3611)
- import WPGraphQL IDE into monorepo (#3542)
- resolve all JavaScript linting errors in wp-graphql-ide (#3548)
- debugging release scripts
- 74c832c: chore: add period to description in readme.txt
- 2eab1a7: chore: update license format in readme.txt to GPL-3.0
- f610132: fix: remove duplicate git tag creation in release workflow
- bf627cc: Fixed an issue with plugin updates not appearing on WordPress.org
- b47b46d: ci: attempt to fix GitHub actions auto deploy to wp.org.
- d1df1d4: chore: update tested WordPress version to 6.8
- c6cfbc1: fix: linting tooltips are now visible when using the IDE in the drawer
- 6500ef3: fix: broken query composer by adding missing import statements for AbstractArgView and FieldView components. Props to @hacknug for the fix!
- b4d7302: Test
- fd9d099: chore: set workflow environment
- a2b5fbd: - chore: Bump supported WordPress version
- 477a555: ### Added
- Introduced
wp_localize_escaped_data()function for recursively escaping data before localizing it in WordPress. This ensures safe output of strings, URLs, integers, and nested arrays when passing data to JavaScript, using native WordPress functions likewp_kses_post()andesc_url().
- Enhanced security by ensuring all localized data is properly sanitized before being passed to
wp_localize_script(), preventing potential XSS vulnerabilities and ensuring safe use of dynamic data in JavaScript. - 4da3973: - chore: Bump the npm_and_yarn group across 1 directory with 7 updates
- eda911d: Updated the plugin's custom filter and action names to be consistent across the plugin
- eda911d: Fixed bug where credentials were being sent in the headers unnecessarily under certain conditions