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

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

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

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

GraphiQL 4.1 x Zustand

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

  • [x] Explorer plugin
  • [x] History plugin

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

  • [x] useEditorContext => useEditorStore https://github.com/graphql/graphiql/pull/3946
  • [x] useExecutionContext => useExecutionStore https://github.com/graphql/graphiql/pull/3946
  • [x] usePluginContext => usePluginStore https://github.com/graphql/graphiql/pull/3945
  • [x] useSchemaContext => useSchemaStore https://github.com/graphql/graphiql/pull/3943
  • [x] useStorageContext => useStorage https://github.com/graphql/graphiql/pull/3942
  • [x] useHistoryContext => useHistory https://github.com/graphql/graphiql/pull/3935
  • [x] useExplorerContext => useDocExplorer https://github.com/graphql/graphiql/pull/3940

• [x] Ensure all tests pass

GraphiQL 5 x Monaco-Editor/Monaco-GraphQL

• [x] Migrate to Monaco-Editor/Monaco-GraphQL (I did POC in 2023 in #3234)
• [ ] https://github.com/graphql/graphiql/pull/3735
• [x] Ensure all tests pass
• [x] remove UMD builds
• [ ] clickable definition in hover popup https://discord.com/channels/625400653321076807/966768858402816020/1378977355309256817
• [x] adjust variable colors in graphiql monaco theme https://discord.com/channels/625400653321076807/966768858402816020/1378978886276222976
• [x] include how works go to definition in migration guide https://discord.com/channels/625400653321076807/966768858402816020/1379076101959188540
  • [x] document keyMap was removed
• [x] push both on stack e.g. Person and name https://discord.com/channels/625400653321076807/966768858402816020/1379076825036095610
• [x] update short cuts text per OS https://discord.com/channels/625400653321076807/966768858402816020/1379081212865548319
• [x] remove onClickReference in variables editor
• [x] store onClickReference in React ref and access as ref.current in useEffect
• [x] 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.