assume all context values are nullable and create hooks to consume individual contexts

[thomasheyenbrock]

This is a little refactoring I wanted to throw in for how we consume the new contexts from @graphiql/react. The changes are:

• We assume that all context values can be nullable. From the perspective of @graphiql/react it is not clear which providers will actually be rendered by the user of the package. (Currently the graphiql package is the only user and it renderes all of them, but imho we can't assume that every future custom GraphQL IDE will do the same.)
  To make this more streamlined we create a custom createNullableContext function that wraps React.createContext and passes null as default value. It also requires a generic type argument that we pass to the context.
• We provide consumer hooks for all contexts from @graphiql/react, i.e. we now do useEditorContext() instead of useContext(EditorContext). We use a utility function to automatically generate these context hooks, which does some nice things for us:
  • You can pass a boolean option nonNull. If this is set to true and the context value is empty, the hook throws an error. This makes is easy to consume a context value that is known to be non-null (because the necessary providers are all rendered higher up the tree). Typescript will also annotate the return type as non-null if setting this option.
  • When the hook throws, we construct a nice error message that tells the user which context exactly is missing and which component or hook caused the error. (Internally we pass the caller function as option to the context hooks so that the blamed component/hook is the one that the user of @graphiql/react was actually using and we don't blame the internal use of the context hook, which would be not useful without knowing the implementation details of @graphiql/react.

[changeset-bot]

🦋 Changeset detected

Latest commit: 1dc0b5c

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	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

[github-actions]

The latest changes of this PR are not available as canary, since there are no linked changesets for this PR.

[codecov]

Codecov Report

Merging #2449 (1dc0b5c) into main (2d91916) will increase coverage by 3.83%.
The diff coverage is 69.28%.

@@            Coverage Diff             @@
##             main    #2449      +/-   ##
==========================================
+ Coverage   65.70%   69.54%   +3.83%     
==========================================
  Files          85       71      -14     
  Lines        5106     4390     -716     
  Branches     1631     1457     -174     
==========================================
- Hits         3355     3053     -302     
+ Misses       1747     1332     -415     
- Partials        4        5       +1     

Impacted Files	Coverage Δ
packages/codemirror-graphql/src/hint.ts	94.73% <ø> (ø)
packages/codemirror-graphql/src/lint.ts	100.00% <ø> (ø)
packages/codemirror-graphql/src/results/mode.ts	47.05% <ø> (ø)
...kages/codemirror-graphql/src/utils/forEachState.ts	100.00% <ø> (ø)
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/hint.ts	89.70% <ø> (ø)
packages/codemirror-graphql/src/variables/mode.ts	79.48% <ø> (ø)
packages/graphiql-react/src/editor/whitespace.ts	100.00% <ø> (ø)
packages/graphiql-toolkit/src/storage/query.ts	36.73% <ø> (ø)
... and 90 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 4e7b907...1dc0b5c. Read the comment docs.