fix: gql-tag-operations generates invalid types on Windows #7362

[vyacheslav-pushkin]

Description

Related #7362

Problem summary

gql-tag-operations generates invalid types on Windows, causing compile-time error when attempting to launch the application.

Root cause

Source file is read by @graphql/tools using fs.promises.readFile, which means that the linebreaks are read as-is and the result will be different depending on the OS: it will contain LF (\n) on Linux/MacOS and CRLF (\r\n) on Windows.

In most scenarios that would be OK. However, gql-tag-operations is using the resulting string as a TypeScript type. Which means that the string will be compared against a template literal, for example:

`
query a {
   a
 }
` === '\n query a {\n    a\n  }\n '

According to clause 12.8.6.2 of ECMAScript Language Specification, when comparing strings, JavaScript doesn't care which linebreaks does the source file contain, any linebreak (CR, LF or CRLF) is LF from JavaScript standpoint (otherwise the result of the above comparison would be OS-dependent, which doesn't make sense).

The reason gql-tag-operations breaks on Windows is that it generates \r\n query a {\r\n a\r\n }\r\n , which is NOT equal to

`
query a {
   a
 }
`

Solution

@graphql/tools is doing its job correctly. Also it probably doesn't make sense to make changes on typescript plugin level, as gql-tag-operations is probably the only place where it matters. Therefore the solution is to replace \r\n with \n during the preset-specific processing.

Type of change

• Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

• This PR adds a unit test replicating the issue. In order to reproduce the issue, revert the fix commit (leaving only test commit) and run the tests.
• In addition I have tested a local build of gql-tag-operations within this application manually on a Windows machine.

Test Environment:

• OS: Windows
• @graphql-codegen/typescript: ^2.2.2:
• NodeJS: 14

Checklist:

• I have followed the CONTRIBUTING doc and the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/theguild/graphql-code-generator/9zKbdPyHkFZyy2sAr9qVXyhrUcS8
✅ Preview: https://graphql-code-generator-git-fork-vyacheslav-push-3134d8-theguild.vercel.app

[changeset-bot]

🦋 Changeset detected

Latest commit: 4f4c6a3

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

This PR includes changesets to release 1 package

Name	Type
@graphql-codegen/gql-tag-operations-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

[n1ru4l]

@vyacheslav-pushkin Thank you for this very detailed investigation and fix for this issue. ❤️