use prettier format for query editor since we already use prettier for jsonc editors (#4049)

dimaMachina · web-flow · commit 2c0586d1f3db · 2025-07-02T17:25:10.000+02:00
* use `allowTrailingComma` option in jsonc parser to make `tryParseJsonObject` sync
parse introspection headers with jsonc parser

* use `allowTrailingComma` option in jsonc parser to make `tryParseJsonObject` sync
parse introspection headers with jsonc parser

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* rm
diff --git a/.changeset/proud-bottles-punch.md b/.changeset/proud-bottles-punch.md
@@ -0,0 +1,8 @@
+---
+'@graphiql/react': patch
+'graphiql': patch
+---
+
+- use `allowTrailingComma` option in jsonc parser to make `tryParseJsonObject` sync
+- parse introspection headers with jsonc parser
+- use prettier format for query editor since we already use prettier for jsonc editors
diff --git a/packages/graphiql-react/src/constants.ts b/packages/graphiql-react/src/constants.ts
@@ -1,6 +1,9 @@
 /* eslint-disable no-bitwise */
 import { initializeMode } from 'monaco-graphql/esm/lite.js';
-import { parse, print } from 'graphql';
+// @ts-expect-error -- wrong types
+import { printers } from 'prettier/plugins/graphql'; // eslint-disable-line import-x/no-duplicates
+import { parsers } from 'prettier/parser-graphql'; // eslint-disable-line import-x/no-duplicates
+import prettier from 'prettier/standalone';
 import { KeyCode, KeyMod, Uri, languages } from './monaco-editor';
 import type { EditorSlice } from './stores';
 
@@ -143,4 +146,12 @@ export const MONACO_GRAPHQL_API = initializeMode({
 });
 
 export const DEFAULT_PRETTIFY_QUERY: EditorSlice['onPrettifyQuery'] = query =>
-  print(parse(query));
+  prettier.format(query, {
+    parser: 'graphql',
+    plugins: [
+      // Fix: Couldn't find plugin for AST format "graphql"
+      { printers },
+      // @ts-expect-error -- Fix: Couldn't resolve parser "graphql"
+      { parsers },
+    ],
+  });
diff --git a/packages/graphiql-react/src/stores/editor.ts b/packages/graphiql-react/src/stores/editor.ts
@@ -117,9 +117,9 @@ export interface EditorSlice extends TabsState {
    * Invoked when the prettify callback is invoked.
    * @param query - The current value of the query editor.
    * @default
-   * import { parse, print } from 'graphql'
+   * import prettier from 'prettier/standalone'
    *
-   * (query) => print(parse(query))
+   * prettier.format(query, { parser: 'graphql' })
    * @returns The formatted query.
    */
   onPrettifyQuery: (query: string) => MaybePromise<string>;
diff --git a/packages/graphiql-react/src/stores/execution.ts b/packages/graphiql-react/src/stores/execution.ts
@@ -14,7 +14,7 @@ import setValue from 'set-value';
 import getValue from 'get-value';
 
 import type { StateCreator } from 'zustand';
-import { formatJSONC, parseJSONC } from '../utility';
+import { tryParseJSONC } from '../utility';
 import type { SlicesWithActions, MonacoEditor } from '../types';
 import { Range } from '../monaco-editor';
 
@@ -214,19 +214,14 @@ export const createExecutionSlice: CreateExecutionSlice =
             actions.updateActiveTabValues({ response: value });
           }
 
-          function setError(error: unknown, editor?: MonacoEditor): void {
+          function setError(error: Error, editor?: MonacoEditor): void {
             if (!editor) {
               return;
             }
-            let message;
-            const name = editor === variableEditor ? 'Variables' : 'Headers';
-            if (error instanceof TypeError) {
-              message = `${name} are not a JSON object.`;
-            } else {
-              message = `${name} are invalid JSON: ${error instanceof Error ? error.message : error}.`;
-            }
-            // Need to stringify since the response editor uses `json` language
-            setResponse(formatError({ message }));
+            const name =
+              editor === variableEditor ? 'Variables' : 'Request headers';
+            // Need to format since the response editor uses `json` language
+            setResponse(formatError({ message: `${name} ${error.message}` }));
           }
 
           const newQueryId = queryId + 1;
@@ -239,16 +234,16 @@ export const createExecutionSlice: CreateExecutionSlice =
 
           let variables: Record<string, unknown> | undefined;
           try {
-            variables = await tryParseJsonObject(variableEditor?.getValue());
+            variables = tryParseJSONC(variableEditor?.getValue());
           } catch (error) {
-            setError(error, variableEditor);
+            setError(error as Error, variableEditor);
             return;
           }
           let headers: Record<string, unknown> | undefined;
           try {
-            headers = await tryParseJsonObject(headerEditor?.getValue());
+            headers = tryParseJSONC(headerEditor?.getValue());
           } catch (error) {
-            setError(error, headerEditor);
+            setError(error as Error, headerEditor);
             return;
           }
           const fragmentDependencies = documentAST
@@ -338,23 +333,6 @@ export const createExecutionSlice: CreateExecutionSlice =
     };
   };
 
-async function tryParseJsonObject(
-  json = '',
-): Promise<Record<string, unknown> | undefined> {
-  // `jsonc-parser` doesn't support trailing commas,
-  // so we need first to format with prettier, which will remove them
-  const formatted = await formatJSONC(json);
-  const parsed = parseJSONC(formatted);
-  if (!parsed) {
-    return;
-  }
-  const isObject = typeof parsed === 'object' && !Array.isArray(parsed);
-  if (!isObject) {
-    throw new TypeError();
-  }
-  return parsed;
-}
-
 interface IncrementalResult {
   data?: Record<string, unknown> | null;
   errors?: ReadonlyArray<GraphQLError>;
diff --git a/packages/graphiql-react/src/stores/schema.ts b/packages/graphiql-react/src/stores/schema.ts
@@ -15,6 +15,7 @@ import {
 import type { Dispatch } from 'react';
 import type { StateCreator } from 'zustand';
 import type { SlicesWithActions, SchemaReference } from '../types';
+import { tryParseJSONC } from '../utility';
 
 type MaybeGraphQLSchema = GraphQLSchema | null | undefined;
 
@@ -59,7 +60,9 @@ export const createSchemaSlice: CreateSchemaSlice = initial => (set, get) => ({
         onSchemaChange,
         headerEditor,
         fetcher,
-        ...rest
+        inputValueDeprecation,
+        introspectionQueryName,
+        schemaDescription,
       } = get();
 
       /**
@@ -71,67 +74,57 @@ export const createSchemaSlice: CreateSchemaSlice = initial => (set, get) => ({
         return;
       }
       const counter = requestCounter + 1;
-      set({ requestCounter: counter });
-
+      set({ requestCounter: counter, isIntrospecting: true, fetchError: null });
       try {
-        const currentHeaders = headerEditor?.getValue();
-        const parsedHeaders = parseHeaderString(currentHeaders);
-        if (!parsedHeaders.isValidJSON) {
-          set({ fetchError: 'Introspection failed as headers are invalid.' });
-          return;
+        let headers: Record<string, unknown> | undefined;
+        try {
+          headers = tryParseJSONC(headerEditor?.getValue());
+        } catch (error) {
+          throw new Error(
+            `Introspection failed. Request headers ${error instanceof Error ? error.message : error}`,
+          );
         }
 
-        const fetcherOpts: FetcherOpts = parsedHeaders.headers
-          ? { headers: parsedHeaders.headers }
-          : {};
-
+        const fetcherOpts: FetcherOpts = headers ? { headers } : {};
         /**
          * Get an introspection query for settings given via props
          */
-        const {
-          introspectionQuery,
-          introspectionQueryName,
-          introspectionQuerySansSubscriptions,
-        } = generateIntrospectionQuery(rest);
-        const fetch = fetcherReturnToPromise(
-          fetcher(
-            {
-              query: introspectionQuery,
-              operationName: introspectionQueryName,
-            },
-            fetcherOpts,
-          ),
-        );
-
-        if (!isPromise(fetch)) {
-          set({
-            fetchError: 'Fetcher did not return a Promise for introspection.',
-          });
-          return;
-        }
-        set({ isIntrospecting: true, fetchError: null });
-        let result = await fetch;
+        const introspectionQuery = getIntrospectionQuery({
+          inputValueDeprecation,
+          schemaDescription,
+        });
 
-        if (typeof result !== 'object' || !('data' in result)) {
-          // Try the stock introspection query first, falling back on the
-          // sans-subscriptions query for services which do not yet support it.
-          const fetch2 = fetcherReturnToPromise(
+        function doIntrospection(query: string) {
+          const fetch = fetcherReturnToPromise(
             fetcher(
-              {
-                query: introspectionQuerySansSubscriptions,
-                operationName: introspectionQueryName,
-              },
+              { query, operationName: introspectionQueryName },
               fetcherOpts,
             ),
           );
-          if (!isPromise(fetch2)) {
-            throw new Error(
+          if (!isPromise(fetch)) {
+            throw new TypeError(
               'Fetcher did not return a Promise for introspection.',
             );
           }
-          result = await fetch2;
+          return fetch;
         }
 
+        const normalizedQuery =
+          introspectionQueryName === 'IntrospectionQuery'
+            ? introspectionQuery
+            : introspectionQuery.replace(
+                'query IntrospectionQuery',
+                `query ${introspectionQueryName}`,
+              );
+        let result = await doIntrospection(normalizedQuery);
+
+        if (typeof result !== 'object' || !('data' in result)) {
+          // Try the stock introspection query first, falling back on the
+          // sans-subscriptions query for services which do not yet support it.
+          result = await doIntrospection(
+            introspectionQuery.replace('subscriptionType { name }', ''),
+          );
+        }
         set({ isIntrospecting: false });
         let introspectionData: IntrospectionQuery | undefined;
         if (result.data && '__schema' in result.data) {
@@ -160,9 +153,12 @@ export const createSchemaSlice: CreateSchemaSlice = initial => (set, get) => ({
         if (counter !== get().requestCounter) {
           return;
         }
+        if (error instanceof Error) {
+          delete error.stack;
+        }
         set({
-          fetchError: formatError(error),
           isIntrospecting: false,
+          fetchError: formatError(error),
         });
       }
     },
@@ -233,7 +229,7 @@ export interface SchemaActions {
   setSchemaReference: Dispatch<SchemaReference>;
 }
 
-export interface SchemaProps extends IntrospectionArgs {
+export interface SchemaProps {
   /**
    * This prop can be used to skip validating the GraphQL schema. This applies
    * to both schemas fetched via introspection and schemas explicitly passed
@@ -272,9 +268,7 @@ export interface SchemaProps extends IntrospectionArgs {
    *   run without a schema.
    */
   schema?: GraphQLSchema | IntrospectionQuery | null;
-}
 
-interface IntrospectionArgs {
   /**
    * Can be used to set the equally named option for introspecting a GraphQL
    * server.
@@ -297,45 +291,3 @@ interface IntrospectionArgs {
    */
   schemaDescription?: boolean;
 }
-
-function generateIntrospectionQuery({
-  inputValueDeprecation,
-  introspectionQueryName,
-  schemaDescription,
-}: IntrospectionArgs) {
-  const query = getIntrospectionQuery({
-    inputValueDeprecation,
-    schemaDescription,
-  });
-  const introspectionQuery =
-    introspectionQueryName === 'IntrospectionQuery'
-      ? query
-      : query.replace(
-          'query IntrospectionQuery',
-          `query ${introspectionQueryName}`,
-        );
-  const introspectionQuerySansSubscriptions = query.replace(
-    'subscriptionType { name }',
-    '',
-  );
-
-  return {
-    introspectionQueryName,
-    introspectionQuery,
-    introspectionQuerySansSubscriptions,
-  };
-}
-
-function parseHeaderString(headersString?: string) {
-  let headers: Record<string, unknown> | null = null;
-  let isValidJSON = true;
-
-  try {
-    if (headersString) {
-      headers = JSON.parse(headersString);
-    }
-  } catch {
-    isValidJSON = false;
-  }
-  return { headers, isValidJSON };
-}
diff --git a/packages/graphiql-react/src/utility/index.ts b/packages/graphiql-react/src/utility/index.ts
@@ -6,7 +6,7 @@ export {
   onEditorContainerKeyDown,
 } from './create-editor';
 export { debounce } from './debounce';
-export { formatJSONC, parseJSONC } from './jsonc';
+export { formatJSONC, parseJSONC, tryParseJSONC } from './jsonc';
 export { markdown } from './markdown';
 export { pick } from './pick';
 export { useDragResize } from './resize';
diff --git a/packages/graphiql-react/src/utility/jsonc.ts b/packages/graphiql-react/src/utility/jsonc.ts
@@ -1,7 +1,7 @@
 import prettier from 'prettier/standalone';
 // @ts-expect-error -- wrong types
 import { printers } from 'prettier/plugins/estree';
-import { parsers as parsersBabel } from 'prettier/parser-babel';
+import { parsers } from 'prettier/parser-babel';
 import {
   parse as jsoncParse,
   ParseError,
@@ -12,10 +12,10 @@ export function formatJSONC(content: string) {
   return prettier.format(content, {
     parser: 'jsonc',
     plugins: [
-      // Fixes ConfigError: Couldn't find plugin for AST format "estree"
+      // Fix: Couldn't find plugin for AST format "estree"
       { printers },
-      // @ts-expect-error -- Fixes ConfigError: Couldn't resolve parser "jsonc"
-      { parsers: parsersBabel },
+      // @ts-expect-error -- Fix Couldn't resolve parser "jsonc"
+      { parsers },
     ],
     // always split into new lines, e.g. {"foo":true} => {\n  "foo": true\n}
     printWidth: 0,
@@ -30,8 +30,14 @@ const formatter = new Intl.ListFormat('en', {
 export function parseJSONC(content: string) {
   const errors: ParseError[] = [];
 
-  const parsed = content.trim() && jsoncParse(content, errors);
-
+  const parsed: undefined | Record<string, unknown> = jsoncParse(
+    content,
+    errors,
+    {
+      allowTrailingComma: true,
+      allowEmptyContent: true,
+    },
+  );
   if (errors.length) {
     const output = formatter.format(
       errors.map(({ error }) => printParseErrorCode(error)),
@@ -40,3 +46,22 @@ export function parseJSONC(content: string) {
   }
   return parsed;
 }
+
+export function tryParseJSONC(json = '') {
+  let parsed: Record<string, unknown> | undefined;
+  try {
+    parsed = parseJSONC(json);
+  } catch (error) {
+    throw new Error(
+      `are invalid JSON: ${error instanceof Error ? error.message : error}.`,
+    );
+  }
+  if (!parsed) {
+    return;
+  }
+  const isObject = typeof parsed === 'object' && !Array.isArray(parsed);
+  if (!isObject) {
+    throw new TypeError('are not a JSON object.');
+  }
+  return parsed;
+}
diff --git a/packages/graphiql/cypress/e2e/errors.cy.ts b/packages/graphiql/cypress/e2e/errors.cy.ts
