将 @graphiql/react 从 0.x 升级到 1.x
根据 TypeScript 类型自动比较 @graphiql/react 0.39.1 与 1.0.0 的公开 API。签名变化表示可能存在不兼容变更,并非确定结论。
概要
| 已删除的导入路径 | 0 |
|---|---|
| 已删除的导出 | 15 |
| 已修改的签名 | 3 |
| 已删除的类或接口成员 | 2 |
| 已修改的类或接口成员 | 1 |
| 新增弃用 | 1 |
| 要求变化(engines、peer 依赖) | 1 |
| 新增导出 | 45 |
已删除的导出
| import | export | kind | 之前 |
|---|---|---|---|
@graphiql/react | cn | variable | any |
@graphiql/react | useTheme | function | (): { setTheme: (newTheme: Theme) => void; theme: Theme; } |
@graphiql/react | useStorage | variable | (): any |
@graphiql/react | useCopyQuery | function | (): () => Promise<void> |
@graphiql/react | useMergeQuery | function | (): () => void |
@graphiql/react | useEditorStore | variable | (): { externalFragments: Map<string, any>; shouldPersistHeaders: boolean; initialQuery: string; initialVariables: string; initialHeaders: string; headerEditor?: any; queryEditor?: any; responseEditor?: any; variableEditor?: any; addTab: () => void; changeTab: (index: number) => void; moveTab: (newOrder: TabState[]) => void; closeTab: (index: number) => void; updateActiveTabValues: (partialTab: Partial<Omit<TabState, "id" | "hash" | "title">>) => void; setHeaderEditor: (headerEditor: monaco.editor.IStandaloneCodeEditor) => void; setQueryEditor: (queryEditor: monaco.editor.IStandaloneCodeEditor)… |
@graphiql/react | usePluginStore | variable | (): { plugins: GraphiQLPlugin[]; visiblePlugin: GraphiQLPlugin | null; setVisiblePlugin: (plugin?: string | GraphiQLPlugin | null | undefined) => void; } |
@graphiql/react | useSchemaStore | variable | (): { isFetching: boolean; fetchError: string | null; schema: any; validationErrors: readonly any[]; introspect: () => Promise<void>; } |
@graphiql/react | useEditorContext | function | (): { externalFragments: Map<string, any>; shouldPersistHeaders: boolean; initialQuery: string; initialVariables: string; initialHeaders: string; headerEditor?: any; queryEditor?: any; responseEditor?: any; variableEditor?: any; addTab: () => void; changeTab: (index: number) => void; moveTab: (newOrder: TabState[]) => void; closeTab: (index: number) => void; updateActiveTabValues: (partialTab: Partial<Omit<TabState, "id" | "hash" | "title">>) => void; setHeaderEditor: (headerEditor: monaco.editor.IStandaloneCodeEditor) => void; setQueryEditor: (queryEditor: monaco.editor.IStandaloneCodeEditor)… |
@graphiql/react | usePluginContext | function | (): { plugins: GraphiQLPlugin[]; visiblePlugin: GraphiQLPlugin | null; setVisiblePlugin: (plugin?: string | GraphiQLPlugin | null | undefined) => void; } |
@graphiql/react | useSchemaContext | function | (): { isFetching: boolean; fetchError: string | null; schema: any; validationErrors: readonly any[]; introspect: () => Promise<void>; } |
@graphiql/react | useExecutionStore | variable | (): { isFetching: boolean; isSubscribed: boolean; operationName: string | undefined; run: () => void; stop: () => void; } |
@graphiql/react | useStorageContext | variable | (): any |
@graphiql/react | usePrettifyEditors | function | (): () => Promise<void> |
@graphiql/react | useExecutionContext | function | (): { isFetching: boolean; isSubscribed: boolean; operationName: string | undefined; run: () => void; stop: () => void; } |
已修改的签名
| export | 之前 | 之后 |
|---|---|---|
@graphiql/react · Theme | "light" | "dark" | null | "dark" | "light" | null |
@graphiql/react · KEY_MAP | Readonly<{ prettify: { key: string; keybindings: number[]; }; mergeFragments: { key: string; keybindings: number[]; }; runQuery: { key: string; keybindings: number[]; }; autoComplete: { key: string; }; copyQuery: { key: string; keybindings: number[]; }; refetchSchema: { key: string; }; searchInEditor: { key: string; }; searchInDocs: { key: string; }; }> | Readonly<{ prettify: { key: string; keybindings: number[]; }; mergeFragments: { key: string; keybindings: number[]; }; runQuery: { key: string; keybindings: number[]; }; autoComplete: { key: string; }; copyQuery: { key: string; keybindings: number[]; }; saveQuery: { key: string; keybindings: number[]; }; refetchSchema: { key: string; }; searchInEditor: { key: string; }; searchInDocs: { key: string; }; }> |
@graphiql/react · debounce | <F extends (...args: any[]) => any>(duration: number, fn: F): F | <F extends (...args: any[]) => any>(duration: number, fn: F): DebouncedFn<F> |
已删除的类或接口成员
| member | import | 之前 |
|---|---|---|
SlicesWithActions.monacoTheme | @graphiql/react | any |
SlicesWithActions.overrideOperationName | @graphiql/react | string | null |
已修改的类或接口成员
| member | 之前 | 之后 |
|---|---|---|
SlicesWithActions.fetcher | Fetcher | any |
新增弃用
| export | @deprecated |
|---|---|
@graphiql/react · SlicesWithActions.fetcher | Pass a `transport` instead. The `Fetcher` contract cannot surface HTTP wire metadata (status, headers, timing, size). See `docs/migration/graphiql-6.0.0.md`. |
要求变化(engines、peer 依赖)
| 之前 | 之后 | |
|---|---|---|
peerDependencies.graphql | ^15.5.0 || ^16.0.0 || ^17.0.0 | ^16.11.0 || ^17.0.0 |
新增导出 (45)
| import | export | kind |
|---|---|---|
@graphiql/react | TopBar | variable |
@graphiql/react | Density | type |
@graphiql/react | FontSize | type |
@graphiql/react | MODIFIER | variable |
@graphiql/react | SaveIcon | variable |
@graphiql/react | CleanupFn | type |
@graphiql/react | Operation | variable |
@graphiql/react | SidePanel | variable |
@graphiql/react | StatusBar | variable |
@graphiql/react | KeycapHint | variable |
@graphiql/react | MethodPill | variable |
@graphiql/react | ModifierKey | type |
@graphiql/react | PanelHeader | variable |
@graphiql/react | SaveHandler | type |
@graphiql/react | TopBarProps | type |
@graphiql/react | ActivityRail | variable |
@graphiql/react | ResponseView | type |
@graphiql/react | typeCategory | function |
@graphiql/react | SettingsTheme | type |
@graphiql/react | VarHeadersTab | type |
@graphiql/react | PortalProvider | variable |
@graphiql/react | SettingsDialog | variable |
@graphiql/react | GraphQLLogoIcon | variable |
@graphiql/react | KeycapHintProps | type |
@graphiql/react | MethodPillProps | type |
@graphiql/react | VarHeadersStrip | variable |
@graphiql/react | ConnectionStatus | type |
@graphiql/react | GraphiQLSettings | type |
@graphiql/react | PanelHeaderProps | type |
@graphiql/react | QueryBuilderIcon | variable |
@graphiql/react | SegmentedControl | function |
@graphiql/react | ActivityRailProps | interface |
@graphiql/react | OnResponseCallback | type |
@graphiql/react | usePortalContainer | function |
@graphiql/react | GraphQLTypeCategory | type |
@graphiql/react | SettingsDialogProps | interface |
@graphiql/react | useGraphiQLSettings | function |
@graphiql/react | OnBeforeSendCallback | type |
@graphiql/react | SETTINGS_STORAGE_KEY | variable |
@graphiql/react | VarHeadersStripProps | type |
@graphiql/react | GraphiQLPluginContext | type |
@graphiql/react | SegmentedControlProps | type |
@graphiql/react | PluginTransportContext | type |
@graphiql/react | SegmentedControlOption | type |
@graphiql/react | useGraphiQLPluginContext | function |
把这些数据交给你的 AI 智能体
Vigia 是免费的 MCP 服务器:你的编程智能体在写代码之前就能检查版本、不兼容变更和安全漏洞。无需注册,无需 API 密钥。
claude mcp add --transport http vigia https://vigia.coredls.cloud/mcp
添加到 Cursor添加到 VS Code★ 在 GitHub 上加星
任何其他 MCP 客户端
{ "mcpServers": { "vigia": { "url": "https://vigia.coredls.cloud/mcp" } } }常见问题
将 @graphiql/react 从 0 升级到 1 有哪些不兼容变更?
在 @graphiql/react 0.39.1 与 1.0.0 之间,Vigia 发现 15 个已删除的导出、3 个已修改的签名,以及 3 个已删除或修改的类或接口成员。
@graphiql/react 1 中弃用了哪些内容?
@graphiql/react 1.0.0 中有 1 个导出或成员新被标记为弃用。
供智能体使用
GET https://vigia.coredls.cloud/v1/packages/npm/@graphiql/react/upgrade?from=0.39.1&to=1.0.0