Strongly typed GraphQL queries

Question

I'm setting up a project with Vue CLI, using axios as my request library. All of the examples that I've seen uses a string as the query, eg

{
  hero {
    name
    friends {
      name
    }
  }
}

Since I'm using typescript and have typings for the entities, is there any way to generate the query using some kind of fluent framework or similar, so that I can work with intellisense instead of plain strings?

Answer 1

Most clients require you to provide the query as a string. You can use an IDE like GraphiQL, GraphQL Playground or Altair to provide features like autocompletion and syntax highlighting when writing your query. Certain editors also have plugins that offer similar functionality. If you're using TypeScript, you can typically use something like GraphQL Code Generator or Apollo CLI to then generate the types based on your queries and your schema.

The only client I'm aware of that is generated from your schema , allowing you to use a fluent API instead, is GraphQL Zeus .