With the recent surge of interest in GraphQL, a vibrant new ecosystem of supplementary software has quickly emerged. Open source communities and entrepreneuring startups alike are validating new GraphQL use cases, filling in GraphQL implementation gaps, and enabling more and more developers to adopt GraphQL practices with decreased overhead through the use of some pretty awesome tools.

This is fantastic news for the query language, because Lee Byron, a designer of GraphQL at Facebook, recently noted that in order for GraphQL to reach ubiquity, the ecosystem desperately needs additional tooling:

“Where we definitely still need focus is in building and improving the tools for using GraphQL and lots of different environments”

Whether these tools handle performance analysis of graphical services, are pre-built GraphQL servers, or offer IDEs for exploring GraphQL schemas, a lot still needs to be done to improve the GraphQL usability and adoption experience.

In this article, we’ll feature a short curated selection of various kinds of tools that can be used to explore GraphQL relationships, document a GraphQL API, optimize and monitor a GraphQL API, map a REST API to GraphQL, and much more. If you have undergone a GraphQL transformation, or are planning one out, you may want to consider whether extensions like these may be a helpful addition to your API’s stack.

List of 10+ Tools & Extensions for GraphQL APIs

1: GraphQL

An in-browser IDE for exploring GraphQL APIs
Repo

As we’ve previously discussed, many GraphQL APIs use this open source console as an interactive API playground. GraphiQL is the popular Integrated Development Environment (IDE) for interacting with GraphQL API calls, enabling developers to query data and perform mutations.

This IDE is relatively easy to implement; for Node.js servers, express-GraphQL can automatically generate GraphiQL. Since it’s built on React, GraphiQL can also be injected with unique CSS for custom branding.

The GraphiQL left column provides a space to enter queries with a syntax editor to search for relevant schema using autocomplete. When the request is run, the response is displayed on the right column.

Having visual aid in the form of an API sandbox, playground, CLI, or other interactive means is an important facet of supporting a living, breathing API program that caters to the needs of your developer audience.

2: GraphQL Voyager by APIs.guru

🛰️ Represent any GraphQL API as an interactive graph
Repo |

If you’re hoping to visually see how relational your data is, running it through GraphQL Voyager can make for a cool experiment. Voyager takes a GraphQL API and turns it into a visual graph; after setting a root schema, you can visually view how fields are connected to types. Voyager is interactive, too — selecting a type highlights the fields it is comprised of, and links to relevant data within the graph.

The Star Wars API (SWAPI) visually represented in GraphQL Voyager

Echoing Lee Byron, APIs.guru founder Ivan Goncharov recently told Nordic APIs:

“Writing advanced tooling which works with any existing GraphQL API is possibly one of the critical things that REST APIs are missing.”

GraphQL Voyager provides a left column that describes field information, and a visual interface that provides quick navigation. Users can also simplify the graph by eliminating Relay wrapper classes. Beyond being a sweet visualization, the Voyager tool could help companies envision their data model, and spark conversations on relational data…. finally, we can view the “graph” behind GraphQL.

3: Hygraph

Build a GraphQL Content API in Minutes

Hygraph (formerly GraphCMS) is an API-centric Content Management System (CMS) that is intimately tied with GraphQL. It lets you build a hosted GraphQL backed for web apps, providing tooling to manage content. Users define data structures, validate them in a GraphQL console, and can see the representation in the user interface, all within the same platform.

While Hygraph is perhaps not a good fit for an existing API platform, it would cater well to a blog, web app, or other content structures that require the ability to programmatically share data. A GraphQL-based CMS would be an interesting alternative to traditional CMSs like WordPress or Drupal, and would enable a more futuristic content management framework that comes API-equipped and is thus a more flexible management layer for end user interfaces.

Hygraph is a GraphQL-fueled content management system

4: GraphQL Docs by Scaphold.io

Clean, minimalist documentation for GraphQL APIs
Repo |

Need static documentation for a GraphQL API schema? Look no further than GraphQL Docs. The site will generate simple, functional documentation in under 10 seconds given a GraphQL endpoint URL. Visitors can choose to catalogue their API documentation publicly, or to keep it private.

An open source equivalent for static documentation is graphdoc — fork this to generate and host GraphQL docs on your own. For both, the result is a clean interface, search mnenu, and links to schema definitions for object, and more.

GraphQL schema definition for the Album Object in the Spotify API

5: GraphQL Faker

Mock or extend your GraphQL API with faked data.
Repo

If you are mocking up a barebones API, why not add some lorem ipsum data to test things out? With GraphQL Faker, GraphQL API developers can insert realistic data to mimic real life results. It’s powered by faker.js, enabling developers to mock over 60 kinds of realistic data, like street address, first and last name, avatar images, and more. All you need to initiate it is to write a GraphQL IDL, and GraphQL faker provides some examples to get started within the IDL editor. It’s as simple as adding a directive to a field or custom scalar definition:

type Person {
  name: String @fake(type: firstName)
  gender: String @examples(values: ["male", "female"])
}

6: Swagger to GraphQL

Migrate from REST to GraphQL in 5 minutes
Repo

For those API providers entrenched with the traditional REST model, they may be indifferent to try out GraphQL. This mapper takes the pain away, taking a Swagger schema and automatically wrapping it to GraphQL. Tooling like this could be leveraged to decrease migration headaches, and enable a provider to maintain both a REST and GraphQL facade. For more, read the creator’s thoughts on moving an existing API from REST to GraphQL.

7: GraphQL IDE

⚡️ An extensive IDE for exploring GraphQL APIs ⚡️
Repo

An Integrated Development Environment, or IDE is typically a source code editor that maximizes developer productivity with things like debugging, code completion, compiling, and interpreting abilities. The GraphQL IDE is an alternative to GraphiQL, but the keyword here is extensive. It offers additional project management features, custom and dynamic headers, import/export abilities, and the ability to store queries and view a query history.

8: GraphQL Network

Chrome Devtool that provides a “network”-style tab to allow developers to debug more easily.
Repo | Demo

Many of us techies are Google Chrome power users, so a GraphQL browser tab is a hot ticket or any serious GraphQL API developer. Called GraphQL Network, this helpful tab is similar to viewing network requests in the Chrome DevTool — which is great for debugging RESTful API calls, but falls short when working with GraphQL, since “/graphql” is usually displayed as the endpoint, meaning that differentiating seperate requests is a pain.

The tab shows a concise list of recent GraphQL requests, listing HTTP method name, status, and type of request. In addition, GraphQL Network also gives a raw view of the string of GraphQL being sent, as well as a computed view as the server interprets it. Having separate entries laid out as well as being able to view the machine-readable fragments in this way could be helpful to monitor and debug GraphQL queries.

9: Graphcool

Flexible backend platform combining GraphQL+ AWS Lambda
Site

With flexible, scalable, serverless architecture the rage, having a pre-formed backend is an interesting prospect, especially when it’s GraphQL compatible out-of-the-box. Graphcool is a platform to aid GraphQL schema design and app backend development, coming with a visual console to design and edit your your data schema, with the ability to create advanced GraphQL data models, custom fields, and relations between data. With many integrations with popular tech like AWS Lambda, Algolia, and Auth0, Graphcool looks to be a powerful tool for modern database management.

Screenshot of the Graphcool console, where you can add new fields and data relations.

10: Optics by Apollo

Optimize GraphQL queries
Website | Apollo on Github

To round off our list of GraphQL tooling, last but certainly not least is Optics, a product for monitoring GraphQL APIs. Optics is an analytics solution for GraphQL APIs that traces how queries run, helps you see what types of queries are being performed and their frequencies. As we’ve discussed before, API metrics are crucial, and any web API can benefit from adding an analytics solution to their platform. Seeing request volumes displayed visually, as well as having a better grasp on bottlenecks like latency issues is necessary for optimizing performance and improving page load times.

Example Optics visualization on latency trends over time

Optics is developed by Apollo, who are big contributors to the GraphQL ecosystem — their Apollo Client is a flexible, production-ready GraphQL client for React and native apps, and Apollo also hosts events to spread GraphQL knowledge.

Honorable Mentions:

• GraphQL Editor

Final Thoughts

Other significant tools include Thunder, a GraphQL server for Go, Join Monster, an NPM package for arbitrating issues between GraphQL and SQL database, or Dgraph, a fast database that works with GraphQL.

“Great tools are will what will make GraphQL ubiquitous”
-Lee Byron, GraphQL/Facebook

There are many more that seem to be emerging daily, and hopefully, with the advent of tools like the ones mentioned in this article, more providers can reap the benefits of GraphQL and increase general extensibility with expending little effort.

Did we leave out any awesome GraphQL tools? Please comment below!

Resources

• Facebook’s Draft RFC Specification for GraphQL
• Visit the Awesome GraphQL List for many more GraphQL tools.