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

[dargmuesli]

Summary

Adds an optional customScalarSchemas prop to @graphiql/react, so custom GraphQL scalars that legitimately hold objects/arrays (a JSON scalar, a GeoJSON scalar, etc.) aren't flagged by the variable editor's live JSON Schema linter with a false-positive "Incorrect type. Expected one of string, number, boolean, integer." error.

Both graphql-language-service (scalarSchemas option, added in #3376) and monaco-graphql (SchemaConfig.customScalarSchemas) already support this per-scalar override. @graphiql/react's operation-editor.tsx was the missing link: it registers the schema with Monaco via a hardcoded { uri, schema }, with no way for a consumer to add the third field.

Fixes #4447. See that issue for the full problem description.

Changes

• stores/schema.ts: added customScalarSchemas?: Record<string, JSONSchema6> to SchemaProps, threaded through SchemaSlice and CreateSchemaSlice.
• components/provider.tsx: destructures the new prop, passes it into createSchemaSlice(...).
• components/operation-editor.tsx: reads it from the store and includes it in the monacoGraphQL.setSchemaConfig(...) call (and its effect's dependency array).

Existing behavior for anyone not passing the prop is unchanged.

Usage

<GraphiQL
  fetcher={fetcher}
  customScalarSchemas={{
    GeoJSON: {}, // accept any JSON value
    DateTime: { type: 'string', format: 'date-time' },
  }}
/>

[changeset-bot]

🦋 Changeset detected

Latest commit: 8313018

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages

Name	Type
@graphiql/react	Minor
@graphiql/plugin-code-exporter	Major
@graphiql/plugin-doc-explorer	Major
@graphiql/plugin-explorer	Major
@graphiql/plugin-history	Major
graphiql	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[linux-foundation-easycla]

• ❌ - login: @dargmuesli / name: Jonas Thelemann. The commit (8313018) is not authorized under a signed CLA. Please click here to be authorized. For further assistance with EasyCLA, please visit our EasyCLA portal and chat with our support bot.

[dargmuesli]

I'll sign the CLA once there is positive feedback on my proposal. Btw, the CLA document template looks off: the fields for me to fill are randomly placed on some page in the second step.

[trevor-scheer]

Thanks, lgtm. Could you add a custom scalar usage to the demo app and a cypress test?

packages/graphiql/src/e2e.ts powers the demo and our cypress tests, and the schema behind it is packages/graphiql/test/schema.js. Then add a test in packages/graphiql/cypress/e2e/lint.cy.ts along the existing variable type tests.

[trevor-scheer]

Changesets will bump graphiql without this due to its dependency on @graphiql/react, but this will ensure your description below lands in the graphiql changelog which is arguably the more interesting place for users to see it.

Suggested change

	'@graphiql/react': minor
	'@graphiql/react': minor
	'graphiql': minor