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 note is one part shout-out to some of the awesome tools I'm using right now, and those I'm looking at using soon; one part prompting you to tell me what you rely on, and I'm missing out on; and, one part time-capsule, so I can look back later and see what was awesome in GraphQL in lockdown 2020.
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:
-
npx create-react-appwith--template typescript yarn add graphql @apollo/client react-router-domyarn 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.
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.
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.
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 works nicely when you are iterating and want to refresh.
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 I'm encouraging a teammate to blog about it because he's been using it.
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 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 give 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 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 resolvers, just GraphQL; you even admin your instance with GraphQL!
You start from a specification of your app's data graph as GraphQL types, which Dgraph serves as a GraphQL API. 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 extensible 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.
ReferencesTop image: Astronaut Franklin R. Chang-Diaz works with a grapple fixture during a spacewalk on the STS-111 mission to perform work on the International Space Station.This is a companion discussion topic for the original entry at https://dgraph.io/blog/post/graphql-tools/