GraphiQL Plugins (2.0.0-beta.0) Meta Issue

This is a meta-issue for the GraphiQL IDE plugins effort, towards the GraphQL 2.0.0 beta milestone

(Note: this was previously marked as graphiql@1.0.0-beta, however we decided that graphiql@1.0.0 should be the last officially stable release before merging all of these breaking changes)

👷‍♀️ Work In Progress

Preceding initiatives that already have merged or in-progress PR(s) (will try to keep this updated, but projects listed here are your best bet)

Get involved or ask questions via our discord channel

• React Context Refactor - #1468 - this is essentially the Plugin RFC API
• Add Monaco to GraphiQL - acao/graphiql/pull/17 - yep you read it! replacing codemirror with monaco, merging it to #1468 when it’s ready!
• New GraphiQL Components/Theme/Layout System - @walaura did some excellent work setting up new components and a system for themeing and layout, if anyone wants to help her advance this effort they are more than welcome! See packages/graphiql/src/new-components for more details and readmes. Will add more proposal spec for components to add soon!

🗺️ Dependent Roadmaps

These are roadmaps that will see to the introduction of a stable plugin API for GraphiQL 2.0.0. All of these are in progress.

See the visual roadmap here! https://miro.com/app/board/o9J_ktmGZck=/

• GraphiQL 2.0.0-beta Roadmap - #1446
• Baseline Monaco Mode - #1445 (Demo)
• LSP 3.0.0-beta Roadmap - #1447

📋 Github Projects

These are where most of the work is organized. Issues and cards that often become issues. An issue might belong to two projects.

• Feature Roundup - organize requested features into core/contrib/etc, proof out new ones as cards that become issues
• Webpack Takeover - replace browserify with webpack, modernize babel, add esm exports, and more!
• Convert to Typescript - completed except codemirror mode, which will not be used for this effort.
• GraphiQL Context API Refactor (in progress): replace state implementation with context or another state management system, introduce replacement/new API interfaces.
• Monaco GraphQL first release (in progress): create a monaco mode that satisifies most baseline criteria, and change/refactor LSP as necessary
• Component Library and Layout Ecosystem
• Complete Plugin API Spec - need to add to this! A catch-all project for discussion/RFCs/spec proposals

💬 Discussions

These discussions will need to be turn into proposals/RFCs. In the case of the first discussion, it could lead to dozens of RFCs.

• Interface for a GraphiQL plugin - #829 - Plugin API interface discussion
• Redesign for Plugins - #978 - new full-fledged UX Design re-work via @orta!
• Editor and Documentation Accessibility - #954 - essential that new redesign is accessibility first, and that graphiql@2.0.0 stable is as accessible as it’s dependencies allow.

💡 Proposals

These proposals need to be advanced, as well as any issue labelled potential plugin needs to either be closed and associated with a proposal, or turned into a full proposal/RFC.

• Working Plugin API Proposal (NotionHQ document) - open for comment! This will be reviewed at the April GraphiQL working group meeting.
• API Breakages - #1165 - Proposed API breakages, many of which are already present in graphiql@2.0.0-alpha.2
• Your proposals! - Please provide PRs and issues, and we will track them with the GraphiQL Plugin Spec project. Templates coming soon.

Note: Projects prefixed with ! are for organizing purposes, where the lanes don’t represent states (such as features roundup)

[acao]

plugins made 2.0 architecture too complicated for the next major version, and also I’m no longer being paid to work on this monorepo as of this fall, so the roadmap has changed based on my availability.

because I’m one of the only active maintainers for this ecosystem, I mostly only have time for the minimum - maintenance work, advancing new GraphQL features so we can advance the spec, and ensuring the LSP ecosystem supports all GraphQL features fully.

there is a WIP for 2.0 since early this year. it was merged to master branch, then we moved it to a seperate workspace because of performance issues with context. the readme will be updated with more details soon, and I’ve been trying to recruit folks to offer new proposals to finish 2.x and no one has opened a PR. i have a lot more community/devrel work to do. was hoping for hacktober, but at work I was pivoted to work on wordpress plugins well before I could make that deadline.

most of the time I spent being paid to work on this repo, I spent on monaco-graphql which is a requirement for 2.0, supporting graphiql@1.0, and advancing more complete LSP support for 2.0.

Modified Goals for 2.0.0

Instead of plugins, for 2.0, we will just have fantastic components, hooks and state implementation (an SDK so to speak, for advanced custom implementations) and an optional top-level service layer GraphiQL component and middlewares. Hopefully sometime soon I can re-hash all the architectural plans, but at this point, there are too many pressing issues and features to address in this repo outside of the graphiql workspace.

The end goal here is not plugins, but enhanced customizeability and extensibility. Plugins are a way to get there, but powerful user interfaces and consistent configuration patterns can lead to plugin-like capabilities.

Since we already need to rewrite the entire clientside domain model with a new state management tool (yet to be chosen), adding the complexity of an entire plugin API isn’t worth it, when people can just publish react components and libraries that can be imported to new and powerful component props, and thus be passed to monaco, to xstate or redux or whatever state manager, or components to be rendered in various regions. The monaco editor itself covers so so many requested GraphiQL features (that are still open issues) that codemirror just doesn’t have.

Then, this 2.0 SDK will change for 3.0 to some degree, and potentially a plugin service layer will be introduced on top of that.

What you can do now

If you want a full-featured, open source client that uses GraphQL and supports a rich plugin ecosystem now, Altair and Insomnia are both excellent choices for this.

If you want to build your own tool with a plugin ecosystem with react, svelte, vue, plain js, whatever you choose, check out the github api explorer demo we have for monaco-graphql!

[acao]

there is still so much to add to this! @orta had the great idea of breaking out, which we’ve done with github projects. please sort them alphabetically to see the order of precedence.

in fact, we just closed a project for the first time! (Webpack Takeover). It feels real nice to close a roadmap!