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

Integrate GraphiQL Explorer into devtools #199

Merged
merged 6 commits into from May 30, 2019

Conversation

Projects
None yet
4 participants
@sgrove
Copy link
Contributor

commented Apr 29, 2019

There are a few bugs that come from my confusion around this, but as a proof of concept it works perfectly fine. Mainly, the explorer won't get the schema until GraphiQL has loaded it up and there's been one state-invalidating thing to happen (e.g. typing in the query or clicking a button). If there's an easy way to get the schema in this component, it'd be a trivial swap.

The other concern is getting the current query text from the GraphiQL instance into the explorer - right now I store it in the state, but it could just as easily pull it from the editor state, just like the prettify action does.

Finally, I introduced a getIn helper to safely deal with deeply-nested attributes that might have nullable properties along the path, but it may not really be useful if there's an easier, more direct way to get the schema.

@jbaxleyiii Would be great to know what needs to change to actually get this to the right quality level and merged in!

Here's a demo video of using it in action: Apollo Client DevTools with the OneGraph GraphiQL Explorer

@sgrove sgrove requested review from cheapsteak and justinanastos as code owners Apr 29, 2019

@meteor-bot

This comment has been minimized.

Copy link

commented Apr 29, 2019

@sgrove: Thank you for submitting a pull request! Before we can merge it, you'll need to sign the Meteor Contributor Agreement here: https://contribute.meteor.com/

@sgrove

This comment has been minimized.

Copy link
Contributor Author

commented Apr 29, 2019

I've fixed up the hack and the sync issues by moving the schema fetch up outside of GraphiQL and into Explorer.js, it's pretty smooth now.

There's a small visual glitch with the Explorer title having the bottom half cut off because of the custom GraphiQL css for .graphiql-container .doc-explorer-title, .graphiql-container .history-title - specifically the overflow-x: hidden property. Open to suggestions on how to best clean this up.

Screenshot 2019-04-29 12 48 11

vs

Screenshot 2019-04-29 12 48 03

@sgrove sgrove changed the title Proof-of-concept of the GraphiQL Explorer integrated into devtools Integrate GraphiQL Explorer into devtools Apr 30, 2019

@hwillson hwillson self-assigned this May 20, 2019

@hwillson

This comment has been minimized.

Copy link
Member

commented May 20, 2019

Thanks for all of your work on this @sgrove! I'm reviewing it now. Would you be able to sign the CLA?

@sgrove

This comment has been minimized.

Copy link
Contributor Author

commented May 20, 2019

Sure, would be happy to. Just wanted to get feedback on the overall PR first.

We have a new iteration of the editor coming along as well, but updating should be pretty trivial when we do release it https://www.youtube.com/watch?v=yWjCAjpHRt0

@sgrove

This comment has been minimized.

Copy link
Contributor Author

commented May 29, 2019

Signed the CLA, in case the notification hasn't come through yet!

@hwillson
Copy link
Member

left a comment

Thanks very much for working on this @sgrove - this is awesome! (and sorry for the delay in getting this reviewed). LGTM - thanks again!

@hwillson hwillson merged commit c62cf52 into apollographql:master May 30, 2019

1 check passed

CLA Author has signed the Meteor CLA.
Details
@sgrove

This comment has been minimized.

Copy link
Contributor Author

commented May 30, 2019

We just released a new version ~10 minutes ago 😂

https://www.onegraph.com/blog/2019/05/30/GraphiQL_Explorer_2_0_A_Power_User_Release.html

Updating should be pretty simple, just bump to the 0.4.0 release

@hwillson

This comment has been minimized.

Copy link
Member

commented Jun 1, 2019

Awesome @sgrove - great to hear. I'll get the new version in place. Thanks!

@hwillson

This comment has been minimized.

Copy link
Member

commented Jun 2, 2019

Done via #209.

@hwillson

This comment has been minimized.

@FluorescentHallucinogen

This comment has been minimized.

Copy link

commented Jun 2, 2019

Thanks @sgrove @hwillson!

Could you please update screenshots on https://chrome.google.com/webstore/detail/jdkknkkbebbapilgoeccciglkfbmbnfm page to reflect that Explorer has been added?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.