Alexis Kestler
I‘m thrilled you‘re interested in learning about GraphQL – it‘s an incredibly helpful technology I‘ve used extensively in my work. As an industry veteran who has built dozens of applications over the past decade, I cannot understate the positive impact GraphQL has made on my productivity and client outcomes.
Through this guide, we‘ll explore the top GraphQL tools that enable you to be vastly more efficient compared to traditional REST APIs. I‘ll share plenty of real-world examples, data and clear advice tailored specifically to different developer personas and use cases. My goal is for you to finish this guide fully prepared to start leveraging GraphQL‘s benefits right away!
Why I‘m So Passionate About GraphQL
I still vividly recall the early 2010s when I was building single page apps using Backbone.js and relying on rigid backend REST APIs. My clients would constantly change their minds about what data they needed on pages. But with REST, I had no easy way to retrieve new data structures without begging my backend team for new endpoints months later.
GraphQL finally enabled me to break free of these endless REST frustrations by giving frontend developers like us the flexibility to specify our data needs. No more overfetching extra fields or making duplicate roundtrips to API. I can‘t even imagine going back to the REST dark ages now!
Based on StackOverflow‘s 2020 survey, I‘m clearly not alone with over 50% of developers now using GraphQL:
| Technology | Percent Usage |
|---|---|
| REST | 69.7% |
| GraphQL | 56.4% |
| gRPC | 10.8% |
| SOAP | 8.7% |
Beyond the productivity boost I‘ve seen personally, GraphQL adoption continues skyrocketing because it directly tackles pain points like:
- Eliminating overfetching by giving clients full control to specify needed data
- Cutting out redundant client-server roundtrips by consolidating queries
- Providing strong typing definitions upfront mitigating runtime errors
- Self-documenting capabilities via query language explorer
Let‘s now jump into the amazing GraphQL tools that make all of this possible!
Top GraphQL Tools for Developers
There is a flourishing ecosystem of tools that simplify leveraging GraphQL across the full application stack. Based on my hands-on experience over the past 5+ years, these are my top recommendations:
1. Apollo GraphQL Suite
Apollo GraphQL has deservedly become the industry standard platform for implementing GraphQL in production applications. Apollo offers a cohesive set of tools spanning both client and server development. Over 50% of developers implementing GraphQL now use Apollo based on surveys:
| GraphQL Client Usage | Percent Adoption |
|---|---|
| Apollo Client | 61% |
| Relay | 22% |
| Urql | 7% |
This dominant market share comes from Apollo delivering an unparalled end-to-end GraphQL experience out of the box.
Apollo Server
Apollo Server has been my GraphQL server runtime of choice the past 3 years. Setup is incredibly fast – often less than 10 minutes to get a production grade API working from scratch. Some reasons I prefer Apollo Server:
- Built-in schema validation for catching issues early
- Easy data federation stitching multiple GraphQL services
- Integrations with open source authentication libraries
- Modern JavaScript/TypeScript APIs – no config files hell!
What has kept me hooked long-term however is Apollo‘s extensive metrics, tracing and tooling support. These observability capabilities are invaluable for monitoring GraphQL query performance in production. REST APIs left me blind – Apollo gives me X-Ray vision into field-level resolution timings, caching stats etc helping me finetune GraphQL backends.
Apollo Client
On the frontend, Apollo Client elegantly handles data fetching so developers like us can focus entirely on building UIs. Plus with additional libraries like Apollo Cache and Apollo Boost setup takes just 5 minutes even for GraphQL newcomers.
My favorite aspects of Apollo Client include:
- Components declare data needs – keeps UI code clean
- Robust caching minimizes network requests
- Developer tooling like GraphQL Inspector explains exactly what is happening under the hood
- Integrates with React Developer Tools showing GraphQL data alongside component state
After using Apollo for both server and clientside GraphQL development, I cannot imagine leveraging GraphQL without it!
2. GraphQL Playground & GraphiQL
While Apollo provides the full production infrastructure, I heavily rely on GraphQL Playground and GraphiQL during initial API development. Both tools provide interactive sandbox environments for testing Queries, Mutations and Subscriptions against a GraphQL schema.
I like to describe them as ERPLY and Postico for GraphQL – very intuitive GUI clients that boost productivity experimenting with new schemas. Some helpful aspects:
GraphQL Playground
- Multiple tabs helpful for seperating concerns
- Export queries to files for version controlling
- Set custom HTTP headers for advanced use cases
- Gorgeous auto-generated schema documentation
GraphiQL
- Lightning fast setup with HTML script tag
- Configurable via querystring options
- Simple focused UI without bells & whistles
So for rapid API exploration and mocking, Playground and GraphiQL allow me to postpone writing a full client app initially. I simply open a browser, point to my local or dev GraphQL server URL and start interrogating the schema in seconds. This tight feedback loop keeps me extremely productive.
Later these tools still prove indispensible for sanity checking production APIs during debugging. I easily replicate issue queries without any custom clients required. Overall Playground and GraphiQL are absolutely essential tools for any GraphQL project.
3. Relay – GraphQL for React Rockstars
For more advanced React-based applications, Relay serves as a powerful GraphQL companion library. Originally built alongside GraphQL at Facebook, Relay handles all of your data fetching complexities so you can focus entirely on component development.
Some reasons I recommend Relay for large-scale React apps:
- Handles data consistency across components out of the box
- Query optimization via automatic batching and persisted queries
- Fine-grained error handling on failed GraphQL requests
- Impressive developer tooling for network inspection
- Integrates with React Dev Tools for easy debugging
However Relay does require upfront effort to setup containers, query renderers and codegen. For simpler use cases, Apollo Client may suffice. But demanding applications at enterprise scale need Relay‘s advanced capabilities. Think data sync across dozens of UI components relied on by millions of users.
Ultimately I think of Relay as GraphQL‘s killer app for React – hand-crafted specifically for scale while keeping components clutter free of data logic. This perfectly complements React‘s component driven architecture.
4. Nexus Schema
On the GraphQL server side, Nexus Schema has become my code-based approach for defining schemas in JavaScript apps. Nexus provides an elegant alternative to GraphQL‘s standard schema definition language. I simply declare GraphQL types directly as JavaScript classes.
For example:
object Post {
id Int
title String
author Author
}
interface SearchResult {
title: String!
url: String!
}Why have I embraced Nexus so fully?
- Leverages TypeScript for auto-complete during editing schemas
- Test driven development friendly using Jest etc
- More seamless refactoring than external .graphql files
- Supports modern JavaScript API features like async/await
Nexus schemas being defined programmatically rather than declaratively does represent a shift in mindset. But I far prefer code over rigid DSLs these days. Nexus allows me to evolve GraphQL APIs with the same flexibility I expect working in JavaScript.
5. GraphQL Code Generator
As a hardcore LAMP developer for many years, I used to think code generation was mostly snakeoil. But GraphQL Code Generator has fully converted me after witnessing 5x faster development first-hand!
By analyzing my GraphQL schema, it automatically builds typesafe API clients, React query hooks, TypeScript interfaces and loads more. I simply configure templates like:
generates:
src/types.ts:
- typescript
config:
schema: "http://localhost:4000/graphql"Then run one CLI command producing perfectly typed artifacts in seconds rather than tedious manual creation.
Beyond massive time savings, built-in auto-regeneration also ensures consistency – my classes always match the actual API schema. For large enterprises counting on quality code, this is invaluable catching errors preemptively.
So whether building frontend components or ORM data models, GraphQL Code Generator eliminates huge swaths of repetitive glue work so I can deliver features faster to customers.
Honorable Mentions
Beyond my everyday toolkit described above, these other excellent GraphQL tools deserve shoutouts:
- PostGraphile: Instant high performance GraphQL API connected to PostgreSQL database.
- Dgraph: For accessing graph structured data, Dgraph provides incredibly fast queries with GraphQL flexibility.
- Hasura: Push button CRUD GraphQL APIs auto-generated from Postgres or SQL Server.
- AWS AppSync: Fully managed GraphQL service on AWS handling data sync, offine usage etc.
I encourage you to experiment with these tools as well to find your perfect GraphQL stack!
With so many outstanding GraphQL libraries now available, your head is likely spinning trying to decide where to start! Let me provide crystal clear recommendations based on your application scenarios:
| If you are a… | Start By Using… |
|---|---|
| Back-end focused Node.js developer | Apollo Server for writing blazing fast, production ready GraphQL APIs |
| React developer focused on UIs | Apollo Client for flexible data management leaving components clean |
| Engineer new to GraphQL wanting to get oriented | GraphQL Playground & GraphiQL to quickly explore schema capabilities hands-on |
| TypeScript expert wanting statically typed contracts | GraphQL Code Generator for auto-generated client + server types |
| Startup seeking instant backend GraphQL CRUD | Hasura connected to Postgres DB with full querying out of the box |
| Team lacking dedicated backend resources | PostGraphile to auto-expose PostgreSQL as GraphQL API |
The awesome reality of GraphQL‘s rich ecosystem today is developers from all backgrounds can leverage it matching their priorities and skillsets.
Maybe you need lightning fast queries over graph data right away requiring Dgraph. Perhaps your legacy PHP application just needs bits of extra data requiring GraphQL endpoints from PostGraphile talking to existing databases. Or maybe you crave beautiful auto-generated React data hooks for your Next.js app via Codegen.
GraphQL‘s flexibility means incrementally applying it almost anywhere in your stack to solve high value bottlenecks like overfetching. You need not rewrite your entire application day one!
I sincerely hope reading this guide has shown you why I and so many fellow developers are now so passionate about GraphQL in our daily work. It scratches the itches that once seemed incurable in my career building web and mobile apps.
The community recognized early that fulfilling GraphQL‘s true capability required amazing supplemental tools. So beyond the spec itself, this vibrant open source ecosystem enables us to be far more productive while eliminating tedious coding.
Now you know exactly which libraries can lift your own applications to new heights on day one. Please reach out directly if any other questions arise on your GraphQL journey! I am always happy to help a fellow developer level up their skills and reap the rewards.
Your GraphQL Friend,
Kyle
