Skip to content

feat: [RFC] GraphiQL rewrite for monaco editor, react context and redesign, i18n#1523

Merged
acao merged 10 commits intomasterfrom
feat/use-context-hooks
Jun 11, 2020
Merged

feat: [RFC] GraphiQL rewrite for monaco editor, react context and redesign, i18n#1523
acao merged 10 commits intomasterfrom
feat/use-context-hooks

Conversation

@acao
Copy link
Copy Markdown
Member

@acao acao commented May 13, 2020 •
edited
Loading

(here, we've re-created #1468 against a non-forked branch, so RFCs are visible in pull requests here) (see: #1446 for details)

image

go ahead and give this rewrite PR a whirl! this is what the new GraphiQL 2.0.0 beta will be based on.

Note: use right click context menu/f1 command palette for the full experience!

Context for State Management

  • makes use of useReducers
  • SchemaProvider, SchemaContext
  • SessionProvider, SessionContext
  • EditorProvider, EditorContext

thank you so much to @cshaver , @zephraph , @ryan-m-walker, @ncthbrt , and @sgrove for contributing to or chiming in on this effort! no small effort by any means.

Monaco Editor

we spiked on and integrated the fantastic monaco-editor with this PR, using our now monaco-graphql mode.

Redesigned Components and Theme UI

thanks to @walaura 's original work, and @cshaver and @harshithpabbati for moving it forward. we are well underway with implementing the redesign!

Temporary Breakages

some features are temporarily disabled by this effort, in the interest of rapid iteration:

  • persisted operations (though your previous query history works in the left sidebar, soon to be deprecated)
  • variables hint/lint aka code completion/diagnostics for variables json. coming soon!

Preview

(use right click/f1 context menu for funsies!)

https://deploy-preview-1523--graphiql-test.netlify.app/bundle/dist/

@acao acao changed the title Feat/use context hooks feat: [RFC] Rewrite for monaco editor, react context and the beginnings of the redesign May 13, 2020
@acao acao mentioned this pull request May 13, 2020
Closed
@acao acao force-pushed the feat/use-context-hooks branch from 2b8ff67 to e8e1295 Compare May 13, 2020 15:19
@acao
Copy link
Copy Markdown
Member Author

acao commented May 16, 2020

rebasing this one after the monaco mode merge! this PR should reduce in size quite substantially

@acao acao force-pushed the feat/use-context-hooks branch from b6b56fd to a8b9a93 Compare May 16, 2020 13:58
@acao acao changed the title feat: [RFC] Rewrite for monaco editor, react context and the beginnings of the redesign feat: [RFC] GraphiQL rewrite for monaco editor, react context and the beginnings of the redesign May 16, 2020
@acao acao force-pushed the feat/use-context-hooks branch from a8b9a93 to 659b700 Compare May 16, 2020 14:04
@acao acao changed the title feat: [RFC] GraphiQL rewrite for monaco editor, react context and the beginnings of the redesign feat: [RFC] GraphiQL rewrite for monaco editor, react context and redesign May 16, 2020
@harshithpabbati
Copy link
Copy Markdown
Contributor

harshithpabbati commented May 16, 2020 •
edited
Loading

Looks like my i18n PR is failing. I will try to fix it @acao

@acao
Copy link
Copy Markdown
Member Author

acao commented May 16, 2020

@harshithpabbati no worries! working on it as well, it seems to be this:

File '/home/rikki/projects/graphiql/packages/graphiql/src/locales/en/Errors.json' is not listed within the file list of project '/home/rikki/projects/graphiql/packages/graphiql/tsconfig.json'. Projects must list all files or use an 'include' pattern.

funky that it worked before and not now, haha

@harshithpabbati
Copy link
Copy Markdown
Contributor

harshithpabbati commented May 16, 2020 •
edited
Loading

Yeah, it's weird

@acao
Copy link
Copy Markdown
Member Author

acao commented May 16, 2020

@harshithpabbati you can re-create it locally by running yarn build-demo. you might need to yarn && yarn build one time beforehand to reset your codebase

@acao
Copy link
Copy Markdown
Member Author

acao commented May 16, 2020 •
edited
Loading

@harshithpabbati the funny thing is that this bug is only with storybook, however all of these are builds that pass (thus, they are able to resolve these files):

  • graphiql min/dev webpack
  • monaco vanilla webpack example
  • graphiql example webpack

methinks the answer is a storykbook config

@acao
Copy link
Copy Markdown
Member Author

acao commented May 16, 2020

@harshithpabbati i think i've found the resolution! turns out you were very close with includes

@acao acao force-pushed the feat/use-context-hooks branch 2 times, most recently from e13b591 to 8de442a Compare May 16, 2020 16:16
@acao acao changed the title feat: [RFC] GraphiQL rewrite for monaco editor, react context and redesign feat: [RFC] GraphiQL rewrite for monaco editor, react context and redesign, i18n May 16, 2020
acao and others added 7 commits May 17, 2020 18:34
@acao
feat: schema provider using context/useReducer
8a400ee
@acao @just-be-dev
@ryan-m-walker @cshaver @ncthbrt
feat: migrate to context and useReducers
1f1819d 
- convert all components to functional components
- leverage useEffects dependencies for efficient component subscriptions
- convert editorand query history to use context
- made errors consitent across providers
- allowed for multiple errors
- preserved error objects to allow more custom usage
- SchemaProvider

Co-Authored-By: Justin Bennett <[email protected]>
Co-Authored-By: ryan-m-walker <[email protected]>
Co-Authored-By: Cristina Shaver <[email protected]>
Co-Authored-By: Nick Cuthbert <[email protected]>
@ncthbrt @cshaver
@ryan-m-walker @acao
feat: introduce monaco editor to GraphiQL (#17)
595f2d1 
Co-Authored-By: Cristina Shaver <[email protected]>
Co-Authored-By: Ryan Walker <[email protected]>
@cshaver @acao
feat: first pass graphiql redesign using new layout component (#19)
09e91c5 
just implements layout
@acao @harshithpabbati
feat: editor tabs in session context, improve nav
2728eed 
Co-Authored-By: Harshith Pabbati <[email protected]>
@harshithpabbati @acao
feat: add support for i18n (#1526)
10824c5
@acao
improvement: add run op to context menu as well
236c261
@acao acao force-pushed the feat/use-context-hooks branch from 1ca3ed5 to 236c261 Compare May 17, 2020 23:03
@acao
Copy link
Copy Markdown
Member Author

acao commented Jun 11, 2020

1.0.0 has been released, now for the 2.0.0 rewrite to be merged to master!

@acao acao merged commit ad730cd into master Jun 11, 2020
@acao acao deleted the feat/use-context-hooks branch June 11, 2020 18:03
0xnmn pushed a commit to 0xnmn/graphiql that referenced this pull request Aug 30, 2020
@acao @just-be-dev
@ryan-m-walker @cshaver @ncthbrt @harshithpabbati @secmohammed @0xnmn
feat: [RFC] GraphiQL rewrite for monaco editor, react context and red…
ac17cba 
…esign, i18n (graphql#1523)

- rewrite for modern react and context/hooks API
- adopt some of the new components by @walaura
- adopt monaco editor
- adopt i18n-next

Co-authored-by: Justin Bennett <[email protected]>
Co-authored-by: ryan-m-walker <[email protected]>
Co-authored-by: Cristina Shaver <[email protected]>
Co-authored-by: Nick Cuthbert <[email protected]>
Co-authored-by: Ryan Walker <[email protected]>
Co-authored-by: Harshith Pabbati <[email protected]>
Co-authored-by: mohammed osama <[email protected]>
@acao acao added the graphiql label Nov 13, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

graphiql

Projects

GraphiQL Roadmap
Status: Todo

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@acao @harshithpabbati @ncthbrt @cshaver @secmohammed