Auto prettify

[rybon]

Fixes #828. When the autoPrettify prop is present on the GraphiQL component, the prettify method will run on componentDidMount.

This can be tested by adding autoPrettify: true, on a line after line 153 in test/index.html and running npm run dev. Open the reported URL and enter the test GraphQL query and make sure the formatting is off. Since the query is synced to the query string in the URL, refreshing the page will cause the auto prettify to run and pretty print the query.

[rybon]

@acao please review.

[orta]

This might not be a good idea, because the prettify button removes comments from queries. Could be worth waiting till prettier is added.

Also, this project uses yarn, can you please remove the package-lock.json

[rybon]

@orta it is an opt-in feature and does the same thing as clicking on the Prettify button. Why would it be a bad idea?

[acao]

@benjie also a nice little opt-in only feature that would be nice for 0.x, and could be provided via a plugin for 1.x

[benjie]

Hi @rybon, please could you further expand on the motivation behind this PR? It seems to me

<GraphiQL ... defaultQuery={queryFromUrlBar} autoPrettify={true} />

is equivalent to:

<GraphiQL ... defaultQuery={print(parse(queryFromUrlBar))} />

which would accomplish the same goal, and would not require a GraphiQL change?

Notes on the current implementation:

If no defaultQuery were provided, autoPrettify would cause the query restored from localStorage to be prettified, thereby removing any comments/etc - I think it would be unexpected for a user to reload the GraphiQL page and have the query appear as different to the one they were typing moments ago. I believe your intent is to only prettify the defaultQuery / query props?

autoPrettify currently only applies on GraphiQL component mount, but the name "autoPrettify" implies that it may do more - such as prettify what you're typing automatically. Prettifying on every keypress would be untenable in the current implementation (since it's a relatively expensive operation); perhaps renaming the option to prettifyOnMount would make this clearer?

Aside:

A prettify that happens when you stop typing could be an interesting feature, e.g. triggering on debounced keypress. Sadly we don't currently have the ability to restore the carat to the correct position on prettify so we'd need to solve that issue first. I think this would make a good candidate for an experimental plugin in v1.

[rybon]

@benjie indeed, if the same thing can be accomplished with defaultQuery, we wouldn't need this flag. I wasn't aware this was possible. Thanks for your feedback!

[halvespereira]

hi @benjie ,
I tried doing defaultQuery={print(parse(queryFromUrlBar))} but I get an error that parse is undefined and unexpected use of print.
Are you able to share how I can access those 2 functions? parse and print. That would help me tons. Thank you.

[benjie]

Both are imported from the graphql module; does that help?

[halvespereira]

Ah yes, it works now. Thanks