Undefined appended to query parse using gql

[tomdev10]

Intended outcome:
Successful Query parse using gql.

Actual outcome:
An error is thrown when parsing:

  query Me {
      me {
        MyFragment

      }
    }
  

"\n  fragment MyFragment on CusMe {\n    {...}  }\n"

(fields omitted) in above

The error is:

"\n    query Me {\n      me {\n        MyQuery\n\n      }\n    }\n  \n  fragment MyFragment on CusMe {\n    {...}      }\n    }\n  }\nundefined"

(fields omitted) in above.

How to reproduce the issue:
https://codesandbox.io/s/upbeat-khorana-ttof0 see here

Versions
Not present on 3.3.7, is present on 3.3.11

System:
OS: macOS 10.15.7
Binaries:
Node: 14.15.5 - /usr/local/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 6.14.11 - /usr/local/bin/npm
Browsers:
Chrome: 88.0.4324.192
Firefox: 85.0.2
Safari: 14.0.3
npmPackages:
@apollo/client: ^3.3.11 => 3.3.11
@apollo/react-testing: 3.1.3 => 3.1.3
apollo-cache-inmemory: ^1.6.6 => 1.6.6

[tomdev10]

Can confirm the breaking version is 3.3.8 -> 3.3.9 , where 3.3.9 displays this error

[tomdev10]

Also, if this is not the right place to raise this issue, please let me, since the error is also present using graphql-tag directly at 2.12.1, not present at 2.11.0 - can I ask why @apollo/client is pinned at the next version of graphql-tag rather than long term support version? Many thanks for all your work 🚀

[benjamn]

@tomdev10 This is definitely a graphql-tag issue, so I moved it here.

While we can make this code more defensive, in your reproduction you are manually calling the gql function with a literal string that does not have any ${...} interpolation expressions in it, but also passing an argument to be interpolated. This would never happen if you used gql as it was intended (as a template tag function), rather than calling it manually. The number of literal strings should always be one more than the number of interpolated values.