typescriptautocompletegraphqlgql

Is there a way to get gql tag to autocomplete with Typescript/GraphQL?

Is there a way to get autocomplete when writing a GraphQL query using the gql `...` tag, when using Typescript?

Something similar to when writing queries in Graphiql for example.

Solution

  • This heavily depends on your development environment and IDE, I try to suggest two solutions, one working with any IDE, the other working only with VScode.

    Solution one : Graphql Zeus

    I would suggest using Graphql Zeus, a tool for auto generating TS/JS (.d.ts) types for each of your queries. in this way, you wouldn't need to write queries in string format and pass it to gql tag, instead, you could easily write JS objects to express the query and have full autocomplete support from any IDE.

    Solution Two : Using apollographql.vscode-apollo (VScode Extention)

    if you are using VScode as your editor, by installing this extension and creating an apollo.config.js file, you could specify the graphql schema and get help from vs code editor to autocomplete your queries.