Awesome Tools and Extensions for GraphQL APIs

Update: On April 16th 2021, Slash GraphQL was officially renamed Dgraph Cloud. All other information below still applies.

Updated on 24 February, 2021 by Abu Sakib

For several years now I’ve been building both GraphQL apps and GraphQL tooling. However, recently, I find myself more and more building apps and less and less building the tooling. That means I’m spending more time as a developer using Dgraph and consuming the tools in the GraphQL ecosystem.

This blog is, in part, a shoutout to some of the awesome tools in the GraphQL ecosystem that are appealing right now. At the same time, I’d love to hear from you about any tools I’m missing, that I should add to my GraphQL tech stack, or replace other tools with instead.

To get you started with learning GraphQL or trying some different GraphQL tools, I’ve included resources that can help you.

The Ideal GraphQL Tech Stack

Dgraph + [ React + Apollo client 3.0 beta + Typescript + GraphQL Code Generator ] = boom!

My default workflow after designing my GraphQL schema and starting Dgraph is:

1. npx create-react-app with --template typescript
2. yarn add graphql @apollo/client react-router-dom
3. yarn add -D @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-apollo @graphql-codegen/add @graphql-codegen/near-operation-file-preset

I hook up GraphQL Code Generator to the Dgraph instance serving my GraphQL API, so I can regenerate types as I iterate on the schema. Then, I start laying out components.

The combination of Apollo client, Dgraph, and GraphQL Code Generator is a fab, mostly declarative way to build. The code generation and types mean I get instant feedback as I iterate. I get per GraphQL query, typed React hooks — no more generic useQuery. Intellisense kicks in on the query results and I can layout from the GraphQL result types without thinking. And, best of all, Typescript gives me a red squiggle if I ever break anything. Here is an example of using Apollo, React, and Typescript together, plus a walkthrough of how I used this stack to build a Discuss clone.

I know, I know… there are all kinds of other fun frameworks, and I’m hardly the coolest kid in the playground with React+Typescript, but for me, it works.

This step-by-step guide to building a message board app with React and Typescript can help you learn more about these GraphQL tools. It’s part of our Dgraph Learn site, which also includes a guide for the same app with Vue, if you’d prefer.

Apollo

I spend time here. If you play with GraphQL, you will too.

Whether you are building a GraphQL server, writing a UI, or managing a GraphQL endpoint, there’s a lot of fun kit around Apollo GraphQL. The main bits you’ll bump into are:

• Apollo Server - open-source, spec-compliant GraphQL server that’s compatible with any GraphQL client and any data source.
• Apollo Client - React state management library for JavaScript GraphQL apps. For lots of developers, there’s a ‘GraphQL moment’ when they first bump into GraphiQL. For me, it was “now that my mutation has run, how do I make sure my UI updates … oh, Apollo Client Cache”.
• Apollo Federation - federate your GraphQL microservices.
• Apollo Graph Manager (formerly Apollo Engine) - cloud service for your organization’s data graph.

You’ll probably also want the Apollo GraphQL VS Code plugin and the Apollo Client Developer Tools chrome extensions.

Increasingly, I’m looking at Apollo Server and Apollo federation as I look at apps that are a set of microservices or as I consider how to layer my GraphQL server. I think those sorts of architectures are really important for Dgraph.

In release 21.03, Dgraph will add support for Apollo Federation; we’ll add relevant documentation and details on how you can use it with Dgraph.

GraphQL IDE

GraphiQL and GraphQL Playground

GraphiQL is the inspiration (and often codebase) for other IDEs, and the first graphical point of contact most developers have with GraphQL. It was the official IDE project under the GraphQL Foundation, but now it’s joining forces with GraphQL Playground - exciting!

I tend to have GraphQL Playground open sometimes, but I prefer Insomnia.

Insomnia

I’ve gravitated to Insomnia. It’s got support for the usual HTTP requests as well as GraphQL support. You can set up with environments and variables if you need, and add folders. There’s also code generation - that I don’t use that much beyond getting a cURL command. I find the GraphQL docs and schema updating also work nicely when you are iterating and want to refresh. There’s a blog post where you can learn more about how to use Insomnia while working with GraphQL.

A GraphQL developer also just has to smile any time they see the Insomnia URL: insomnia.rest/graphql.

Firecamp

I met the founder at GraphQL Asia in February and thus went to Firecamp.io. I’m super impressed with this one. It’s got web socket, REST, and GraphQL support and I like the organization around workspaces and projects. Writing this reminds me that I’m keen to check out the team collaboration feature.

I haven’t completely jumped to this yet, but it’s worth coming back to.

Altair

I tried Altair a few times and it feels quite slick and nice to use. It’s got all the fun stuff around environments, collections, and scripts. From memory, I checked it out because of the file upload feature. Worth a look if you are hunting for a GraphQL IDE.

Postman

Postman didn’t have GraphQL support; now it does - win!

I haven’t worked with Postman for GraphQL much yet, but some of my teammates have been using it and raving about how great it is with GraphQL and for managing APIs. They’ve written a series of blog posts on using Postman. The first post shows how to use Postman with GraphQL through examples, and the second one demonstrates how you can easily perform administrative tasks on your Slash GraphQL backend using Postman collections.

It’s Postman, so it’s got all the bits, and pretty much everyone who does ‘API’ knows about this tool. It’ll be interesting to see how the Postman GraphQL journey goes. It looks like GraphQL support was a highly requested Postman feature for a couple of years before they jumped in - a bit like Dgraph and supporting the official GraphQL Spec :-)

GraphQL Voyager and GraphQL Editor

I’ve played with both GraphQL Voyager and GraphQL Editor a couple of times.

GraphQL Voyager ingests your GraphQL API and gives you a nice, interactive visualization of the GraphQL schema. GraphQL Editor goes the other way around, giving you a visual way of building your GraphQL schema.

Also related is the OneGraph explorer, which lets you build a query/mutation by point and click.

Interesting ways of interacting with and designing GraphQL schemas, particularly visual/graph-based ways, is a place in GraphQL where cool tools are going to crop up. I don’t think anyone has completely nailed this area yet. Watch this space.

Monitoring

Instrumenting and monitoring GraphQL APIs is critical to healthy operations. PayPal’s engineering team gives a good introduction here.

Dgraph has built-in support for OpenCensus (soon to be OpenTelemetry), so we’ve got great distributed tracing support, but it doesn’t yet play nicely with GraphQL tooling in this space.

In the near future, we’ll be taking a long look at Apollo Studio (formerly Apollo Graph Manager) and also Moesif, so that we provide integrations to give our customers easy access to their favorite dashboard of metrics, visualizations, and GraphQL insights.

Dgraph

Wait, what? You didn’t think I was going to write this whole blog about cool GraphQL tools and not make much mention of this one, did you? You are reading Dgraph blog after all!

It’s the only product built for GraphQL from the disk up. You start your app journey with GraphQL and never have to leave that experience: no translations to rows and columns, no more writing all those resolver functions, just GraphQL; you even admin your instance with GraphQL!

You start from a specification of your app’s data graph as GraphQL types, from which Dgraph creates a complete GraphQL API and serves it from an API endpoint. From there, Dgraph can build in all sorts of graph search. You can go straight to a GraphQL client, iterate on your schema, and can build out custom logic and authorization. We’re building out more docs, tutorials, and sample apps all the time, so check back in to find new features.

Slash GraphQL

At Dgraph we are also building Slash GraphQL — the only hosted, native GraphQL backend. Slash makes it easy to build GraphQL apps without building or managing backend infrastructure, though it’s able to take on custom extensions as your app needs. You can sign up for it here for free.

Closing Thoughts

There are many more tools in the GraphQL world than fits in a short post. These tools are where my mind’s at right now. Jump in and comment if another GraphQL tool is on your mind.

And there’s always the awesome list for GraphQL, part of the open-source Awesome initiative, where you can refer to for more GraphQL tools and updated information, covering more grounds and aspects.

If you’re someone who’s recently boarded the GraphQL train to develop apps, now that you have an idea of what tools practically go into making GraphQL applications, you probably want to get your feet more wet and start building. Dgraph has your back to set you up for a painless but productive developer experience. If you want a head start, go over to Dgraph Learn.

With lots of learning resources and courses curated for developers, you’ll go from GraphQL basics to building full-stack applications (like a Discuss clone in React, which I started building in this article) using these nifty tools (and more, as you’ll find out along the way). It has something for you no matter where you are in your journey, and we’re always working on adding more content.

You’ll find many resources on our blog as well, where we frequently post updates and short tutorials. If cloning isn’t your thing, check out the articles on building a book review app and a DevJoke app.