graphile / graphile/crystal

Ruru: expose customScalarSchemas so custom scalars aren't flagged as invalid in the variable editor

Open
#3,117 0 comments 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
12.9k
Forks
625
Avg merge
5h 23m
Merged PRs (30d)
24

Description

### Problem

Ruru's variable editor (built on `@graphiql/react` → `monaco-graphql` → `graphql-language-service`) flags any custom scalar that holds an object or array as invalid, e.g. for `@graphile/postgis`'s `GeoJSON` scalar:

```json
{ "type": "Point", "coordinates": [9.5, 51.3] }
```

produces:

> Incorrect type. Expected one of string, number, boolean, integer.

in the variable editor, even though the request executes fine server-side. This affects any plugin author whose input/output types include a custom JSON-like scalar (GeoJSON, arbitrary JSON, etc.), so it is not specific to postgis.

Image

### Root cause

Traced fully in [graphql/graphiql#4447](https://github.com/graphql/graphiql/issues/4447). Short version: `graphql-language-service` and `monaco-graphql` already support overriding the JSON Schema used for a given scalar name (`customScalarSchemas`), but `@graphiql/react` - which Ruru renders directly - never exposes this as a prop. I have a patch for `@graphiql/react` ready: [graphql/graphiql#4448](https://github.com/graphql/graphiql/pull/4448).

### What Ruru would need, once that lands

Once `@graphiql/react` accepts `customScalarSchemas` and a release is out:

- Add `customScalarSchemas` to `RuruProps` (`ruru-types`) and `RuruClientConfig`/`RuruConfig` (`ruru`), following the same `Pick` pattern already used for `editorTheme`, `initialVariables`, etc.
- Thread it down to wherever the ``/`` instance gets mounted, so it can be set via `graphile.config.ts`.
- Bump the `@graphiql/react` dependency to the release containing the new prop.

Happy to send this as a PR too once the upstream piece is merged and released! Opening this as a tracking issue in the meantime since it's blocked on that.

### Motivating use case

`@graphile/postgis`'s `GeoJSON` scalar (see [graphile/postgis#66](https://github.com/graphile/postgis/pull/66)) is exactly this shape: input/output type for geometry/geography columns, holds arbitrary GeoJSON objects.

Contributor guide

Open the contributing guide

Research direction

Start with the RuruProps definition in ruru-types and the RuruClientConfig/RuruConfig definitions in ruru, then trace where GraphiQL or GraphiQLProvider is mounted. Check the upstream @graphiql/react release before making changes. Done means the prop is configurable from graphile.config.ts and reaches the variable editor without invalidating supported custom scalar objects or arrays.

Written by the indexing model from the issue text.

Assessment

Tech stack
graphql, typescript
Domain
api, frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.