GraphiQL: GraphQL IDE monorepo and language service
Browser-based GraphQL IDE with language service tooling.
Learn more about graphiql
GraphiQL is a monorepo project under the GraphQL Foundation that provides a reference implementation of a GraphQL IDE along with supporting libraries and services. The core GraphiQL IDE is a React-based application that runs in browsers and uses CodeMirror for editing with schema-driven language features. The monorepo includes a language service layer that powers editor features like completion and diagnostics, LSP server implementations for IDE integration, and editor mode packages for CodeMirror and Monaco Editor. These components can be used together as a complete IDE or individually integrated into other development tools and frameworks.
Modular monorepo structure
Separates concerns into independent packages including the IDE, language service, editor modes, and LSP server, allowing developers to adopt individual components or the complete ecosystem.
Multiple editor integrations
Provides language modes and plugins for CodeMirror 5, CodeMirror 6, and Monaco Editor, enabling GraphQL support across different editor platforms and use cases.
LSP and CLI tooling
Includes a Language Server Protocol implementation and command-line service for IDE integration beyond browser-based usage, supporting development environments like VS Code and other LSP-compatible editors.
import React from 'react';
import { GraphiQL } from 'graphiql';
import 'graphiql/graphiql.css';
function App() {
const fetcher = async (graphQLParams) => {
const response = await fetch('/graphql', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(graphQLParams),
});
return response.json();
};
return <GraphiQL fetcher={fetcher} />;
}Pins monaco-editor to 0.52.2 to resolve compatibility issues.
- –Pin monaco-editor dependency to version 0.52.2 to avoid breaking changes in newer releases.
- –Update @graphiql/react to 0.37.2 as a transitive dependency change.
Pins monaco-editor to 0.52.2 to prevent compatibility issues with newer versions.
- –Update dependencies to lock monaco-editor at version 0.52.2 for stability.
- –No breaking changes or migration steps required for this patch release.
Adds loader for operation editor initial state, command palette styling fixes, and settings dialog keyboard shortcut.
- –Use new loader UI during operation editor initialization to improve perceived performance.
- –Open GraphiQL settings dialog with Cmd/Ctrl + , keyboard shortcut for faster configuration access.
Top in Backend & APIs
Related Repositories
Discover similar tools and frameworks used by developers
magento2
Modular PHP platform for self-hosted ecommerce storefronts.
beego
MVC framework for Go with integrated ORM and routing.
celery
Asynchronous task queue with distributed worker execution.
erpnext
Full-featured ERP system built on Frappe Framework.
dompdf
CSS 2.1 compliant HTML layout and rendering engine.