feat(graphiql-react): expose customScalarSchemas for the variable editor (#4448)

Author: dargmuesli

.changeset/expose-custom-scalar-schemas.md

@@ -0,0 +1,6 @@
+---
+'@graphiql/react': minor
+'graphiql': minor
+---
+
+Add `customScalarSchemas` prop to `GraphiQLProvider`/`GraphiQL`, forwarded to `monaco-graphql`'s per-schema `customScalarSchemas` config. Without it, the variable editor's live JSON Schema linter assumes every custom scalar only accepts primitives (string, number, boolean, integer) and reports a spurious "Incorrect type" error for scalars that legitimately accept objects or arrays (e.g. a `JSON` or `GeoJSON` scalar). `graphql-language-service` and `monaco-graphql` already supported this per-scalar override; `@graphiql/react` just never exposed it.

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

@@ -59,6 +59,7 @@ export const OperationEditor: FC<OperationEditorProps> = ({
   const {
     initialQuery,
     schema,
+    customScalarSchemas,
     referencePlugin,
     operations,
     operationName,
@@ -70,6 +71,7 @@ export const OperationEditor: FC<OperationEditorProps> = ({
     pick(
       'initialQuery',
       'schema',
+      'customScalarSchemas',
       'referencePlugin',
       'operations',
       'operationName',
@@ -273,7 +275,11 @@ export const OperationEditor: FC<OperationEditorProps> = ({
       return;
     }
     monacoGraphQL.setSchemaConfig([
-      { uri: `${uriInstanceId}${URI_NAME.schema}`, schema },
+      {
+        uri: `${uriInstanceId}${URI_NAME.schema}`,
+        schema,
+        customScalarSchemas,
+      },
     ]);
     monacoGraphQL.setExternalFragmentDefinitions([
       ...externalFragments.values(),
@@ -338,6 +344,7 @@ export const OperationEditor: FC<OperationEditorProps> = ({
     return cleanupDisposables(disposables);
   }, [
     schema,
+    customScalarSchemas,
     referencePlugin,
     setSchemaReference,
     setVisiblePlugin,

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

@@ -151,6 +151,7 @@ const InnerGraphiQLProvider: FC<GraphiQLProviderProps> = ({
   onCopyQuery,
   onPrettifyQuery = DEFAULT_PRETTIFY_QUERY,
 
+  customScalarSchemas,
   dangerouslyAssumeSchemaIsValid = false,
   fetcher,
   inputValueDeprecation = false,
@@ -269,6 +270,7 @@ const InnerGraphiQLProvider: FC<GraphiQLProviderProps> = ({
           referencePlugin,
         })(...args);
         const schemaSlice = createSchemaSlice({
+          customScalarSchemas,
           inputValueDeprecation,
           introspectionQueryName,
           onSchemaChange,

packages/graphiql-react/src/stores/schema.ts

@@ -12,6 +12,7 @@ import {
   GraphQLSchema,
   IntrospectionQuery,
 } from 'graphql';
+import type { JSONSchema6 } from 'graphql-language-service';
 import type { Dispatch } from 'react';
 import type { StateCreator } from 'zustand';
 import type { SlicesWithActions, SchemaReference } from '../types';
@@ -22,6 +23,7 @@ type MaybeGraphQLSchema = GraphQLSchema | null | undefined;
 type CreateSchemaSlice = (
   initial: Pick<
     SchemaSlice,
+    | 'customScalarSchemas'
     | 'inputValueDeprecation'
     | 'introspectionQueryName'
     | 'onSchemaChange'
@@ -167,6 +169,7 @@ export const createSchemaSlice: CreateSchemaSlice = initial => (set, get) => ({
 
 export interface SchemaSlice extends Pick<
   SchemaProps,
+  | 'customScalarSchemas'
   | 'inputValueDeprecation'
   | 'introspectionQueryName'
   | 'schemaDescription'
@@ -289,4 +292,26 @@ export interface SchemaProps {
    * @see {@link https://github.com/graphql/graphql-js/blob/main/src/utilities/getIntrospectionQuery.ts|Utility for creating the introspection query}
    */
   schemaDescription?: boolean;
+
+  /**
+   * JSON Schema fragments used to validate custom scalars in the variable
+   * editor. Without this, the variable editor's live JSON Schema linter
+   * assumes every custom scalar only accepts primitives (string, number,
+   * boolean, integer), and will report an "Incorrect type" error
+   * for any custom scalar that legitimately accepts an object or array
+   * (e.g. a `JSON` or `GeoJSON` scalar).
+   *
+   * Pass an empty object (`{}`) for a scalar to accept any JSON value, or
+   * a more specific schema to constrain it further.
+   * @example
+   * ```ts
+   * {
+   *   customScalarSchemas: {
+   *     GeoJSON: {},
+   *     DateTime: { type: 'string', format: 'date-time' },
+   *   }
+   * }
+   * ```
+   */
+  customScalarSchemas?: Record<string, JSONSchema6>;
 }

packages/graphiql/cypress/e2e/lint.cy.ts

@@ -138,6 +138,22 @@ describe('Linting', () => {
     );
   });
 
+  it('Does not mark object variables for a custom scalar with a configured customScalarSchemas as error', () => {
+    cy.visitWithOp({
+      query: /* GraphQL */ `
+        query WithVariables($jsonArg: JSON) {
+          hasArgs(json: $jsonArg)
+        }
+      `,
+      variables: {
+        jsonArg: { foo: 'bar' },
+      },
+    })
+      .contains('foo')
+      .should('not.have.class', 'CodeMirror-lint-mark')
+      .and('not.have.class', 'CodeMirror-lint-mark-error');
+  });
+
   it('Marks GraphQL syntax errors as error', () => {
     cy.visitWithOp({
       query: /* GraphQL */ `

packages/graphiql/src/e2e.ts

@@ -125,6 +125,9 @@ const props: ComponentProps<typeof GraphiQL> = {
   onTabChange,
   forcedTheme: parameters.forcedTheme,
   defaultTheme: parameters.defaultTheme,
+  customScalarSchemas: {
+    JSON: {},
+  },
 };
 
 function App() {

packages/graphiql/test/schema.js

@@ -22,11 +22,21 @@ export function createSchema({
   GraphQLString,
   GraphQLID,
   GraphQLList,
+  GraphQLScalarType,
   GraphQLDeferDirective,
   GraphQLStreamDirective,
   specifiedDirectives,
   version,
 }) {
+  const GraphQLJSON = new GraphQLScalarType({
+    name: 'JSON',
+    description: 'A scalar that accepts arbitrary JSON values.',
+    serialize: value => value,
+    parseValue: value => value,
+    parseLiteral() {
+      throw new TypeError('JSON literals are not supported, use variables.');
+    },
+  });
   const directives =
     parseInt(version, 10) > 16
       ? [...specifiedDirectives, GraphQLDeferDirective, GraphQLStreamDirective]
@@ -337,6 +347,10 @@ And external image:
           id: { type: GraphQLID },
           enum: { type: TestEnum },
           object: { type: TestInputObject },
+          json: {
+            type: GraphQLJSON,
+            description: 'A custom scalar that accepts any JSON value',
+          },
           defaultValue: {
             type: GraphQLString,
             defaultValue: 'test default value',

packages/graphql-language-service-server/src/__tests__/MessageProcessor.spec.ts

@@ -436,7 +436,7 @@ describe('MessageProcessor with config', () => {
         character: 0,
       },
       end: {
-        line: 106 + offset,
+        line: 109 + offset,
         character: 1,
       },
     });
@@ -450,11 +450,11 @@ describe('MessageProcessor with config', () => {
     // this might break, please adjust if you see a failure here
     expect(serializeRange(schemaDefs[0].range)).toEqual({
       start: {
-        line: 108 + offset,
+        line: 111 + offset,
         character: 0,
       },
       end: {
-        line: 116 + offset,
+        line: 119 + offset,
         character: 1,
       },
     });

resources/custom-words.txt

@@ -182,6 +182,7 @@ proto
 qlapi
 qlid
 qlide
+qljson
 quasis
 ractive
 randomthing