Install & Compatibility
Where this runs
No compatibility data collected yet for this library.
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
GraphQLDocumentor
✓ import { GraphQLDocumentor } from 'graphql-editor'
✗ import GraphQLDocumentor from 'graphql-editor'
Named export, not default. ESM-only since v7.
GraphQLEditor
✓ import { GraphQLEditor } from 'graphql-editor'
✗ const GraphQLEditor = require('graphql-editor')
Named export. CJS require works only with default export, but this is a named export.
GraphQLEditorProvider
✓ import { GraphQLEditorProvider } from 'graphql-editor'
✗ import { GrapqhQLEditorProvider } from 'graphql-editor'
Typo error in the symbol name.
useGraphQLEditor
✓ import { useGraphQLEditor } from 'graphql-editor'
React hook, should be used inside a component wrapped in GraphQLEditorProvider.
Renders a GraphQL editor component with a basic schema and save handler. Shows the minimal setup with React 18.
import React from 'react';
import { GraphQLEditor } from 'graphql-editor';
import '@monaco-editor/react';
function App() {
const schema = `type Query { hello: String }`;
return (
<div style={{ height: '100vh' }}>
<GraphQLEditor
schema={schema}
setSchema={(s) => console.log(s)}
onSave={() => console.log('Saved')}
defaultLanguage="en"
/>
</div>
);
}
export default App;
Errors
Common errors & fixes
Module not found: Can't resolve 'graphql-editor'
Package not installed or import path incorrect.
fixRun 'npm install graphql-editor' and ensure import is correct: 'import { GraphQLEditor } from 'graphql-editor'' Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
useGraphQLEditor hook used outside of a GraphQLEditorProvider.
fixWrap your component with <GraphQLEditorProvider> before using useGraphQLEditor.
Monaco Editor not loading. Check your webpack configuration for worker-loader.
Missing or misconfigured worker-loader for Monaco Editor workers.
fixAdd 'worker-loader' to webpack config: { test: /\.worker\.ts$/, use: 'worker-loader' } TypeError: Cannot destructure property 'schema' of 'undefined' or 'null'.
The GraphQLEditor component is not receiving a schema string prop.
fixEnsure the 'schema' prop is a non-null string.
Audit
Dependencies
@monaco-editor/reactrequiredProvides the Monaco code editor component for editing GraphQL schemas and resolvers.
monaco-editorrequiredUnderlying editor core required by @monaco-editor/react.
reactrequiredUI framework dependency (React 18+).
react-domrequiredReact DOM renderer.
webpackrequiredRequired for bundling; graphql-editor uses webpack worker-loader.
worker-loaderrequiredWebpack loader for web workers used by Monaco Editor.
css-loaderoptionalWebpack loader for CSS files.
file-loaderoptionalWebpack loader for font files used by Monaco Editor.