How do I enable autocomplete in .graphql files?

[mwjaco]

Here is my codegen.yml

overwrite: true
schema: REDACTED
documents: "src/**/*.graphql"
generates:
  src/generated/graphql.ts:
    plugins:
      - "add":
          content: "/* eslint-disable */"
      - "typescript"
      - "typescript-operations"
      - "typed-document-node"
      - "fragment-matcher"
    config:
      maybeValue: "T"
  ./graphql.schema.json:
    plugins:
      - "introspection"

When I write queries inside .graphql files, @graphql-eslint/eslint-plugin is able to use my graphql.schema.json to alert me when I have a typo in my fields, but VS Code does not offer any autocomplete suggestions for me.

How do I turn this on? If the linter can figure out my schema for me, is there a graphql-code-generator plugin which can suggest fields for me? I have researched many plugins now but I cannot find one that achieves this.

[dotansimha]

Hi @mwjaco ,
I feel like this is not related directly to GraphQL Codegen. You can use codegen to generate your schema.graphql file, or use graph-config to load your schema, and then use the GraphQL VSCode extension to get autocomplete.

[mwjaco]

@dotansimha I appreciate the quick reply. I'll explore those options. And many, many thanks for creating such an awesome tool!

[mwjaco]

Here is how I set this up per @dotansimha's suggestions:

1. Install the GraphQL VS Code extension (extension ID GraphQL.vscode-graphql)

2. Install graphql-config.

3. In your config file, point to the introspection result. E.g. inside graphql.config.yml: schema: ./graphql.schema.json.

4. Restart VSCode Graphql. (On a Mac, Shift+Cmd+P > VSCode GraphQL: Manual Restart)