Log in to GraphQL EditorGet started
Visualise your graphql schema
Artur

Artur Czemiel

10/12/2018

Visualise your graphql schema

Have you ever wondered to visualise your GraphQL schema? How it looks as a tree structure?

Explaining schema would be much easier on visual like graph. So you can easily see points where you can optimise it.

input CatReadInput {
  id: ID
}

input CatCreateInput {
  name: String
  Age: Int
}

input CatUpdateInput {
  name: String
  Age: Int
  id: ID
}

input CatRemoveInput {
  id: ID
}

type Cat {
  id: ID
  name: String
  Age: Int
}

type Query {
  listCat: [Cat]
  readCat(Cat: CatReadInput): Cat
}

type Mutation {
  createCat(Cat: CatCreateInput): Cat
  updateCat(Cat: CatUpdateInput): Cat
  removeCat(Cat: CatRemoveInput): Cat
}

schema {
  query: Query
  mutation: Mutation
}

Presenting this kind of text document wouldn't mean anything to sales or business person. However presenting visual diagram out of it helps them understand the whole data model

schema.png

You can create those schemas just by uploading file or url to GraphQL Editor

Check out our other blogposts

Fullstack template for React GraphL project
Tomek Poniatowicz
Tomek Poniatowicz
Fullstack template for React GraphL project
12 min read
over 5 years ago
GraphQL Tutorial - Queries and mutations Part 1
Robert Matyszewski
Robert Matyszewski
GraphQL Tutorial - Queries and mutations Part 1
8 min read
almost 6 years ago
TypeScript enums in 5.0 (are they still bad?)
Michał Tyszkiewicz
Michał Tyszkiewicz
TypeScript enums in 5.0 (are they still bad?)
7 min read
over 1 year ago

Ready for take-off?

Elevate your work with our editor that combines world-class visual graph, documentation and API console

Get Started with GraphQL Editor