feat: Add `stripIgnoredCharacters` option (visitor-plugin-common)

[aradalvand]

Related #5616

Description

Adds a new stripIgnoredCharacters: boolean option to client-side-base-visitor that removes redundant characters (like line-breaks, whitespaces, etc.) from the query strings.

In the linked issue, I originally proposed doing .replace(/\s+/g, ' ').trim() on the strings, but that turned out to be an unreliable approach as it would fail to cover a number of cases:

• It doesn't remove extraneous whitespaces that are not consecutive, so like query ( $var : Int! ) (should become query ($var: Int!)) or more commonly query { foo bar } (should become query{foo bar}).
• If you have a string literal inside the query, that contains more than one consecutive space or line breaks, it removes those but it obviously shouldn't.

This all means a GraphQL-specific minifier is actually needed to do this reliably, Happily I found out there's a built-in function in graphql-js for this very task! stripIgnoredCharacters — see https://github.com/graphql/graphql-js/issues/1523, which does precisely this.

Type of change

Please delete options that are not relevant.

• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] This change requires a documentation update

How Has This Been Tested?

I actually didn't add tests for this because I didn't know where to add the tests, client-side-base-visitor itself didn't include any tests, and I don't really know what tests I should add and more importantly where. I would appreciate if you point me in the right direction.

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 4f3ef36334fa38ffb7c4b04affa4a377860189f8

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

This PR includes changesets to release 39 packages

Name	Type
@graphql-codegen/visitor-plugin-common	Minor
@graphql-codegen/flow	Patch
@graphql-codegen/flow-operations	Patch
@graphql-codegen/flow-resolvers	Patch
@graphql-codegen/java-apollo-android	Patch
@graphql-codegen/java-common	Patch
@graphql-codegen/java	Patch
@graphql-codegen/kotlin	Patch
@graphql-codegen/java-resolvers	Patch
@graphql-codegen/typescript-apollo-angular	Patch
@graphql-codegen/typescript-apollo-client-helpers	Patch
@graphql-codegen/typescript-document-nodes	Patch
@graphql-codegen/typescript-generic-sdk	Patch
@graphql-codegen/gql-tag-operations	Patch
@graphql-codegen/typescript-graphql-request	Patch
@graphql-codegen/typescript-jit-sdk	Patch
@graphql-codegen/typescript-mongodb	Patch
@graphql-codegen/typescript-msw	Patch
@graphql-codegen/typescript-oclif	Patch
@graphql-codegen/typescript-operations	Patch
@graphql-codegen/typescript-react-offix	Patch
@graphql-codegen/typescript-react-apollo	Patch
@graphql-codegen/typescript-react-query	Patch
@graphql-codegen/typescript-resolvers	Patch
@graphql-codegen/typescript-rtk-query	Patch
@graphql-codegen/typescript-stencil-apollo	Patch
@graphql-codegen/typescript-type-graphql	Patch
@graphql-codegen/typed-document-node	Patch
@graphql-codegen/typescript	Patch
@graphql-codegen/typescript-urql-graphcache	Patch
@graphql-codegen/urql-svelte-operations-store	Patch
@graphql-codegen/typescript-urql	Patch
@graphql-codegen/typescript-vue-apollo-smart-ops	Patch
@graphql-codegen/typescript-vue-apollo	Patch
@graphql-codegen/typescript-vue-urql	Patch
@graphql-codegen/jsdoc	Patch
@graphql-codegen/graphql-modules-preset	Patch
@graphql-codegen/import-types-preset	Patch
@graphql-codegen/near-operation-file-preset	Patch

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

[aradalvand]

Could you guys help me out with the failing checks? I'm new to all of this, not sure what's being done wrong.

[aradalvand]

@ardatan @dotansimha Hi guys could you check this out please? Thank you.

[aradalvand]

Hi @charlypoly, thank you for the response! Sure, I would certainly want to add a test case for this, I just don't know where I'm supposed to add the test. As I said in my original comment:

I actually didn't add tests for this because I didn't know where to add the tests, client-side-base-visitor itself didn't include any tests, and I don't really know what tests I should add and more importantly where.

Could you please guide me on this? Thank you!

[charlypoly]

Hi @charlypoly, thank you for the response! Sure, I would certainly want to add a test case for this, I just don't know where I'm supposed to add the test. As I said in my original comment:

I actually didn't add tests for this because I didn't know where to add the tests, client-side-base-visitor itself didn't include any tests, and I don't really know what tests I should add and more importantly where.

Could you please guide me on this? Thank you!

Hi @aradalvand,

A good place to write functional tests would be in packages/plugins/typescript/typescript/tests/typescript.spec.ts which runs complete schema to types tests using snapshots.

In the meantime, I'll do some manual E2E tests to ensure that this new flag is not breaking some plugins (especially the upcoming codegen v3 one).

[JanStevens]

Hi,

This is awesome as it greatly reduces the amount of lines in our generated types. I did notice that it does not work in combination with the following plugins 🤔

      - 'typescript'
      - 'typescript-operations'
      - 'typescript-generic-sdk'

[aradalvand]

I'm from Iran where the government has recently been limiting Internet access serverely and most VPNs don't work either, I've found that I can't actually push to GitHub even though I can visit the website in the browser, strangely enough.

I would appreciate it if someone else take over this PR and continues it (e.g. writing the tests), it should be pretty simple. I can't do that at the moment and I'm not sure when/if this will change.

[JanStevens]

@aradalvand I've continued where you left of and added a spec in https://github.com/dotansimha/graphql-code-generator/pull/8489

Really want to see this merged as we have a huge GraphQL file and this can save use some bytes

[charlypoly]

The discussion continues on https://github.com/dotansimha/graphql-code-generator/pull/8489