GraphQL IDE

GraphQL Editor is a tool that allows us to visualize code as a visual graph. By writing code, we can see the relationships between GraphQL nodes. On this page, you will learn how our GraphQL IDE works and how it can help you to

1. Creating new GraphQL schemas
2. Finding problems in large GraphQL schemas
3. Presenting and collaborating on a schema with a business page

Creating new schemas

GraphQL Editor allows you to create new schemas not only with code but also with a visual panel.

After typing the name of the node and clicking Enter, a new node will appear to us - User Now we need to add some fields to it. To do this, click the "+" icon in the upper left corner of the screen:

Then we can add some other fields such as id, fullName, etc. In addition, we can set the type of field:

Finally, we can click the "create" button.

We can also add arguments to the field. To do this we need to click + on the field and then we can create the arguments in the same way that we created the field. We can return to edit the field in 2 ways:

• click the button after selecting the node in the visual view
• move the cursor in the code and the node will automatically select itself and then we click edit button

After selecting the node we will add a friends field:

We can see that we typed friends user where friends is the name of the field and user is an attempt to match the type by fuzzy search. We click enter and after adding the field, we change its type to [User!] because friends is a list of users. Then we open the + arguments of the friends field

And we add a limit argument of type Int

As you can see, creating nodes with a visual editor can be easy and fun. Let's move on to the next section where we will take care of catching flaws in the schema.

Finding problems in large GraphQL schemas

The visual editor not only helps to create schema, but also helps us to find problems that our GraphQL design is facing. For example, we can find orphan nodes very easily. On the relational editor you can see that these nodes are placed in the upper left corner without connection to other nodes.

Presentation for business

We will be able to see what data types are available, what relationships exist between them and what fields are available in each type. This is very useful especially for people who are new to GraphQL, as it allows us to more easily understand how our system works.

Moreover, this tool allows us to share our schema with other team members or clients. This way everyone will have access to the current version of the schema and be able to see what changes have been made. This facilitates communication between team members and avoids misunderstandings.

Finally, it is worth mentioning that GraphQL Editor offers many additional features, such as generating documentation, testing GraphQL queries and exporting/importing schemas. With this tool, we will be able to optimize our work and increase the performance of our system.

In conclusion, GraphQL Editor is an extremely useful tool for developers that will help us visualize GraphQL schema and better understand how our system works. It will allow us to create, edit and share our schema graphically, which will greatly simplify our work and speed up the development of our project.

We don't know if there is a better IDE for GraphQL at the moment