escaped backticks in template literals aren't parsable by codegen

[smeijer]

Describe the bug
Codegen doesn't know how to handle backtick escaping in template literals.

To Reproduce
Define your schema in a js or ts file, with the help of graphql-tag. And add a field description that uses backtickets to highlight some code in your document browser. (graphql playground for example).

1. My GraphQL schema:

import gql from 'graphql-tag';

export default gql`
  type Query {
    user(id: ID!): User!
  }

  type User {
    id: ID!
    "Choose a nice username, so users can \`@mention\` you."
    username: String!
    email: String!
  }
`;

Error thrown:

✖ GraphQL request
    Syntax Error: Invalid character escape sequence: \`.

    GraphQL request (7:42)
    6:   id: ID!
    7:   "Choose a nice username, so users can \`@mention\` you."
                                                ^
    8:   username: String!

Sandbox: https://codesandbox.io/s/codegen-backtick-escape-issue-qn1hb

3. My codegen.yml config file:

schema: schema.js
documents: operations.graphql
generates:
  types.ts:
    plugins:
      - typescript
      - typescript-operations

Expected behavior
Having User with a generated type like:

export type User = {
  __typename?: "User";
  id: Scalars["ID"];
  /** Choose a nice username, so users can `@mention` you. */
  username: Scalars["String"];
  email: Scalars["String"];
};

Environment:

• OS: codesandbox
• @graphql-codegen/add: 1.3.1
• @graphql-codegen/cli: 1.3.1
• @graphql-codegen/typescript: 1.3.1
• @graphql-codegen/typescript-operations: 1.3.1
• NodeJS: v10.16.0

Additional context
In the sanbox posted above, you can change the codegen.yml to use schema.graphql instead of schema.js to see it work. That's the desired outcome, only I need to be able to use .js / .ts files with graphql-tag.

Writing my descriptions like I do in the sandbox, does work, as Apollo parses it and graphql playground displays it. It's only codegen that doesn't compile it.

[dotansimha]

Hi @smeijer !
I checked and this error comes from the internal graphql validation functions.
Tested it as well in ASTExplorer, which uses just graphql for parsing, and the result is the same:

[smeijer]

@dotansimha, do you use different parsers for graphql files as for js files than? Because in a graphql file, it is working. Its not working when using graphql-tag in a js file.

But, my application does compile. Apollo server does understand it. Graphql Playground, does understand it. So it's only codegen that doesn't handle the escaped backticks in js files.

If I just add that snippet to astexplorer, it does parse it:

In a normal graphql file, we should indeed not be escaping the backtick. The escaping is because it's written in a javascript file.

type User {
  id: ID!
   "Choose a nice username, so users can `@mention` you."
  username: String!
  email: String!
}

import gql from 'graphql-tag';

const typeDef = `
type User {
  id: ID!
   "Choose a nice username, so users can \`@mention\` you."
  username: String!
  email: String!
}
`;

I'm not sure if the fault is really in graphql.

[smeijer]

I'm exploring the source, and it looks to me that you're loading the files with graphql-toolkit. However, I'm failing to make that one crash.

[smeijer]

Tracked the issue down to graphql-tag-pluck, which is being used by grapql-toolkit to extract the typedefs from various files.

Created an issue there instead. DAB0mB/graphql-tag-pluck#44

[dotansimha]

@smeijer When you parse a JS/TS file in ASTExplorer, you are basically using JS parser, and not GraphQL parser. The GraphQL inside the template is not being parsed, and just stored as string, and not as DocumentNode.
When you use GraphQL parser with a GraphQL string, it uses parse from graphql and do the actual parsing.

graphql-tag-pluck reads JavaScript/TypeScript code as string, convert it into code AST using babel, and then looks for a GraphQL string. Then, this GraphQL string is being parsed into DocumentNode by graphql.

[smeijer]

Thanks for the response. I figured that out.

So somewhere between looks for a graphql string and parse graphql string into DocumentNode, the string should be unescaped.

[dotansimha]

Ohh I see, we'll try to fix that in graphql-tag-pluck. Thanks