Skip to content

Add support for GraphQL injections in ECMA (JS/TS) without gql tag #14413

@souserge

Description

@souserge

I noticed that Helix automatically injects GraphQL syntax highlighting when a template literal in TypeScript/JavaScript is tagged with gql:

; Parse the contents of gql template literals
((call_expression
function: (identifier) @_template_function_name
arguments: (template_string) @injection.content)
(#eq? @_template_function_name "gql")
(#set! injection.language "graphql"))

However, my GraphQL queries are pre-processed using a function called graphql as is the standard practice with many GraphQL TS tools, including gql.tada and @graphql-codegen/cli. They cannot work together with the gql tag, no matter the implementation.

Should there be a way to enable the injection without the tag? E.g. a common practice is to add /* GraphQL */ before the string literal to signal to tools that the string is a GraphQL query:
https://github.com/search?q=%22%2F*+GraphQL+*%2F%22&type=code

The official VSCode plugin supports the following options:
https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.ts

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions