frontendr / babel-plugin-transform-compress-graphql Goto Github PK

It would be great if it could also support GraphQL commented template literals.

const query = /* GraphQL */ `
  query { ... }
`;

When interpolating with alpha characters in between (e.g, fragments), we end up with the same issue as in #4.

Input

const fragName = 'name';
const fragType = 'type';

gql`
fragment ${fragName} on ${fragType} {
  id
  name
}
`

• Repro link

Output
`fragment${fragName} on${fragType}{id name}`;

Expected output
`fragment ${fragName} on ${fragType}{id name}`;

Versions:

• Plugin version: v1.3.2

It would be more useful if the tagFunction option by default was undefined, which would result in removing the tagName tag in the output, making the template string untagged.

The current default String.raw not only adds extra characters to a bundle, but it also has gotchas regarding escapes.

This input:

const ONE = 1
const query = /* GraphQL */ `
  {
    a(b: ${ONE} c: true)
  }
`

Incorrectly results in this output:

const ONE = 1;
const query = `{a(b:${ONE}c:true)}`;

Which results in a query with invalid syntax:

{a(b:1c:true)}

This went unnoticed in my project for some time. GraphQL.js v15 no longer tolerates numbers being followed immediately with letters, and now the compressed queries are being rejected as having syntax errors:

• https://github.com/graphql/graphql-js/releases/tag/v15.0.0
• graphql/graphql-js#2164
• graphql/graphql-spec#601

I mistakenly thought at first this was a graphql-query-compress issue (rse/graphql-query-compress#14); but it turns out to definitely be an issue with this babel plugin.

Describe the bug

Seems like spaces are being added around template literal variables when they shouldn't be.

Input

graphql(
    > 82 |         gql`
         |             ^
      83 |             query getTable${isBug ? 'Bug' : ''}(

Output

GraphQLError: Syntax Error: Expected {, found Name "Bug"

Expected output
No bug.

Versions (please complete the following information):

• Babel version: latest
• GraphQL version: 14
• Plugin version: 1.3.3

Additional context

Worked in 1.3.2 as long as there were no spaces. If there were spaces it broke. Can we support both cases?

This library appears to have a simple compression function based on string replace() and regex:

https://github.com/frontendr/babel-plugin-transform-compress-graphql/blob/1.1.0/src/index.js#L3

graphql-query-compress has a more complicated approach using lexical analysis:

https://github.com/rse/graphql-query-compress/blob/1.2.1/src/graphql-query-compress.js#L29

It is also heavier tho, with a 143kb install size.

Which approach is "safer"? If graphql-query-compress is "safer", does it make sense to use it in babel-plugin-transform-compress-graphql?