GraphiQL Next path proposal

[dimaMachina]

GraphiQL Next path proposal

Hi, I am one of the current GraphiQL maintainers, and I’m excited to share the future GraphiQL 4 and 5 proposal, which will introduce:

• Migration to Zustand for state management (replacing React context)
• Migration to Monaco-Editor/Monaco-GraphQL (replacing CodeMirror)

These versions will be released sequentially. Below is the detailed roadmap:

GraphiQL 3.9 x React-Compiler/Vite

• Migrate to Vite (Done in #3826, pending release)
• Compile GraphiQL source code (Done in #3826, pending release)

GraphiQL 4 x React 19/New Tabs UI/ESM-based CDN examples

• [graphiql] Update graphiql-react to support React 19 #3850
  • Upgrade @headless/react to v2 in graphiql-react
• New tab design (Merged in v4 alpha, visible in GraphQL Hive)

GraphiQL 5 x Zustand

• Extract plugins into separate packages (issue #2904):

  • Explorer plugin
  • History plugin

• Migrate from React context to Zustand (issue #2904)

  • useEditorContext => useEditor
  • useExecutionContext => useExecution
  • usePluginContext => usePlugin
  • useSchemaContext => useSchema
  • useStorageContext => useStorage
  • useHistoryContext => useHistory
  • useExplorerContext => useDocExplorer

• Ensure all tests pass

GraphiQL 6 x Monaco-Editor/Monaco-GraphQL

• Migrate to Monaco-Editor/Monaco-GraphQL (I did POC in 2023 in #3234)
• Ensure all tests pass

---

Feel free to ask any relevant questions. The GraphQL TSC have indicated that if we're all in agreement they will approve my grant to work on this.

Let's get this built!

Dimitri

[acao]

Looks good to me, just like we decided on last year. Let me know if you need any help reviewing anything!

This rewrite for v4 branch takes care of the entire core zustand state, the only bug I had was with persistence (if you comment out the persist middleware it works great )

thanks, @dimaMachina !

[gabrielcsapo]

Looking forward to this, great work as always!

[sibelius]

any progress on this ?

[dimaMachina]

Not yet - still waiting to finish the contract paperwork before I can start.