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 4.1 x Zustand

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

  • Explorer plugin
  • History plugin

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

  • useEditorContext => useEditorStore feat(@graphiql/react): migrate React context to zustand. Replace useExecutionContext with useExecutionStore hook and replace useEditorContext with useEditorStore hook #3946
  • useExecutionContext => useExecutionStore feat(@graphiql/react): migrate React context to zustand. Replace useExecutionContext with useExecutionStore hook and replace useEditorContext with useEditorStore hook #3946
  • usePluginContext => usePluginStore feat(@graphiql/react): migrate React context to zustand, replace usePluginContext with usePluginStore hook #3945
  • useSchemaContext => useSchemaStore feat(@graphiql/react): migrate React context to zustand, replace useSchemaContext with useSchemaStore hook #3943
  • useStorageContext => useStorage feat(@graphiql/react): migrate React context to zustand, replace useStorageContext with useStorage hook #3942
  • useHistoryContext => useHistory feat(@graphiql/plugin-history): migrate React context to zustand, replace useHistoryContext with useHistory, useHistoryActions hooks #3935
  • useExplorerContext => useDocExplorer feat(@graphiql/plugin-doc-explorer): migrate React context to zustand, replace useExplorerContext with useDocExplorer and useDocExplorerActions hooks #3940

• Ensure all tests pass

GraphiQL 5 x Monaco-Editor/Monaco-GraphQL

• Migrate to Monaco-Editor/Monaco-GraphQL (I did POC in 2023 in #3234)
• graphiql 5: Remove query, variables, headers and response props from <GraphiQL /> #3735
• Ensure all tests pass
• remove UMD builds
• clickable definition in hover popup https://discord.com/channels/625400653321076807/966768858402816020/1378977355309256817
• adjust variable colors in graphiql monaco theme https://discord.com/channels/625400653321076807/966768858402816020/1378978886276222976
• include how works go to definition in migration guide https://discord.com/channels/625400653321076807/966768858402816020/1379076101959188540
  • document keyMap was removed
• push both on stack e.g. Person and name https://discord.com/channels/625400653321076807/966768858402816020/1379076825036095610
• update short cuts text per OS https://discord.com/channels/625400653321076807/966768858402816020/1379081212865548319
• remove onClickReference in variables editor
• store onClickReference in React ref and access as ref.current in useEffect
• allow override all plugins

---

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.