Support graphql backticks syntax

[nandorojo]

I'm trying to use this VSCode plugin to get autocomplete with GraphQL.

However, it requires the following syntax:

const query = graphql`
  query Test {
    test
  }
`

Notice that graphql has the backticks rather than parentheses.

Could the client-preset add support for this? It would be easy to implement. It just needs to accept either a string or an array with the string.

// before
export function graphql(source: string | [string]) {
  return (documents as any)[source] ?? {}
}

// after
export function graphql(source: string | [string]) {
  if (Array.isArray(source)) {
    return (documents as any)[source[0]] ?? {}
  }
  return (documents as any)[source] ?? {}
}

And for the codegen'd function overloads, instead of doing this:

function graphql(source: '\n  query Test2($key: String!) {\n    sentryTesting(key: $key)\n  }\n'): ...

...it could do this:

// separated for legibility
type Source = '\n  query Test2($key: String!) {\n    sentryTesting(key: $key)\n  }\n'

function graphql(...source: [Source] | [[Source]]): ...

[saihaj]

Have you tried the GraphQL magic comment

const query = graphql(/* GraphQL */`
  query Test {
    test
  }
`)

[nandorojo]

I see, I didn't know that. In that case, it would be nice to add the current syntax to the vscode plugin

[revero-doug]

@nandorojo I can confirm the current syntax works with GraphQL: Language Feature Support (graphql.vscode-graphql) (but not Apollo GraphQL which I'd prefer to use for Apollo Studio integration). See https://www.the-guild.dev/graphql/config for how to make sure the plugin picks up your schema. if you maintain/generate your schema to live at ./schema.graphql (addressed from project root), your config could be as simple as this (saved at ./graphql.config.yaml):

schema: ./schema.graphql

[nandorojo]

@revero-doug it works without the graphql comment?

[revero-doug]

@nandorojo no - the graphql comment should be thought of as part of the current syntax

[nandorojo]

As a quick update, it seems like this now works without the comment tag for me. Not sure if anything changed, but I get autocomplete now.

[revero-doug]

@nandorojo have you tried modifying the generated code as you suggest? tl;dr it won't return a TypedDocumentNode because typescript's type system can't (currently) support overloads based on TemplateStringArray contents (or if it can, someone with type-fu greater than mine will need to chime in).

I agree with your stance that the tagged template literal syntax is preferable, and I'd go a step further and say it's the idiomatic way inline gql is written.

Finding a workaround for this should be explicitly added to the roadmap IMO, and if it's deemed impossible, this caveat should be clearly documented in the official docs.

[nandorojo]

Ahh, sounds like I have my answer then. I didn’t realize overloads with template literal arguments aren’t supported.