feat(graphiql): pass introspection data to schema prop

[thomasheyenbrock]

This is a small QoL improvement: The schema prop now also accepts introspection data as an alternative to a GraphQLSchema instance. Also, this fixes a bug where the schema was not updated after rerunning introspection.

We had a use-case for this feature at Stellate: We store introspection data for different endpoints, and we want to use this to render GraphiQL on the client without running introspection (because this is likely to be disabled for lots of production APIs). We'd now have to add graphql as first-class dependency just to call buildClientSchema once. With this tiny change the SchemaContextProvider does that for us, which is a lot nicer DX.

💡 Reviewing with whitespace turned off halves the LOCs!

[changeset-bot]

🦋 Changeset detected

Latest commit: 397cbfe

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

This PR includes changesets to release 2 packages

Name	Type
@graphiql/react	Minor
graphiql	Minor

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

[github-actions]

The latest changes of this PR are available as canary in npm (based on the declared changesets):

[email protected]
@graphiql/[email protected]

[codecov]

Codecov Report

Merging #2574 (397cbfe) into main (2d91916) will increase coverage by 3.75%.
The diff coverage is 24.16%.

@@            Coverage Diff             @@
##             main    #2574      +/-   ##
==========================================
+ Coverage   65.70%   69.46%   +3.75%     
==========================================
  Files          85       71      -14     
  Lines        5106     4156     -950     
  Branches     1631     1376     -255     
==========================================
- Hits         3355     2887     -468     
+ Misses       1747     1264     -483     
- Partials        4        5       +1     

Impacted Files	Coverage Δ
packages/codemirror-graphql/src/lint.ts	100.00% <ø> (ø)
packages/codemirror-graphql/src/results/mode.ts	47.05% <ø> (ø)
packages/codemirror-graphql/src/utils/hintList.ts	95.65% <ø> (ø)
...ckages/codemirror-graphql/src/utils/mode-indent.ts	0.00% <0.00%> (ø)
packages/codemirror-graphql/src/variables/mode.ts	79.48% <ø> (ø)
packages/graphiql-react/src/editor/whitespace.ts	100.00% <ø> (ø)
packages/graphiql-react/src/utility/debounce.ts	0.00% <0.00%> (ø)
packages/graphiql-react/src/editor/tabs.ts	5.76% <5.76%> (ø)
packages/codemirror-graphql/src/variables/lint.ts	46.98% <66.66%> (ø)
packages/codemirror-graphql/src/hint.ts	94.73% <100.00%> (ø)
... and 97 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 65df5b8...397cbfe. Read the comment docs.

[acao]

I’m all for it! What do you think of introspectionSchema as a seperate prop to provide it, would that be more complicated than using the same schema prop and just detecting it each time?

[thomasheyenbrock]

I thought about this but decided against it for two reasons:

• When having two props you could pass two different schemas and we'd have to either explicitly throw or implicitly take one over the other.
• I actually like the naming also for this new case. The introspection data is still describing the schema, it is essentially just a different representation of the same thing.

[connorshea]

Do you have any example code of how this is actually used? I can't quite figure that part out 😅

I think this'd allow me to use a static JSON representation of my GraphQL schema to have GraphiQL load automatically, but I'm not 100% sure how to provide the GraphiQL component with the right object.

[thomasheyenbrock]

Hey @connorshea 👋 the object you can pass here is the data returned from a "standard" introspection query (you can check the getIntrospectionQuery method from graphql-js for how that query looks). The object looks something like { "__schema": { /* schema introspection data */ } }. Does that help with your question?

[connorshea]

yup, that helps! thanks