Add ast toString returning query string

[darren128]

Pull Request Labels

• feature

For #206

Example

const query = `{ query { user { firstName lastName } } }`;

const ast = gql(query);

console.log(ast.toString()); // "{ query { user { firstName lastName } } }"

[darren128]

@jnwng Would you mind reviewing this? This could be a helpful feature and make debugging easier as well.

[gfx]

This is just what I want.

@jnwng ping

[darren128]

@stubailo Would you mind reviewing this?

[stubailo]

@darren128 still waiting on a fix!

[darren128]

@stubailo Fixed and added a test for the use case.

[darren128]

Ready for review @stubailo

[rybon]

It would be nice to add a condense or minify flag to this feature to remove excess whitespace. Perhaps that should be passed to the toString function or applied on the returned value. Since it runs at compile time, we could turn this flag on or off depending on process.env.NODE_ENV === 'production' or something similar. And support it via babel-plugin-graphql-tag.

parsed.toString = function (condense) { return condense ? print(this, { condense: true }) : print(this); };

// ...

const query = `{ query { user { firstName lastName } } }`;

const ast = gql(query);

console.log(ast.toString(true)); // "{query{user{firstName lastName}}}"

Related: graphql/graphql-js#1523
PR: graphql/graphql-js#1628

[gabsprates]

@rybon, i wrote this right now: https://github.com/gabsprates/minify-graphql-loader

[darren128]

@stubailo Bumping this for review, thanks!

[olslash]

would love to see this merged!

[pie6k]

Is there any update about it?

[darren128]

@gfx Bumping this for review, thanks!

[rybon]

@jnwng will this PR ever move anywhere?

[jnwng]

to confirm, this is a breaking change, correct? are there cases where folks may be relying on the current return value of toString that returns "[object Object]"?

[darren128]

@jnwng Yes, it would break the current usage of toString. We can call that out in the change log, or are you proposing we implement this under a different method name?

[jnwng]

as mentioned in #206 (comment), using loc.source.body gets the equivalent GraphQL string that was sent to this literal.

given the breaking-ness of this change, i'm not sure it merits a major bump and i'm wondering if documentation might be resolve this issue. is it important that we're passing the string through the printer?

[rybon]

Would changing the naming in combination with graphql/graphql-js#1523 feature help resolve those concerns?

[rybon]

Here's a proposal:

var stripIgnoredCharacters = require('graphql').stripIgnoredCharacters;

// ...

parsed.toStrippedString = function() { return stripIgnoredCharacters(this); };

Requires graphql-js 14.3.0

[rybon]

My proposal as a PR: #260

[rybon]

If it's any help, I managed to add this feature to babel-plugin-graphql-tag: gajus/babel-plugin-graphql-tag#31

I believe it achieves the same thing as this PR, only difference is the GraphQL string literals are stripped of insignificant characters instead of pretty printed.

[miguelmota]

As mentioned in this comment, you can do the following to get the graphql string:

require('graphql-tag').default('query { test }').loc.source.body

[intellix]

Will we get the ability to stripIgnoredCharacters at any point? The PR from @rybon was closed and we're not using Babel in our chain. Perhaps it could be an ApolloClient option to strip whitespace from all GET queries

[wenisy]

As mentioned in this comment, you can do the following to get the graphql string:

require('graphql-tag').default('query { test }').loc.source.body

Thanks.
But If I my Graphql is a file and included #import, what should I do?

Like require('graphql-tag').default('../abc.graphql').loc.source.body

//abc.graphql
#import './hello.graphql'

...

[good-idea]

Chiming in here to say that since loc.source.body is the query before it has been parsed, it isn't helpful for cases where you're relying on some of the nice features of graphql-tag like fragment deduplication. I'd love a way to get a cleaned query string from the AST!

[francoisromain]

@good-idea How did you handle this finally?