Since its inception, GraphQL has attracted developers for its simplicity and intuitive approach to fetching data from network-based applications. Some of the critical advantages of GraphQL are the reduction of over-fetching of data, GraphQL fragments for reusability, discoverability through the introspection query, and its type-safety. Initially, GraphQL tools were hard to find, but as GraphQL adoption has rapidly grown, so has the ecosystem of GraphQL tools.
The 11 Best GraphQL Tools For 2023
Most of the efforts in GraphQL tooling have focused on the intermediate-to-advanced cases, but in recent years there a lot of new tools that make it easier for newcomers to join the ecosystem. A great place to look for GraphQL services and tooling is the Code section on graphql.org. In this article, however, we want to look at our top 11 GraphQL tools for 2023 which all revolve around developer productivity and faster GraphQL adoption.
1. GraphiQL Explorer v2.0 - Run GraphQL queries with ease
Like most developers, we love OneGraph's GraphiQL explorer as its ability to execute and test queries is unmatched. GraphiQL is the simplest way to explore and build GraphQL queries, and can be included in any GraphiQL instance as a simple React component. No wonder we integrated it into our platform to give you the best GraphQL playground experience. And now GraphiQL version 2.0 with full language support of the latest GraphQL Specification, syntax highlighting, autocompletion, persistence using local storage, and the support for custom plugins has been released.
2. Express & Yoga - Build a GraphQL Server with Node.JS
When starting with GraphQL, teams must decide whether to build from scratch or start with one of the serverless GraphQL platforms like graphapi®. The quickest way to run a GraphQL server locally is by using Express or Yoga, both popular Node.js frameworks. Our article about GraphQL Server describes mounting a GraphQL API server to the /graphql endpoint.
Alternatively, just head over to our Github repository and put both GraphQL tools to the test:
3. GQty - The No-GraphQL client for Typescript
GQty is a GraphQL client that labels itself as a No-GraphQL client. For GQty users, GraphQL is more a transporting protocol than an actual syntax to learn. The goal is to smooth the learning curve and increase GraphQL adoption.
Don Norman stated that good design is primarily discoverability and feedback. CGty utilizes GraphQLs discoverability to generate a declarative Typescript interface that improves developer productivity and provides instant feedback when developing front-end applications. As a result, GQty is positioning itself as the front door to the GraphQL backend ecosystem. Its quick setup, Typescript interface, and clever caching approach make it a viable alternative to other GraphQL clients.
4. GraphQL Visualizer - GraphQL Schema Exploration
As we know, sometimes a picture says more than a thousand words. So when the GraphQL schema grows big, it helps to have a different perspective on its model relationships. Nathan Smith built a neat GraphQL tool for visualizing a GraphQL schema. Just head over to his GraphQL-Visualizer page (http://nathanrandal.com/graphql-visualizer/) and execute the following steps:
- Copy & Paste the introspection query listed on the page into your GraphQL playground
- Copy & Paste the query result into the introspection result area
- Download your GraphQL schema visualization in one of 6 different formats
If you need more interactivity, check the GraphQL Voyager, an interactive GraphQL tool that the GraphQL-Visualizer inspired.
5. Insomnia - Standalone HTTP clients
During the development process, it's helpful for developers to run requests from a standalone GraphQL client. However, you might wonder why you need a GraphQL client when there is GraphiQL or a GraphQL playground which is part of most GraphQL backend-as-a-service platforms. One reason could be that you need to integrate with different APIs. Another might be trying other authentication methods or working with multiple users. All of those are standard scenarios during app development, so working with standalone HTTP clients like Insomnia or Postman can significantly increase your productivity.
6. Hurl - the HTTP testing tool
Most of us have used curl to send a quick HTTP request through the wire.
It comes with loads of options and is pre-installed on most dev machines.
Although it's possible to execute GraphQL queries with curl, it could be
more convenient. That's where
Hurl comes into the game.
Hurl is a command line tool powered by curl that runs HTTP requests
defined in a simple text format. Since version 2.0.0, Hurl supports
sending GraphQL query requests using a ``` body with a graphql hint. That
makes it a valuable member of the CLI GraphQL tools family.
For instance, using an imaginary StarWars API, you could fetch all heroes for a specified episode as follows:
7. Stellate - GraphQL Edge Caching
With Stellate, you can add edge caching to any GraphQL API. Everyone who wants to squeeze the last ounce of performance out of their GraphQL API should try it and see how it lightens the load and improves overall response times. In addition, Stellate recently announced their open GraphQL API, giving anyone full access to integrate with their platform. In an insightful blog post, they talk about how they've achieved operational readiness before opening their API to the masses. A great place to learn more about security, observability, and developer experience.
8. Graphman - Postman Collection scaffolding
9. Node-fetch - Making HTTP Requests in Node.js
There are plenty of GraphQL clients to choose from, like GQty, Relay, Apollo Client, URQL, to name a few. However, sometimes serverless functions like AWS lambdas must be more lightweight as the client package sizes negatively impact cost and execution time. That's where the good old node-fetch package comes into the game when running AWS lambdas with the node runtime. In 2015, the Fetch API launched as a modern successor to XMLHttpRequest, and it has since then become the de facto standard GraphQL tool for making asynchronous calls in web applications. With Node v17.5, the fetch API comes prepackaged as an inbuilt Node module. Why not take advantage of that and use it for running GraphQL queries as follows:
10. GraphQL Network Inspector browser extension
Debugging websites just got much smoother with the GraphQL Network Inspector browser plugin, integrated seamlessly into the Chrome and Firefox developer tools. As a highly optimized network tab tailored specifically for GraphQL, this tool brings a new efficiency level to your debugging process.
Similar to the default browser network tab, it also shows the headers, the request, and the response. The difference is that it's all optimized for GraphQL and auto-formatted, making it 10x more convenient for developers to see which GraphQL queries or mutations a website sent. In a world where GraphQL powers the modern web, having a specialized tool like the GraphQL Network Inspector within your Chrome or Firefox developer tools arsenal is a game-changer.
11. graphapi® - An enterprise-scale no-code backend platform.
While GraphQL APIs are easier to integrate for application developers, they can be challenging for teams tasked with creating them. With graphapi® we fully abstract the complexity of creating a GraphQL APIs, including schema definition, server and database provisioning, and resolver pipeline generation.
To be fair graphapi® is more than a GraphQL tool; it's a no-code backend platform that allows businesses to achieve more by enabling them to launch digital products faster at scale unlocking new opportunities and business models that help them to reach their full potential.
We are biased here, but as graphapi® sits at the intersection of serverless GraphQL, automation, and content management, it gives developers and business professionals the optimal mix for co-developing business apps.
Head over to my.graphapi.com and publish your first GraphQL backend in minutes.