What is GraphQL Editor

A GraphQL Editor is a tool that allows you to understand GraphQL schemas even if you are not a programmer. You can create your schema just by joining visual blocks and GraphQL Editor will transform them into a code, which is helpful when you are prototyping your new application. That is the reason why GraphQL Editor is very useful if you are a project manager or a business manager. In this article, I’ll try to show you how to build your own schema with GraphQL Editor without having much knowledge about programming.

Building your own schema

I’m going to build a schema for an app that allows its users to make reservations for football courts in my city. App user should have the option to find a court that fits his needs and be able to make a reservation for that court. That’s why I started building my schema by adding a Court object. Every Court in the app must have specific parameters, like address, length, width, subsoil type and it's opening hours. All of these parameters I’ve added to Court object as String or Integer. A String is data type used to represent text and Integer is data type used to represent numbers, that’s why length and width (numbers) parameters are marked as Integer and the rest (text) are marked as String.

How to use Query

The user should be able to find Court in App by its parameters. That’s what Query is for. I’m adding a new Object (called “Query”) to my schema. With a right click on this Object block, I can set this block type to query. The schema should contain only one main Query to standardize the way of acquiring data. Minor endpoints, used to more precise tasks like finding a desired Court, are added to this Query. This approach better reflects both code and application goals alike.

Now I can add a getCourt array to this query. The Array is a collection of data. In this particular example, getCourt is a collection of all Courts that have been added in my app. This getCourt block is an array because I want to be able to find many Courts at once by their attributes.

After i build my main query i can use “Mock backend” function of GraphQL Editor and find out if my new schema works by creating a simple request that returns mocked Court parameters like ID, subsoil_type or length of the field.

Mutation and how it works

The application must allow adding new Courts, therefore in the schema,
I have to add input addCourtInput with the same data as assigned to the Court object (excluding the ID, which should be given automatically when creating the Court). Some of this data must be given while adding a new Court and some don’t. Blocks representing required data must be set as “required” in the schema (like school
and district in my example). If the required data won’t be given while adding a
new Court record in the app it will cause an error and that will be expected behavior.
The Courts added in the application (or the data assigned to them) must be editable. So in the diagram, I add the input editCourtInput and the Mutation, that allows adding new Courts and editing existing ones. Mutation, just like Query mentioned above, is a collection of main operations available in API. These operations will be used for more precise tasks. Mutation itself isn’t doing any of editing or adding new Court records - that’s the job of operations connected to Mutation.

Similarly, I add other objects necessary for the proper functioning of the application (User, Reservation, CourtSchedules, CourtSchedule, Date, Address, School) and assign queries and mutations for them to existing queries and mutations.

So why GraphQL Editor is useful?

Along with the addition of new blocks, a code is created continuously
(GraphQL, TypeScript, and faker), showing the structure of the application.

GraphQL

Typescript

Faker

The generated code allows developers - both backend and frontend - to easily understand what elements an application should consist of, how to start building its structure and what functions application should perform. The prepared schema together with the generated code enables independent work of backend and frontend teams. That’s a real boost in progress of creating a new app and it is possible to achieve by only conducting an interview with a client, knowing his expectations and just simply putting them into a visual schema.

Other useful GraphQL tools

As a bonus part I want to share a few other tools that will help you understand GraphQL better and get more familiar with GraphQL environment:

Altair - GraphQL Client with an intuitive interface, every needed function to test and send queries, that is also easy to use and install. Altair offers an easy way of passing variables, adding headers, it gives a nice visual view of API documentation, provides requests stats, has an easy way of saving your requests windows, history and etc. It's my go-to tool when working on Graphql API, either adding or changing my API or sending requests to others.

tuql (too cool) - passing to tuql an SQLite database will provide us with a GraphQL endpoint that will have objects relationships recreated and will create necessary mutations. Maybe not the most useful tool, but it is interesting to see how easily the database can be parsed into a working API.

https://www.graphqlhub.com/ - a collection of queries for public API's schemas like Reddit, Twitter or Github. Could save some work to implement queries for those on your own.

graphql-network - a browser extension that acts as a developer tool (very similar to network tab on developer tool in the browser) for GraphQL. If you are used to the network tab it might make debugging more familiar.

https://graphql-code-generator.com/#live-demo - a more advanced, highly customizable code generator for GraphQL that can give you a viable output.

If you're looking for best GraphQL tutorials check out this post.

I hope this article will be useful to some of you. I would really appreciate your feedback :)