loading...
GraphQL Editor

How to visualize your GraphQL schema?

tomekponiat profile image Tomek Poniatowicz Updated on ・2 min read

GraphQL is a technology you must learn this year to keep up the pace of the frontend and the backend evolution. Right now REST is the most popular choice but this will change soon. If you haven't thought about converting to GraphQL yet, it's the right time :)

Know your schema

What’s a GraphQL schema and why it's so important to know it well?

The GraphQL schema is a centerpiece of your GraphQL project. GraphQL schema is nested in your GraphQL server and defines every functionality available to the clients. The main element of each schema is type which allows establishing relations between different types, define allowed GraphQL operations (Queries and Mutations) to be performed on the server and more.

To make it easier to understand the operation that a server can perform GraphQL defined a universal schema syntax know as SDL (Schema Definition Language). The SDL defines the elements of your project i.e. type:

type Movie {
   title: String
   Director: Director
}

type Director {
   name: String
   movies: [Movie]
}

or query (asking the server for the data) and mutation (manipulating the data):

type Query{
    getMovies: [Movie]
    getDirectors: [Director]
}
type Mutation {
   addMovie(title: String, director: String) : Movie
}

So as you see the schema is indeed a centerpiece of any GraphQL project and it's important to be aware of what is what and where to find it. Big complicated schemas are really hard to comprehend. Let's take GitHib schema as an example, it has 9182 lines of code! It's really hard to follow... Fortunately, graphs are coming with help!

Visualization is the key

A graph is an abstract data type. It's structure consists of a finite set of vertices, nodes or points linked together. Graphs are a great tool for shaping logic behind your app as they fit-in well for any IT project and at this point, we can agree that graphs are more accessible than code in terms of apprehending the schema.

Turning schema code into graphs

So how can we turn our schema code into a visual graph? It's simpler than you can imagine. We are going to use GraphQL Editor.

All you need to do is go to and load your schema from URL (you can also build a new schema (use code or visual editor)as below and ...

... and that's it!

If you have provided editor a valid schema it will automatically turn its code into a visual graph. Cool, right?

PS:

The original article was posted on GraphQL Editor Blog - https://blog.graphqleditor.com/visualize-your-schema/

Here is the link to GraphQL Editor app in case you want to try it out -
https://app.graphqleditor.com/showcase/fake-twitter/

Posted on by:

tomekponiat profile

Tomek Poniatowicz

@tomekponiat

Pizza fanatic, Magic the Gathering addict, GraphQL enthusiast :)

GraphQL Editor

The GraphQL Editor is a supportive tool for both advanced GraphQL users as well as those making their first steps with GraphQL APIs.

Discussion

markdown guide
 

Hey

Even though this looks really interesting from the screenshot, I'm not going to click that link. :(
Everyone doing some blog-post- sharing copies the content in here on Dev.to and references the source somewhere on top or are the bottom.

Sure the goal is the same: promote your blog, but this kind of advertisement right here is forcing the hand. Not what I'm expecting from and for this awesome community :(

Hope you understand my point and don't get offended.

 

Thanks for the feedback! I haven't thought that might be a problem :) I will edit it so you can read full version and then decide if you want to check it out :)

 

Thanks for coming back on that!

I didn't know about that tool and it's actually interesting! Would be awesome to have some kind of shadowing to filter in every involved sub type.
Also, love the minimal!

Going to try that at my new job in the next days (:

That's great :) Thanks for the shadowing tip!