CODEWITHSUNDEEP
typescriptautocompletegraphqlgql
Greg Forel
Greg Forel

Reputation: 2569

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.

Upvotes: 5

Views: 6087

Answers (2)

minnow
minnow

Reputation: 361

I went looking for a solution myself and I came across typescript language service plugins.

Apparently typescript has a plugin system which allows for the 'enhancement of existing messages between typescript and an editor'. So while they don't function as an extension of the typescript language, they allow for things like customized auto-complete and linting in template strings.

Among the example plugins in the ts docs I found ts-graphql-plugin which provides query validation, auto-completion, and tooltip info within GraphQL query template strings.

I guess this at least does the same thing as the the apollo vscode extension that the current answer suggested, but it shouldn't require that you use vscode.

Upvotes: 0

S.Zarei
S.Zarei

Reputation: 163

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.

Upvotes: 10

Related Questions