Date:

Share:

GraphQL Editor – The Journey from Initial Release to Version 5.0

Related Articles

From the beginning of our adventure with GraphQL, we were impressed by how great its community is. The amount of great content, libraries, and tools created by GraphQL users stunned us from the start. The more time we spent working with GraphQL the more things we could improve to make working with it easier and better. We also knew we wanted to give something back to its wonderful community.

The sources

Three years ago we worked on no small scheme with a lot of complicated relationships, and then a thought came to us:

“It would be nice to be able to imagine it well enough to understand all the connections.”

Yes there were some solutions on the market that would allow us to do that, but hey everyone knows how it works. The question always arises, why not do it differently, better, and most importantly in our own way. A few days after I said:

“Okay, let’s do this”

has come

“What if we could build a GraphQL schema from visual blocks?”

And that’s how it all started. We started with a PoC version, which included only these two functions, namely:

  • GraphQL Schema Simulation,
  • Ability to build it using visual elements.
The first version of GraphQL Editor from 2018

Our project was warmly received by the GraphQL community, which led to rapid accrual 3,000 stars on GitHub. Users were not only happy to use these two simple features, but also started offering some new and cool ones. Users were not only happy to use these two simple features, but also started offering some cool features.

What’s new in GraphQL Editor 5.0

When we started we thought of a roadmap we tried to stick to, as much as possible. But with all the additional feedback, we also continued to add features suggested by the community, which after more than two years led us to where we are now, namely release GraphQL 5.0 Editor.

new graph
Many graph enhancements and different viewing modes

So again we want to thank all our users for their valuable feedback, including those that were critical, everything really helped us get better. So without further ado, let’s get into the new features.

Micro services

This is the most exciting and also the most sought after feature. What’s even more satisfying in that it’s finally released, is that we’ve been trying to figure out how to deal with it since the first release of GraphgQL Editor. GraphQL Microservices Allow users to instantly deploy GraphQL backend prototypes using JavaScript or TypeScript. What is worth mentioning is that micro services are powered by our open source library called Stucco.

stucco Is a rear engine for our micro services. Its main purpose is to hold you accountable for your infrastructure decisions. No risk of doubt, no worries. With Stucco you can use TypeScript, JavaScript or Golang to create a graphical endpoint and easily deploy them using:

  • GraphQL Editor works together
  • Local environment
  • Stabbing
  • Governors

You can deploy micro-services directly from our built-in Live Editor (similar to those you may be familiar with from Git-based platforms), but the recommended way is to do this using graphql-editor-cli. Although micro services are excellent for testing and development purposes, we do not recommend using them in production as they operate on very small machines with a rate limit of 200 requests per minute and 1,000,000 requests per month. In addition, this feature is in the process of being worked on and is released mainly because we need life testers to repeat it and improve it.

microservices
With Microservices you can deploy the back end of NodeJS GraphQL using JavaScript or TypeScript

JAMStack engine

Although JAMStack was introduced a few times back, this one received a significant update. We’ve added TypeScript and the most popular JS library for building user interface support – ReactJS. Among the other salient features you will find:

  • Better support for ES modules – Just give our live service a CDN address and it will bring all types from your server and also look for typing,
  • Import of relatively ES modules – Now you can import an ES module relative to the user within our online code editor,
  • deployment – Built-in static page layout feature to easily showcase your work to your team or a wider audience.
jamstack
JAMStack with ReactJS, TS support and easy static deployment

GraphQL Cloud

We want a GraphQL editor to become a standalone IDE for developing GraphQL-based projects. Following this goal we are adding more and more “responsibility” to our tools. now you can:

  • Create your own queries easily,
  • Easily preview using Built-in GraphiQL,
  • Save and access your work whenever you need from any device.

We have also added a proxy to support any GraphQL URL and CORS issues that frequently occur during development.

cloud
GraphQL Cloud offers a preview of graphiQL-like queries, simulating CORS support by definition

Last but not least

Aside from core features, we have also worked on some improvements in quality of life like:

  • Graph improvements – The graph module has been significantly improved:
    • Creating nodes and fields is now much faster thanks to keyboard support,
    • Relationship view includes all scalar fields,
    • The selected node mode is dragged between views,
    • You can change the code editor view at any time,
  • Spotlight menu (CTRL / CMD + K) – Additional spotlight menu for easier navigation,
  • Color themes – We added 4 new color themes,
  • study Center – From now on at every start, you will be welcomed with recent projects and a learning center to improve your editing skills,

As well as tons of bug fixes and minor improvements to the user interface.

feature graphic
Improved graph with additional display modes

So this is basically what we’ve been working on for the last 12 months. I must say it feels great to be able to finally share all of these new features with a wide audience (thanks David!). If you are already using GraphQL, I would love to hear your feedback, if not I hope GraphQL Editor will make working with it even more efficient like:

If you once started on the GraphQL path, forever it will control your destiny.

Tomek Poniatowicz

About Tomek Poniatowicz

Digital researcher and GraphQL enthusiast. Play Magic the Gathering and bake homemade pizza between blog posts.