From the very beginning of our adventures with GraphQL, we have been impressed with how great the community of GraphQL is. The amount of content, libraries, and great tools generated by GraphQL users surprised us from the start. The more time I spent working with GraphQL, the more things I could improve to make it easier and better. We also knew we wanted to give something back to a great community.
origin
3 years ago we were working on a pretty schema with a lot of complex relationships and the following idea came to mind:
“It would be nice to be able to visualize all the connections well enough to make sense.”
Yes, there are several solutions on the market that allow us to do that, but everyone knows how it works. The question always arises why we don’t do it differently, better, and most importantly, in our own way. A few days later he said:
“Okay, let’s do that”
come
“What if we could build a GraphQL scheme with visual blocks?”
So it all started. We started with a PoC version with only two features:
- GraphQL schema visualization,
- The ability to build using visual elements.
First version of GraphQL Editor in 2018 |
Our project has been very warmly received by the GraphQL community and has accumulated quickly. 3,000 stars on GitHub. Not only were users happy to use these two simple features, they started suggesting cool new features. Not only were users happy to use these two simple features, they started to suggest some cool features.
What’s New in GraphQL Editor 5.0
When we started we had a roadmap in mind that we tried to stick to as much as possible. However, with all the additional feedback, we continued to add features suggested by the community, and more than two years later, at this point, i.e. GraphQL Editor 5.0.
![](https://davidwalsh.name/demo/2021/11/new-graph-1024x640.png)
Many graph improvements and different viewing modes |
So, we would like to thank all our users once again for giving us valuable feedback, including important ones. All of this feedback has really helped us improve. Without further ado, let’s take a look at the new features.
microservices
This is the most interesting and most requested feature. What’s even more satisfying about being finally released is that since the first release of the GraphgQL Editor, we’ve been trying to figure out how to solve this problem. GraphQL microservices Users can instantly deploy GraphQL backend prototypes using JavaScript or TypeScript. Worth mentioning is that microservices are powered by an open source library called Stucco.
stucco A backend engine for microservices. The main goal is to remain accountable for infrastructure decisions. No risk of vendor lock-in and no worries. Stucco allows you to create a GraphQL backend using TypeScript, JavaScript, or Golang and easily deploy it using:
- GraphQL editor share worker
- local environment
- docker
- Kubernetes
You can deploy microservices directly from the built-in live editor (similar to what you might find on a Git-based platform), but the recommended way is to use: graphql-editor-cli. Although microservices are good for testing and development purposes, they are not recommended for use in production environments, as they run on very small machines that are limited to 200 requests per minute and 1,000,000 requests per month. Also, this feature is being rolled out because there is a lot of work in progress and we need live testers to iterate and improve it.
![](https://davidwalsh.name/demo/2021/11/microservices.png)
Microservices allow you to deploy a NodeJS GraphQL backend using JavaScript or TypeScript. |
JAMStack engine
JAMStack was introduced several versions ago, but this version has received significant updates. Added ReactJS, the most popular JS library for building TypeScript and user interface support. Among other notable features, you can find:
- Better ES module support -j gives the live service the cdn url, it gets all types from the server and also looks for input.
- Import relative ES module – You can now import user-specific ES modules within the online code editor.
- deployment – Built-in static page distribution feature makes it easy to show off your work to your team or a larger audience.
![](https://davidwalsh.name/demo/2021/11/jamstack-1024x640.png)
JAMStack with ReactJS, TS support and easy static deployment |
GraphQL Cloud
We want GraphQL Editor to be a self-contained IDE for developing GraphQL-based projects. In line with this goal, we are increasingly adding “responsibility” to our tools. You can now:
- Easily create your own queries,
- Easy preview using built-in GraphiQL;
- Store and access your work whenever you need it, from any device.
We’ve also added proxies to support all the GraphQL URLs and CORS issues that come up frequently during development.
![](https://davidwalsh.name/demo/2021/11/cloud-1024x640.png)
GraphQL Cloud provides GraphQL-like query previews, a configurable mock backend, and CORS support. |
Last but not least
In addition to our core functions, we are working to improve the quality of life by:
- Graph improvement – The graph module has been greatly improved.
- Now, node and field creation is much faster thanks to keyboard support.
- The relationship view includes all scalar fields.
- The selected node state persists between views,
- The code editor view can now be switched at any time.
- Spotlight menu (CTRL/CMD + K) – Added spotlight menu for easier navigation;
- color theme – Added 4 new color themes.
- learning center – From now on, at every start, you can improve your editor skills with recent projects and the Learning Center.
As well as numerous bug fixes and minor UI improvements.
![](https://davidwalsh.name/demo/2021/11/feature_graphic.png)
Graph enhanced with additional view modes |
This is basically what we’ve been working on for the last 12 months. It feels great to finally be able to share all these new features with a broad audience (thanks David!). If you’re already using GraphQL, we’d love to hear your feedback. If not, we hope that the GraphQL Editor will be able to work more efficiently with:
Start the GraphQL path and it will rule your destiny forever.
![Tomek Poniatowitz](https://davidwalsh.name/demo/tomek.jpg)
About Tomek Poniatowicz
Digital explorer and GraphQL enthusiast. Magic gathering between blog posts and baking homemade pizzas.
Source