Feature: Typescript generic argument on graphql template function breaks highlighting

[Mike-Logit]

I noticed this (press play to view the GIF):

As you can see, highlighting is not supported when using a generic argument to add Typescript features. I can use #graphql to fix this but sometimes prettier will format it onto a new line and break it which isn't ideal.

I'd prefer to just have Typescript support using the generic argument if possible.

Thank you.

[acao]

@Mike-Logit we just added the regex for highlighting graphql( so this must be missing from that. Try this for now, which we know is working:

graphql<MyType>` 
  query myQuery{
  
  }
`

[acao]

This is where the fix would be implemented https://github.com/graphql/graphiql/blob/b5feda28c61848d62df2615d85fe417e5e355298/packages/vscode-graphql/grammars/graphql.js.json#L47

[Mike-Logit]

@Mike-Logit Try this for now, which we know is working:

graphql<MyType>` 
  query myQuery{
  
  }
`

Thanks. This doesn't work for me because I believe the graphql function I'm using isn't typed to support that syntax. I'm using Gatsby.js so it might not be the same type of graphql function you're used to seeing:

Argument of type 'TemplateStringsArray' is not assignable to parameter of type 'string'.ts(234

[Mike-Logit]

However, I solved it another way by splitting the query string from where it was being passed into the function so prettier wouldn't think my line was too long and move the #graphql part to another line and break the highlighting:

const sourcesQuery = `#graphql
  query {
    allSourcesYaml {
      edges {
        node {
           ... more fields
        }
      }
    }
  }`;

const sourcesQueryResult = await graphql<Queries.Query>(sourcesQuery);

[DennisRosen]

Any update on this? I dislike having to refactor my code just to get the syntax highlighting to work.

[acao]

@DennisRosen @Mike-Logit please re-open if this is still an issue.

we have snapshot tests confirming this case now. enjoy!

[Mike-Logit]

@acao Thank you all very much! I've just tested this out and yes it works perfectly. I've put the query back to where it's supposed to be now that I no longer need the solution I mentioned above using #graphql. Thanks for letting us know :)