Broken number interpolation

[jaydenseric]

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
• RFC: Number lexer lookahead restriction graphql/graphql-js#2164
• RFC: Number value literal lookahead restrictions 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.

[frontendr]

Thanks for the report! Haven't had a project with this GraphQL version so haven't noticed it.

I'll have a look when I can.

[jaydenseric]

I still see the issue in v1.3.2…

[jaydenseric]

I think it's a problem when the arguments are on new lines:

const ONE = 1

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

[frontendr]

That's odd as I've literally used your test case in the unit tests:

see test case input

const ONE = 1;
const TWO = 2;
const queryWithSpace = /* GraphQL */ `{
  a(b: ${ONE} c: true)
}`;

const queryWithComma = /* GraphQL */ `{
  a(b: ${ONE}, c: true)
}`;

const queryWithTrailingVariable = /* GraphQL */ `{
  a(b: ${ONE} c: ${TWO})
}`;

Is converted to:

see test case expected output

"use strict";

const ONE = 1;
const TWO = 2;
const queryWithSpace = `{a(b:${ONE} c:true)}`;
const queryWithComma = `{a(b:${ONE},c:true)}`;
const queryWithTrailingVariable = `{a(b:${ONE} c:${TWO})}`;

I'll add another test with newlines

[frontendr]

Just checked and that also works:

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

Is converted to:

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

Edit: See this commit

[jaydenseric]

Here is the source:

Here is the result:

fragment userArtworkConnection on UserArtworkConnection{page(cursor:$cursorArtwork limit:8ascending:false){hasNextPage cursorLast edges{node{id title price{format asCurrency{format(locale:"en-US")}}sold image{srcWebp:url(width:250height:250devicePixelRatio:3format:WEBP resourceHints:{preload:true})srcFallback:url(width:250height:250devicePixelRatio:3format:JPG)}}}}}fragment userGalleryConnection on UserGalleryConnection{page(cursor:$cursorGallery limit:8ascending:false){hasNextPage cursorLast edges{node{id name location{map(width:250height:150zoom:14pitch:55style:"mapbox/streets-v11" resourceHints:{preload:true})}}}}}query($userId:ID!,$cursorArtwork:ID,$cursorGallery:ID){user:node(id:$userId){... on User{name description{html(topHeadingLevel:2)}country{name emoji}region{name}gravatar(size:450,resourceHints:{preload:true})dateRegistered{relative}isAuthenticatedUser artworks{count ...userArtworkConnection}galleries{count ...userGalleryConnection}}}}

[jaydenseric]

It's working now! It was probably just some tooling aggressively caching Babel config or something. Pretty strange.

[frontendr]

I can only see the first part of that but

const query = /* GraphQL */ `
  fragment a on b {
    page(
      c: $var
      d: ${ONE}
      e: false
    ) {
      hasNextPage
    }
  }
`;

Is converted to:

const query = `fragment a on b{page(c:$var d:${ONE} e:false){hasNextPage}}`;

Are you sure you've upgraded correctly?

[frontendr]

It's working now! It was probably just some tooling aggressively caching Babel config or something. Pretty strange.

Oh *pfew! Was starting to doubt myself 😄

Thanks again for the report!