Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add useQueryEditor hook to @graphiql/react #2408

Merged

Conversation

thomasheyenbrock
Copy link
Collaborator

This PR moves over the logic for the query editor into a hook exported from @graphiql/react.

For now we keep the query also in the state of the GraphiQL component. It's a bit more work to move this over to the editor context and hooks as we need to derive the operation facts when the query changes. Will do this in a follow-up PR.

@changeset-bot
Copy link

changeset-bot bot commented May 17, 2022

🦋 Changeset detected

Latest commit: c60f809

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

This PR includes changesets to release 2 packages
Name Type
graphiql Minor
@graphiql/react 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

Copy link
Member

@JoviDeCroock JoviDeCroock left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor comment about the slim chance of running into a race condition, looks great!

Copy link
Member

@timsuchanek timsuchanek left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me! Just 2 clarification questions from my side.

setHeaderEditor() {},
setQueryEditor() {},
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just out of curiosity - why are these empty functions?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TypeScript wants you to provide a default value when creating a context. When actually rendering the context provider we'll pass in the actual value that contains the functions to set the editors in state.

@codecov
Copy link

codecov bot commented May 18, 2022

Codecov Report

Merging #2408 (c60f809) into main (2d91916) will decrease coverage by 0.18%.
The diff coverage is 67.33%.

@@            Coverage Diff             @@
##             main    #2408      +/-   ##
==========================================
- Coverage   65.70%   65.51%   -0.19%     
==========================================
  Files          85       81       -4     
  Lines        5106     5087      -19     
  Branches     1631     1651      +20     
==========================================
- Hits         3355     3333      -22     
- Misses       1747     1750       +3     
  Partials        4        4              
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% <ø> (ø)
...ackages/codemirror-graphql/src/utils/info-addon.ts 1.02% <ø> (ø)
...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% <ø> (ø)
... and 93 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 bc3dc64...c60f809. Read the comment docs.

@thomasheyenbrock thomasheyenbrock force-pushed the feat/query-editor-to-context branch from 8c32ff7 to 932e5cc Compare May 18, 2022 07:40
@thomasheyenbrock thomasheyenbrock force-pushed the feat/query-editor-to-context branch from 932e5cc to c60f809 Compare May 18, 2022 07:45
@@ -30,13 +30,16 @@
"npm": "please_use_yarn_instead"
},
"scripts": {
"build": "yarn workspace @graphiql/react run build && yarn tsc --clean && yarn tsc",
"build": "yarn build:clean && yarn build:packages && yarn build:graphiql-react && yarn build:graphiql",
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had to make sure the builds are executed in correct order since we use Vite for @graphiql/react:

  • First build all packages
  • Then build @graphiql/react
  • Then build graphiql

@thomasheyenbrock thomasheyenbrock merged commit d825bb7 into graphql:main May 18, 2022
@thomasheyenbrock thomasheyenbrock deleted the feat/query-editor-to-context branch May 18, 2022 07:53
@acao acao mentioned this pull request May 18, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants