dynamically import monaco-editor and monaco-graphql

.changeset/chilled-peaches-wonder.md

@@ -0,0 +1,23 @@
+---
+'@graphiql/react': patch
+'monaco-graphql': patch
+'graphql-language-service': minor
+'graphiql': minor
+---
+
+feat(graphql-language-service): export `getContextAtPosition`
+feat(graphiql): dynamically import `monaco-editor` and `monaco-graphql`
+
+When using GraphiQL in Next.js app, you no longer need to use `next/dynamic`:
+
+```diff
+-import dynamic from 'next/dynamic'
+-const GraphiQL = dynamic(() => import('graphiql').then(mod => mod.GraphiQL), {
+-  ssr: false
+-})
++import { GraphiQL } from 'graphiql'
+```
+
+When using GraphiQL with [React Router’s SSR mode](https://reactrouter.com/api/framework-conventions/react-router.config.ts#ssr),
+you no longer need to mark the GraphiQL component as a [client module](https://reactrouter.com/api/framework-conventions/client-modules)
+by adding `.client` to the file name.

.eslintrc.js

@@ -18,6 +18,7 @@ const RESTRICTED_IMPORTS = [
     name: 'monaco-editor',
     message:
       '`monaco-editor` imports all languages; use `monaco-graphql/esm/monaco-editor` instead to import only `json` and `graphql` languages',
+    allowTypeImports: true,
   },
 ];
 

examples/graphiql-cdn/index.html

@@ -33,8 +33,11 @@
       rel="stylesheet"
       href="https://esm.sh/@graphiql/plugin-explorer/dist/style.css"
     />
-    <!-- Note: the ?standalone flag bundles the module along with all of its `dependencies`, excluding `peerDependencies`, into a single JavaScript file. -->
-    <!-- `@emotion/is-prop-valid` is a shim to remove the console error `module "@emotion /is-prop-valid" not found`. Upstream issue: https://github.com/motiondivision/motion/issues/3126 -->
+    <!--
+     * Note:
+     * The ?standalone flag bundles the module along with all of its `dependencies`, excluding `peerDependencies`, into a single JavaScript file.
+     * `@emotion/is-prop-valid` is a shim to remove the console error ` module "@emotion /is-prop-valid" not found`. Upstream issue: https://github.com/motiondivision/motion/issues/3126
+    -->
     <script type="importmap">
       {
         "imports": {
@@ -55,10 +58,8 @@
       }
     </script>
     <script type="module">
-      // Import React and ReactDOM
       import React from 'react';
       import ReactDOM from 'react-dom/client';
-      // Import GraphiQL and the Explorer plugin
       import { GraphiQL, HISTORY_PLUGIN } from 'graphiql';
       import { createGraphiQLFetcher } from '@graphiql/toolkit';
       import { explorerPlugin } from '@graphiql/plugin-explorer';

examples/graphiql-nextjs/src/app/page.tsx → examples/graphiql-nextjs/src/app/graphiql.tsx

@@ -1,15 +1,10 @@
 'use client';
 
 import type { FC } from 'react';
-import dynamic from 'next/dynamic';
+import { GraphiQL } from 'graphiql';
 import 'graphiql/setup-workers/webpack';
 import 'graphiql/style.css';
 
-// dynamically import our GraphiQL component
-const GraphiQL = dynamic(() => import('graphiql').then(mod => mod.GraphiQL), {
-  ssr: false,
-});
-
 async function fetcher(graphQLParams: Record<string, unknown>) {
   const response = await fetch('https://graphql.earthdata.nasa.gov/api', {
     method: 'POST',
@@ -22,8 +17,6 @@ async function fetcher(graphQLParams: Record<string, unknown>) {
   return response.json();
 }
 
-const Page: FC = () => {
+export const GraphiQLPage: FC = () => {
   return <GraphiQL fetcher={fetcher} />;
 };
-
-export default Page;

examples/graphiql-nextjs/src/app/layout.tsx

@@ -3,7 +3,9 @@ import type { Metadata } from 'next';
 import './globals.css';
 
 export const metadata: Metadata = {
-  title: 'GraphiQL Next.js Example',
+  description: 'Example of using GraphiQL with the Next.js App Router',
+  // Empty object adds open graph and twitter meta-tags
+  openGraph: {},
 };
 
 const RootLayout: FC<Readonly<{ children: ReactNode }>> = ({ children }) => {

examples/graphiql-nextjs/src/app/page.ts

@@ -0,0 +1,7 @@
+import type { Metadata } from 'next';
+
+export { GraphiQLPage as default } from './graphiql';
+
+export const metadata: Metadata = {
+  title: 'GraphiQL Next.js Example',
+};

packages/graphiql-react/README.md

@@ -91,6 +91,7 @@ React hooks.
 
 - **`useStorage`**: Provides a storage API that can be used to persist state in the browser (by default using `localStorage`).
 - **`useTheme`**: Manages the current theme and provides a method to update it.
+- **`useMonaco`**: Access `monaco-editor` exports and the `monaco-graphql` instance. Designed for safe use in SSR environments.
 - **`useGraphiQL`**: Access the current state.
 - **`useGraphiQLActions`**: Trigger actions that mutate the state. This hook **never** rerenders.
 

packages/graphiql-react/src/components/operation-editor.tsx

@@ -1,8 +1,11 @@
 import { getSelectedOperationName } from '@graphiql/toolkit';
 import type { DocumentNode } from 'graphql';
-import { getOperationFacts } from 'graphql-language-service';
+import {
+  getOperationFacts,
+  getContextAtPosition,
+} from 'graphql-language-service';
 import { FC, useEffect, useRef } from 'react';
-import { useStorage } from '../stores';
+import { useMonaco, useStorage } from '../stores';
 import { useGraphiQL, useGraphiQLActions } from './provider';
 import {
   debounce,
@@ -12,24 +15,18 @@ import {
   pick,
   cleanupDisposables,
   cn,
+  Uri,
+  Range,
 } from '../utility';
 import type { MonacoEditor, EditorProps, SchemaReference } from '../types';
 import {
   KEY_BINDINGS,
   URI_NAME,
   STORAGE_KEY,
   MONACO_GRAPHQL_DIAGNOSTIC_SETTINGS,
-  MONACO_GRAPHQL_API,
 } from '../constants';
-import {
-  type editor as monacoEditor,
-  languages,
-  Range,
-  Uri,
-} from '../monaco-editor';
-import * as monaco from '../monaco-editor';
-import { getContextAtPosition } from 'graphql-language-service/esm/parser';
-import { toGraphQLPosition } from 'monaco-graphql/esm/utils';
+import type * as monaco from 'monaco-editor';
+import { toGraphQLPosition } from 'monaco-graphql/esm/utils.js';
 
 interface OperationEditorProps extends EditorProps {
   /**
@@ -179,7 +176,7 @@ export const OperationEditor: FC<OperationEditorProps> = ({
       : null;
   }
 
-  const runAtCursorRef = useRef<monacoEditor.IActionDescriptor['run']>(null!);
+  const runAtCursorRef = useRef<monaco.editor.IActionDescriptor['run']>(null!);
 
   useEffect(() => {
     runAtCursorRef.current = editor => {
@@ -209,7 +206,12 @@ export const OperationEditor: FC<OperationEditorProps> = ({
     };
   }, [operationName, operations, run, setOperationName]);
 
+  const { monacoGraphQL, monaco } = useMonaco();
+
   useEffect(() => {
+    if (!monaco || !monacoGraphQL) {
+      return;
+    }
     const operationUri = Uri.file(`${uriInstanceId}${URI_NAME.operation}`);
     const variablesUri = Uri.file(`${uriInstanceId}${URI_NAME.variables}`);
     /**
@@ -218,10 +220,7 @@ export const OperationEditor: FC<OperationEditorProps> = ({
      */
     const { validateVariablesJSON } = MONACO_GRAPHQL_DIAGNOSTIC_SETTINGS;
     validateVariablesJSON![operationUri.toString()] = [variablesUri.toString()];
-    MONACO_GRAPHQL_API.setDiagnosticSettings(
-      MONACO_GRAPHQL_DIAGNOSTIC_SETTINGS,
-    );
-    globalThis.__MONACO = monaco;
+    monacoGraphQL.setDiagnosticSettings(MONACO_GRAPHQL_DIAGNOSTIC_SETTINGS);
     const model = getOrCreateModel({
       uri: operationUri.path.replace('/', ''),
       value: initialQuery,
@@ -266,16 +265,16 @@ export const OperationEditor: FC<OperationEditorProps> = ({
       model,
     ];
     return cleanupDisposables(disposables);
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps -- only on mount
+  }, [monaco, monacoGraphQL]); // eslint-disable-line react-hooks/exhaustive-deps -- only on mount
 
   useEffect(() => {
-    if (!schema) {
+    if (!schema || !monaco || !monacoGraphQL) {
       return;
     }
-    MONACO_GRAPHQL_API.setSchemaConfig([
+    monacoGraphQL.setSchemaConfig([
       { uri: `${uriInstanceId}${URI_NAME.schema}`, schema },
     ]);
-    MONACO_GRAPHQL_API.setExternalFragmentDefinitions([
+    monacoGraphQL.setExternalFragmentDefinitions([
       ...externalFragments.values(),
     ]);
     if (!referencePlugin) {
@@ -285,7 +284,7 @@ export const OperationEditor: FC<OperationEditorProps> = ({
     let currentSchemaReference: SchemaReference | null = null;
 
     const disposables = [
-      languages.registerDefinitionProvider('graphql', {
+      monaco.languages.registerDefinitionProvider('graphql', {
         provideDefinition(model, position, _token) {
           const graphQLPosition = toGraphQLPosition(position);
           const context = getContextAtPosition(
@@ -321,7 +320,7 @@ export const OperationEditor: FC<OperationEditorProps> = ({
           currentSchemaReference = null;
         },
       }),
-      languages.registerReferenceProvider('graphql', {
+      monaco.languages.registerReferenceProvider('graphql', {
         provideReferences(model, { lineNumber, column }, _context, _token) {
           if (!currentSchemaReference) {
             return;
@@ -343,6 +342,8 @@ export const OperationEditor: FC<OperationEditorProps> = ({
     setVisiblePlugin,
     externalFragments,
     uriInstanceId,
+    monacoGraphQL,
+    monaco,
   ]);
 
   return (

packages/graphiql-react/src/components/provider.tsx

@@ -12,6 +12,7 @@ import {
   ExecutionProps,
   PluginProps,
   SchemaProps,
+  monacoStore,
 } from '../stores';
 import { StorageStore, useStorage } from '../stores/storage';
 import { ThemeStore } from '../stores/theme';
@@ -27,11 +28,9 @@ import {
 import {
   DEFAULT_PRETTIFY_QUERY,
   DEFAULT_QUERY,
-  JSON_DIAGNOSTIC_OPTIONS,
   STORAGE_KEY,
 } from '../constants';
 import { getDefaultTabState } from '../utility/tabs';
-import { languages } from '../monaco-editor';
 
 interface InnerGraphiQLProviderProps
   extends EditorProps,
@@ -117,6 +116,12 @@ useEffect(() => {
 }, [response])`,
     );
   }
+
+  useEffect(() => {
+    const { actions } = monacoStore.getState();
+    void actions.initialize();
+  }, []);
+
   return (
     <StorageStore storage={storage}>
       <ThemeStore defaultTheme={defaultTheme} editorTheme={editorTheme}>
@@ -330,16 +335,6 @@ const InnerGraphiQLProvider: FC<InnerGraphiQLProviderProps> = ({
     };
   }, []);
 
-  useEffect(() => {
-    /**
-     * Set diagnostics options for JSON
-     *
-     * Setting it on mount fix Uncaught TypeError: Cannot read properties of undefined (reading 'jsonDefaults')
-     * @see https://github.com/graphql/graphiql/pull/4042#issuecomment-3017167375
-     */
-    languages.json.jsonDefaults.setDiagnosticsOptions(JSON_DIAGNOSTIC_OPTIONS);
-  }, []);
-
   return (
     <GraphiQLContext.Provider value={storeRef}>
       {children}

packages/graphiql-react/src/components/request-headers-editor.tsx

@@ -11,6 +11,7 @@ import {
   cleanupDisposables,
   cn,
 } from '../utility';
+import { useMonaco } from '../stores';
 
 interface RequestHeadersEditorProps extends EditorProps {
   /**
@@ -29,12 +30,16 @@ export const RequestHeadersEditor: FC<RequestHeadersEditorProps> = ({
     pick('initialHeaders', 'shouldPersistHeaders', 'uriInstanceId'),
   );
   const ref = useRef<HTMLDivElement>(null!);
+  const monaco = useMonaco(state => state.monaco);
   useChangeHandler(
     onEdit,
     shouldPersistHeaders ? STORAGE_KEY.headers : null,
     'headers',
   );
   useEffect(() => {
+    if (!monaco) {
+      return;
+    }
     const model = getOrCreateModel({
       uri: `${uriInstanceId}${URI_NAME.requestHeaders}`,
       value: initialHeaders,
@@ -49,7 +54,7 @@ export const RequestHeadersEditor: FC<RequestHeadersEditorProps> = ({
       model,
     ];
     return cleanupDisposables(disposables);
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps -- only on mount
+  }, [monaco]); // eslint-disable-line react-hooks/exhaustive-deps -- only on mount
 
   return (
     <div

packages/graphiql-react/src/components/response-editor.tsx

@@ -10,21 +10,22 @@ import {
   pick,
   cleanupDisposables,
   cn,
+  Range,
 } from '../utility';
 import { KEY_BINDINGS, URI_NAME } from '../constants';
 import type { EditorProps } from '../types';
-import type { editor as monacoEditor, Position } from '../monaco-editor';
-import { Range, languages } from '../monaco-editor';
+import type * as monaco from 'monaco-editor';
+import { useMonaco } from '../stores';
 
 type ResponseTooltipType = ComponentType<{
   /**
    * A position in the editor.
    */
-  position: Position;
+  position: monaco.Position;
   /**
    * Word that has been hovered over.
    */
-  word: monacoEditor.IWordAtPosition;
+  word: monaco.editor.IWordAtPosition;
 }>;
 
 interface ResponseEditorProps extends EditorProps {
@@ -44,6 +45,7 @@ export const ResponseEditor: FC<ResponseEditorProps> = ({
       pick('fetchError', 'validationErrors', 'responseEditor', 'uriInstanceId'),
     );
   const ref = useRef<HTMLDivElement>(null!);
+  const monaco = useMonaco(state => state.monaco);
   useEffect(() => {
     if (fetchError) {
       responseEditor?.setValue(fetchError);
@@ -54,6 +56,9 @@ export const ResponseEditor: FC<ResponseEditorProps> = ({
   }, [responseEditor, fetchError, validationErrors]);
 
   useEffect(() => {
+    if (!monaco) {
+      return;
+    }
     const model = getOrCreateModel({
       uri: `${uriInstanceId}${URI_NAME.response}`,
       value: '',
@@ -70,7 +75,7 @@ export const ResponseEditor: FC<ResponseEditorProps> = ({
     let lastRoot: Root | undefined;
     let timerId: ReturnType<typeof setTimeout> | undefined;
 
-    const provideHover: languages.HoverProvider['provideHover'] = (
+    const provideHover: monaco.languages.HoverProvider['provideHover'] = (
       $model,
       position,
     ) => {
@@ -129,13 +134,13 @@ export const ResponseEditor: FC<ResponseEditorProps> = ({
     };
     const languageId = model.getLanguageId();
     const disposables = [
-      languages.registerHoverProvider(languageId, { provideHover }),
+      monaco.languages.registerHoverProvider(languageId, { provideHover }),
       editor.addAction({ ...KEY_BINDINGS.runQuery, run }),
       editor,
       model,
     ];
     return cleanupDisposables(disposables);
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps -- only on mount
+  }, [monaco]); // eslint-disable-line react-hooks/exhaustive-deps -- only on mount
 
   return (
     <section