Valid fields highlighted in red until edited (GraphiQL 3 )

[ralucamanea]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

Summary

Valid field selections are highlighted in red (“invalid field” marker) in the GraphiQL editor even though:

• The schema includes these fields (verified via introspection)
• The query executes successfully
• The server returns valid data
• There are no GraphQL errors at runtime

The red highlight disappears only after editing the query text (e.g., adding/removing a space). Reloading or using “Prettify” does not fix it.

This appears to be a validation / synchronization issue between the editor and the schema.

Expected Behavior

Valid fields should not be highlighted as errors if they exist in the schema and the server resolves them correctly.

Steps To Reproduce

Start GraphiQL using the embed described above.

Paste the following query:

query InstrumentBaseAndDetailsAndSymbology {
instruments(
scheme: VALOR
ids: ["63346402"]
) {
referenceData {
instrumentDetail {
contractSpecification {
shortName
valor
isin
}
underlyingReferenceMarket {
shortName
longName
bc
mic
}
etdSuccessorInstrument {
shortName
valor
transferredIsin
}
}
}
}
}

Wait for GraphiQL to validate the query.

Observe: fields such as contractSpecification, underlyingReferenceMarket, and etdSuccessorInstrument (and their nested fields) appear in red as if invalid.

Press “Execute”: the query executes successfully, real data is returned, no errors.

Now, edit the query by removing a space or typing one anywhere.

Observe: the red highlight disappears instantly.

Environment

Environment

• GraphiQL: 3.x via CDN
• React: 18 via CDN
• CodeMirror: 5.59.2 (idea theme)
• Browser: Chrome (latest), also tested in Incognito with no extensions
• Rendering GraphiQL via ReactDOM.render(...)
• Introspection enabled, single schema endpoint

CDN includes:

<script crossorigin src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/graphiql@3/graphiql.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.59.2/theme/idea.css"/>

<script crossorigin src="https://cdn.jsdelivr.net/npm/graphiql@3/graphiql.min.js"></script>

### Anything else?

The issue existed with GraphiQL 1.11.5 as well.
Upgrading to GraphiQL 3.x did not resolve it.

The behavior is deterministic: always happens with the same fields in this schema.

No schema changes or dynamic reloads are happening in this minimal reproduction.

The issue seems tied to the CodeMirror validation overlay or GraphQL-Language-Service synchronization.