尧图网页设计 
如何把 graphiql 从 4.x 升级到 5.0.0Monaco 替换 CodeMirror 后要做哪些改动【免费下载链接】graphiqlGraphiQL the GraphQL LSP Reference Ecosystem for building browser IDE tools.项目地址: https://gitcode.com/GitHub_Trending/gr/graphiql如果你的项目目前使用graphiql4.x升级到 5.0.0 时最核心的变化是操作编辑器从 CodeMirrorcodemirror-graphql换成了 Monaco Editormonaco-graphql。这带来一个必做动作——必须为你的构建环境配置 Monaco workers否则编辑器的语言服务自动补全、诊断等无法运行。本文依据仓库中的迁移文档 docs/migration/graphiql-5.0.0.md结合官方示例项目给出 Vite、Webpack/Next.js 和 ESM CDN 三条环境下需要做的具体改动以及 props、hooks、插件 API 的对应替换方式。升级前确认你的构建方式属于哪一类迁移文档把 worker 配置按构建方式分成三类升级前先确认自己属于哪一种环境要求的做法Vite 项目安装并配置vite-plugin-monaco-editor插件Webpack含 Turbopack项目如 Next.js在应用中import graphiql/setup-workers/webpackESM-based CDN 使用用?worker查询加载 worker 模块手动配置globalThis.MonacoEnvironment同时注意一个硬限制5.0.0移除了 UMD 构建。如果你之前通过 UMD 方式在 CDN 上加载 GraphiQL必须切换到 ESM-based 用法仓库提供 ESM CDN 示例。升级graphiql包本身时按 packages/graphiql/README.md 的说法react、react-dom和graphql是其 peer dependencies需一并安装npm install graphiql react react-dom graphqlVite 项目配置 vite-plugin-monaco-editorVite 项目分两步。1. 安装插件npm install vite-plugin-monaco-editor --save-dev2. 在vite.config.mjs中导入并配置插件迁移文档给出的配置新增部分以标出// vite.config.mjs import { defineConfig } from vite import react from vitejs/plugin-react import $monacoEditorPlugin from vite-plugin-monaco-editor const monacoEditorPlugin $monacoEditorPlugin.default ?? $monacoEditorPlugin export default defineConfig({ plugins: [ react(), monacoEditorPlugin({ languageWorkers: [editorWorkerService, json], customWorkers: [ { label: graphql, entry: monaco-graphql/esm/graphql.worker.js } ] }) ] })要点languageWorkers声明 Monaco 自带的editorWorkerService和json两个 workercustomWorkers中的entry: monaco-graphql/esm/graphql.worker.js就是 GraphQL 语言的 worker 入口标签label为graphql。仓库中的 Vite 示例 用的正是这份配置其vite.config.mjs与上面完全一致见 examples/graphiql-vite/vite.config.mjs应用侧只需渲染GraphiQL fetcher{fetcher} /并引入graphiql/style.css。可以作为升级后的参照实现直接对照。Next.js / Webpack 项目导入 setup-workers 模块对于 Webpack 和 Turbopack 项目如 Next.js迁移文档的要求只有一行导入import graphiql/setup-workers/webpack;放在渲染 GraphiQL 的模块顶部即可。仓库中的 Next.js 示例 的实际写法是标注use client的客户端组件use client; import { GraphiQL } from graphiql; import graphiql/setup-workers/webpack; import graphiql/style.css; export const GraphiQLPage () { return GraphiQL fetcher{fetcher} /; };这个导入最终解析到 packages/graphiql/src/setup-workers/webpack.ts再委托给graphiql/react中的实现。它会为json、graphql两类 worker 设置globalThis.MonacoEnvironment.getWorker其余情况回落到editor.worker见 packages/graphiql-react/src/setup-workers/webpack.ts。同理Vite 环境也有对应的graphiql/setup-workers/vite模块内部用?worker后缀导入 worker因为 Vite 需要提前知道会以 web worker 方式加载这些模块见 packages/graphiql-react/src/setup-workers/vite.ts——迁移文档中 Vite 路径推荐的是上面插件方式两者对应同一个目标。ESM-based CDN 使用用?worker加载 worker如果你在 ESM-based CDN 场景使用 GraphiQL必须通过?worker查询把模块作为 web worker 加载迁移文档原文给出的代码import createJSONWorker from https://esm.sh/monaco-editor/esm/vs/language/json/json.worker.js?worker; import createGraphQLWorker from https://esm.sh/monaco-graphql/esm/graphql.worker.js?worker; import createEditorWorker from https://esm.sh/monaco-editor/esm/vs/editor/editor.worker.js?worker; globalThis.MonacoEnvironment { getWorker(_workerId, label) { switch (label) { case json: return createJSONWorker(); case graphql: return createGraphQLWorker(); } return createEditorWorker(); }, };完整页面写法可对照 examples/graphiql-cdn/index.html。代码里需要跟着改的 APIprops、hooks 与插件配好 worker 之后凡是引用了 4.x 时代 API 的代码都要按迁移文档替换。被移除的 props 及其替代移除的 prop替代方式query/variables/headers新增的initialQuery/initialVariables/initialHeaders只作用于第一个 tab后续打开的 tab 操作编辑器从空开始response迁移文档中列在移除项里无直接替代 propreadOnly无直接替代keyMap用社区插件Monaco 的 vim 插件monaco-vim或 Emacs 插件monaco-emacsvalidationRules自定义 GraphQL worker见 packages/monaco-graphql/README.md 中关于向 worker 传递非静态配置的 custom web worker 说明被移除/弃用的 hooksgraphiql/react中以下 hooks 被弃用统一改用新的useGraphiQL和useGraphiQLActions详见 packages/graphiql-react/README.mdusePrettifyEditors、useCopyQuery、useMergeQueryuseExecutionContext、usePluginContext、useSchemaContext、useStorageContext另外useSynchronizeValuehook 被直接移除。插件包同理graphiql/plugin-history的useHistoryContext弃用改用useHistory/useHistoryActionsgraphiql/plugin-doc-explorer的useExplorerContext弃用改用useDocExplorer/useDocExplorerActions。ToolbarMenu组件变化label和classNameprops 被移除buttonprop 现在应该是一个 button 元素迁移文档示例ToolbarMenu labelOptions button{ ToolbarButton labelOptions SettingsIcon classNamegraphiql-toolbar-icon aria-hiddentrue / /ToolbarButton } ToolbarMenu.Item onSelect{() console.log(Clicked!)} Test /ToolbarMenu.Item /ToolbarMenu同时GraphiQL.Toolbar /现在接受children: ReactNode。插件默认项可以被整体覆盖了5.0 起可以覆盖所有默认插件当前默认是Doc Explorer和History移除全部默认插件设置referencePlugin{null}移除 Doc Explorer并把plugins传空数组移除 Historyimport { GraphiQL } from graphiql; const myPlugins []; function App() { return ( GraphiQL referencePlugin{null} // Removes Doc Explorer plugin plugins{myPlugins} // Removes History plugin / ); }添加自定义插件但保留 History必须显式把HISTORY_PLUGIN放进plugins数组否则 History 不再出现import { GraphiQL, HISTORY_PLUGIN } from graphiql; import { explorerPlugin } from graphiql/plugin-explorer; const myPlugins [HISTORY_PLUGIN, explorerPlugin()]; function App() { return GraphiQL plugins{myPlugins} /; }如果你用了自定义 Doc Explorer要传给referencePluginprop不要放进plugins数组——它会被自动包含且始终最先渲染。交互与行为变化升级后容易“以为是 bug”的点在操作编辑器中点击引用进行跳转现在需要按住 macOS 上的Cmd或 Windows/Linux 上的Ctrl再点击不再是普通单击。Doc Explorer 搜索输入框的聚焦快捷键从Cmd/CtrlK改为Cmd/CtrlAltK原因是 monaco-editor 自身占用了Cmd/CtrlK。Variables和Headers编辑器新增注释支持。修复类变化defaultQuery设为空字符串时确实得到空查询defaultQuery只用于第一个 tab操作编辑器中即使没有命名操作也会执行查询快捷键。升级后的验证方式文档给出的验证路径以官方示例为准对照运行官方示例。仓库为 5.0 新增了两个示例 graphiql x Vite 和 graphiql x Next.jsCDN 用法对照 graphiql-cdn。先确保与你的构建方式对应的示例能跑通再回比自己的改动。worker 是否被请求。setup-workers/webpack模块以及 Vite 版本在每次创建 worker 时会向控制台输出console.info(setup-workers/webpack, { label })Vite 版本输出setup-workers/vite见 packages/graphiql-react/src/setup-workers/vite.ts浏览器控制台中能看到带json/graphql标签的日志说明 worker 路由生效。编辑器语言行为。打开操作编辑器输入字段名确认自动补全、错误诊断正常——这些依赖 GraphQL worker再按Cmd/Ctrl点击引用验证跳转行为。快捷键。按Cmd/CtrlAltK聚焦 Doc Explorer 搜索框确认新快捷键生效。限制与注意事项initialQuery/initialVariables/initialHeaders只对第一个 tab 生效多开 tab 时后续 tab 为空。如果你在集成测试中依赖原来的query/variables/headersprops需要改成这些 initial 开头的 props 并接受该限制。5.0 同时移除了两个旧示例GraphiQL x Parcel和GraphiQL x Create React App如果之前参考它们请改用 Vite / Next.js / CDN 示例。graphiql/plugin-code-exporter与graphiql/plugin-explorer同样移除了 UMD 构建同样需要切到 ESM CDN 方式参见 packages/graphiql-plugin-code-exporter/example/index.html。迁移文档中 Next.js 示例的注释链接指向page.tsx而当前仓库中对应文件实际是 examples/graphiql-nextjs/src/app/graphiql.tsx以仓库实际文件为准。【免费下载链接】graphiqlGraphiQL the GraphQL LSP Reference Ecosystem for building browser IDE tools.项目地址: https://gitcode.com/GitHub_Trending/gr/graphiql创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 如何把 graphiql 从 4.x 升级到 5.0.0：Monaco 替换 CodeMirror 后要做哪些改动？
如何把 graphiql 从 4.x 升级到 5.0.0Monaco 替换 CodeMirror 后要做哪些改动【免费下载链接】graphiqlGraphiQL the GraphQL LSP Reference Ecosystem for building browser IDE tools.项目地址: https://gitcode.com/GitHub_Trending/gr/graphiql如果你的项目目前使用graphiql4.x升级到 5.0.0 时最核心的变化是操作编辑器从 CodeMirrorcodemirror-graphql换成了 Monaco Editormonaco-graphql。这带来一个必做动作——必须为你的构建环境配置 Monaco workers否则编辑器的语言服务自动补全、诊断等无法运行。本文依据仓库中的迁移文档 docs/migration/graphiql-5.0.0.md结合官方示例项目给出 Vite、Webpack/Next.js 和 ESM CDN 三条环境下需要做的具体改动以及 props、hooks、插件 API 的对应替换方式。升级前确认你的构建方式属于哪一类迁移文档把 worker 配置按构建方式分成三类升级前先确认自己属于哪一种环境要求的做法Vite 项目安装并配置vite-plugin-monaco-editor插件Webpack含 Turbopack项目如 Next.js在应用中import graphiql/setup-workers/webpackESM-based CDN 使用用?worker查询加载 worker 模块手动配置globalThis.MonacoEnvironment同时注意一个硬限制5.0.0移除了 UMD 构建。如果你之前通过 UMD 方式在 CDN 上加载 GraphiQL必须切换到 ESM-based 用法仓库提供 ESM CDN 示例。升级graphiql包本身时按 packages/graphiql/README.md 的说法react、react-dom和graphql是其 peer dependencies需一并安装npm install graphiql react react-dom graphqlVite 项目配置 vite-plugin-monaco-editorVite 项目分两步。1. 安装插件npm install vite-plugin-monaco-editor --save-dev2. 在vite.config.mjs中导入并配置插件迁移文档给出的配置新增部分以标出// vite.config.mjs import { defineConfig } from vite import react from vitejs/plugin-react import $monacoEditorPlugin from vite-plugin-monaco-editor const monacoEditorPlugin $monacoEditorPlugin.default ?? $monacoEditorPlugin export default defineConfig({ plugins: [ react(), monacoEditorPlugin({ languageWorkers: [editorWorkerService, json], customWorkers: [ { label: graphql, entry: monaco-graphql/esm/graphql.worker.js } ] }) ] })要点languageWorkers声明 Monaco 自带的editorWorkerService和json两个 workercustomWorkers中的entry: monaco-graphql/esm/graphql.worker.js就是 GraphQL 语言的 worker 入口标签label为graphql。仓库中的 Vite 示例 用的正是这份配置其vite.config.mjs与上面完全一致见 examples/graphiql-vite/vite.config.mjs应用侧只需渲染GraphiQL fetcher{fetcher} /并引入graphiql/style.css。可以作为升级后的参照实现直接对照。Next.js / Webpack 项目导入 setup-workers 模块对于 Webpack 和 Turbopack 项目如 Next.js迁移文档的要求只有一行导入import graphiql/setup-workers/webpack;放在渲染 GraphiQL 的模块顶部即可。仓库中的 Next.js 示例 的实际写法是标注use client的客户端组件use client; import { GraphiQL } from graphiql; import graphiql/setup-workers/webpack; import graphiql/style.css; export const GraphiQLPage () { return GraphiQL fetcher{fetcher} /; };这个导入最终解析到 packages/graphiql/src/setup-workers/webpack.ts再委托给graphiql/react中的实现。它会为json、graphql两类 worker 设置globalThis.MonacoEnvironment.getWorker其余情况回落到editor.worker见 packages/graphiql-react/src/setup-workers/webpack.ts。同理Vite 环境也有对应的graphiql/setup-workers/vite模块内部用?worker后缀导入 worker因为 Vite 需要提前知道会以 web worker 方式加载这些模块见 packages/graphiql-react/src/setup-workers/vite.ts——迁移文档中 Vite 路径推荐的是上面插件方式两者对应同一个目标。ESM-based CDN 使用用?worker加载 worker如果你在 ESM-based CDN 场景使用 GraphiQL必须通过?worker查询把模块作为 web worker 加载迁移文档原文给出的代码import createJSONWorker from https://esm.sh/monaco-editor/esm/vs/language/json/json.worker.js?worker; import createGraphQLWorker from https://esm.sh/monaco-graphql/esm/graphql.worker.js?worker; import createEditorWorker from https://esm.sh/monaco-editor/esm/vs/editor/editor.worker.js?worker; globalThis.MonacoEnvironment { getWorker(_workerId, label) { switch (label) { case json: return createJSONWorker(); case graphql: return createGraphQLWorker(); } return createEditorWorker(); }, };完整页面写法可对照 examples/graphiql-cdn/index.html。代码里需要跟着改的 APIprops、hooks 与插件配好 worker 之后凡是引用了 4.x 时代 API 的代码都要按迁移文档替换。被移除的 props 及其替代移除的 prop替代方式query/variables/headers新增的initialQuery/initialVariables/initialHeaders只作用于第一个 tab后续打开的 tab 操作编辑器从空开始response迁移文档中列在移除项里无直接替代 propreadOnly无直接替代keyMap用社区插件Monaco 的 vim 插件monaco-vim或 Emacs 插件monaco-emacsvalidationRules自定义 GraphQL worker见 packages/monaco-graphql/README.md 中关于向 worker 传递非静态配置的 custom web worker 说明被移除/弃用的 hooksgraphiql/react中以下 hooks 被弃用统一改用新的useGraphiQL和useGraphiQLActions详见 packages/graphiql-react/README.mdusePrettifyEditors、useCopyQuery、useMergeQueryuseExecutionContext、usePluginContext、useSchemaContext、useStorageContext另外useSynchronizeValuehook 被直接移除。插件包同理graphiql/plugin-history的useHistoryContext弃用改用useHistory/useHistoryActionsgraphiql/plugin-doc-explorer的useExplorerContext弃用改用useDocExplorer/useDocExplorerActions。ToolbarMenu组件变化label和classNameprops 被移除buttonprop 现在应该是一个 button 元素迁移文档示例ToolbarMenu labelOptions button{ ToolbarButton labelOptions SettingsIcon classNamegraphiql-toolbar-icon aria-hiddentrue / /ToolbarButton } ToolbarMenu.Item onSelect{() console.log(Clicked!)} Test /ToolbarMenu.Item /ToolbarMenu同时GraphiQL.Toolbar /现在接受children: ReactNode。插件默认项可以被整体覆盖了5.0 起可以覆盖所有默认插件当前默认是Doc Explorer和History移除全部默认插件设置referencePlugin{null}移除 Doc Explorer并把plugins传空数组移除 Historyimport { GraphiQL } from graphiql; const myPlugins []; function App() { return ( GraphiQL referencePlugin{null} // Removes Doc Explorer plugin plugins{myPlugins} // Removes History plugin / ); }添加自定义插件但保留 History必须显式把HISTORY_PLUGIN放进plugins数组否则 History 不再出现import { GraphiQL, HISTORY_PLUGIN } from graphiql; import { explorerPlugin } from graphiql/plugin-explorer; const myPlugins [HISTORY_PLUGIN, explorerPlugin()]; function App() { return GraphiQL plugins{myPlugins} /; }如果你用了自定义 Doc Explorer要传给referencePluginprop不要放进plugins数组——它会被自动包含且始终最先渲染。交互与行为变化升级后容易“以为是 bug”的点在操作编辑器中点击引用进行跳转现在需要按住 macOS 上的Cmd或 Windows/Linux 上的Ctrl再点击不再是普通单击。Doc Explorer 搜索输入框的聚焦快捷键从Cmd/CtrlK改为Cmd/CtrlAltK原因是 monaco-editor 自身占用了Cmd/CtrlK。Variables和Headers编辑器新增注释支持。修复类变化defaultQuery设为空字符串时确实得到空查询defaultQuery只用于第一个 tab操作编辑器中即使没有命名操作也会执行查询快捷键。升级后的验证方式文档给出的验证路径以官方示例为准对照运行官方示例。仓库为 5.0 新增了两个示例 graphiql x Vite 和 graphiql x Next.jsCDN 用法对照 graphiql-cdn。先确保与你的构建方式对应的示例能跑通再回比自己的改动。worker 是否被请求。setup-workers/webpack模块以及 Vite 版本在每次创建 worker 时会向控制台输出console.info(setup-workers/webpack, { label })Vite 版本输出setup-workers/vite见 packages/graphiql-react/src/setup-workers/vite.ts浏览器控制台中能看到带json/graphql标签的日志说明 worker 路由生效。编辑器语言行为。打开操作编辑器输入字段名确认自动补全、错误诊断正常——这些依赖 GraphQL worker再按Cmd/Ctrl点击引用验证跳转行为。快捷键。按Cmd/CtrlAltK聚焦 Doc Explorer 搜索框确认新快捷键生效。限制与注意事项initialQuery/initialVariables/initialHeaders只对第一个 tab 生效多开 tab 时后续 tab 为空。如果你在集成测试中依赖原来的query/variables/headersprops需要改成这些 initial 开头的 props 并接受该限制。5.0 同时移除了两个旧示例GraphiQL x Parcel和GraphiQL x Create React App如果之前参考它们请改用 Vite / Next.js / CDN 示例。graphiql/plugin-code-exporter与graphiql/plugin-explorer同样移除了 UMD 构建同样需要切到 ESM CDN 方式参见 packages/graphiql-plugin-code-exporter/example/index.html。迁移文档中 Next.js 示例的注释链接指向page.tsx而当前仓库中对应文件实际是 examples/graphiql-nextjs/src/app/graphiql.tsx以仓库实际文件为准。【免费下载链接】graphiqlGraphiQL the GraphQL LSP Reference Ecosystem for building browser IDE tools.项目地址: https://gitcode.com/GitHub_Trending/gr/graphiql创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考