13 GraphQL Tools and Libraries You Should Know in 2019
Useful tools and libraries to boost your GraphQL APIs development workflow.
GraphQL was developed internally by Facebook in 2012 before being publicly released in 2015. On 7 November 2018, it was moved to the GraphQL Foundation, hosted by the Linux Foundation. Following this, a rich vibrant ecosystem began to grow around it as GraphQL became increasingly adopted.
GraphQl is basically a ״query language for your API, and a server-side runtime for executing queries by using a type system you define for your data״. It isn’t tied to any database or storage and is backed by your code and data. A GraphQL query is a string sent to the runtime that returns JSON to the client.
This simple effectiveness gave birth to a vibrant ecosystem of content, talks, guides and -as always- a wide set of open source tools, clients, editors and libraries to complete and enhance the GraphQL workflow in the wild.
In this post, I’ll try to gather some of the best GraphQL tools and libraries around, from client libraries to IDEs and useful integrations. The list isn’t ranked, and please feel free to comment and add your own suggestions.
1. Apollo Client and Server
The APOLLO platform is an implementation of GraphQL that helps you manage data from the cloud to your UI. It’s incrementally adoptable and can be layered over your existing services, including REST APIs and databases.
Apollo-client is the client library for Apollo GraphQL. It’s a “fully-featured caching GraphQL client with integrations for React, Angular, and more”. It allows you to easily build UI components that fetch data via GraphQL, which also makes it a very powerful combination with Bit. With a declarative approach to data fetching, all of the logic for retrieving your data, tracking loading and error states, and updating your UI is encapsulated in a single Query component- which can be composed with presentational components. This whole approach can make life much easier in many cases.
Apollo-server implements a spec-compliant GraphQL server which can be queried from any GraphQL client, including Apollo Client. It’s a way to quickly build a production-ready, self-documenting API for GraphQL clients, using data from any source. It’s open-source and works well as a stand-alone server, an add-on to an existing Node.js HTTP server, in “serverless” environments, and with any GraphQL schema built with GraphQL.js. Take a look.
- Also, see these 2 useful projects to complete to Apollo experience.
2. Bit
Bit is an open source tool and platform that turns reusable code into components you can easily share and develop from different projects.
Since its release, it’s been gaining massive traction as a modular solution for organizing and sharing components between projects. While often used for UI components, it’s very useful for GraphQL APIs providing very unique abilities.
Using Bit, you can instantly turn your API examples and client (e.g. Apollo) into components that your team can easily share and use in any project while being able to modify the component’s code right from the consuming repo (!).
This means that your API integrations become a 2-way street, where the other side can play with the API example components and quickly make them work right from their own project, and quickly put it to use in their real context.
Here are GitHub’s GraphQL API examples shared as bit components:
Anyone can download these components, make changes as needed, and use them in their own environment. When the consuming end can make changes to the code right from their own project, it’s the easiest API integration yet.
Example- React Material UI components as a Bit component collection. Discover, use and develop each component right from your own project. Use Bit to very easily turn your own components into a shared collection like this.
3. Relay
import {graphql} from 'react-relay';graphql`
query MyQuery {
viewer {
id
}
}
`;
Relay is a JavaScript framework built by Facebook to serve as a performant and scalable infrastructure for applications using GraphQL.
Relay works as a bridge between React and GraphQL, to leverage the component-based encapsulated nature of React. Through Relay, components can specify what data they need and get it, so that components can be composed while the data needs of the app are localized per component.
Relay’s declarative approach lets you declare your data requirements using GraphQL and Relay will handle data fetching, while aggregating queries into network requests to efficiently fetch only what you need. Data can be mutated on the client and server using GraphQL mutations, with automatic data consistency, optimistic updates, and error handling.
While less popular than alternatives like Apollo, Facebook launched relay-modern with modifications like better mutation API, QueryRenderer improvements, optional routing and more. You can view the changes here.
4. Prisma
Prisma is a 15k stars “Database Tools incl. ORM, Migrations and Admin UI (Postgres, MySQL & MongoDB)”. Simply put, Prisma aims to replace traditional ORMs and simplify database workflows. With GraphQL, Prisma makes it easy to implement resilient, production-ready GraphQL servers with pre-made CRUD operations ready to be used, a performant query resolution engine, Apollo (client & server) compatibility, type-safe resolvers and more.
Here’s an example of a GraphQL Server implemented with Prisma, which is bases on 2 more great projects from the Prisma team, GraphQL Yoga — Fully-featured GraphQL Server with focus on easy setup, performance & developer experience and GraphQL Nexus- a code-First, Type-Safe, GraphQL Schema Construction. Take a look at these 3 projects, together or as separate modules.
5. GraphiQL
This is a project that prior to this research I’ve heard about from multiple friends. This neat 8K stars project defines itself as an “in-browser IDE for exploring GraphQL”. Through GraphiQL, you can get the Schema definitions from the GraphQL server and start playing with it hands-on.
This IDE comes with Syntax highlighting, intelligent type ahead of fields, arguments and types, documentation explorer, real-time error highlighting and reporting, automatic query completion and tools to run and inspect query results. You can build for the web with Webpack and Brwoserify, or use the pre-bundled version. Here’s a live demo you can try for your self. Very nice :)
6. GraphQL Editor
As you might have guessed, this is a visual Node editor which makes it easier to understand GrapHQL schemas. You can create a schema by joining visual blocks and GraphQL Editor will transform them into code. For better and worse, this is a “no code solution” that helps your quickly prototype your system’s architecture in a visual way. It even comes with out-of-the-box backEnd mocks so you can start working right away. Neat to play with.
7. GraphQL Playground
Yet another popular GraphQL IDE, that helps manage subscriptions, docs and collaboration. It comes in the forms of a desktop app or a web version and provides features like context-aware autocompletion & error highlighting, interactive multi-column docs, real-time GraphQL Subscriptions, Config support with multiple Projects & Endpoints and even Apollo Tracing support.
While it uses components from GraphiQL, it adds on top of it by introducing Interactive, multi-column schema documentation and automatic reloading, query history, a configuration of HTTP headers and tabs. Using yet another IDE can be a pain, but for intense GraphQL users, it can save serious time.
8. Altair
Altair is a “graphQL client for making graphQL queries to a graphQL server — similar to Postman but for GraphQL”. With Altair you can you can add, edit and remove HTTP headers used in making the request, including authentication token headers for requests that require authorized access.
It also lets you add GraphQL variables to your request, for convenient use of dynamic values in your queries. A response state information display helps you learn how long your requests take, and additional features include schema docs display, syntax highlighting and more. Nice tool.
9. GraphQL Voyager
GraphQL Voyager represents any GraphQL API as an interactive visual graph (including these public GraphQL APIs). It provides quick navigation on your graph, a left panel which provides more detailed information about every type, a “skip Relay” option that simplifies graph by removing Relay wrapper classes and the ability to choose any type to be a root of the graph. Neat!
10. URQL
Built by Formidable labs, urqle is a “highly customizable and versatile GraphQL client for React”. This GraphQL client exposes a set of React components and hooks, which -like Apollo- makes it a powerful combination with Bit. The idea in this project is to avoid the larger footprint of most clients, and create a lightweight library which is also complex enough to scale.
The main idea is to balance between simplicity and complexity for convenient data storage, chaching, context-flexibility and everything else. You can learn more about URQL’s architecture here, and even try to extend it yourself.
11. AWS Amplify Client
AWS’s declarative JavaScript library for application development using cloud services comes with a GraphQL client that lets you interact with your GraphQL server or AWS AppSync API with an easy-to-use & configured client.
This API category provides a solution for making HTTP requests to REST and GraphQL endpoints. It includes a AWS Signature Version 4 signer class which automatically signs all AWS API requests for you as well as methods to use API Keys, Amazon Cognito User Pools, or 3rd party OIDC providers. The AWS Amplify API module supports AWS AppSync or any other GraphQL backends.
12. GraphQL Hooks
Graphql-hooks is a minimal hooks-first GraphQL client for React. It supports custom cache plugins, server-side rendering and requires minimal configuration to get up and running quickly. It only weighs 5.2KB (1.9KB gzipped). It even has support for server-side rendering. Small and precise.
13. Express GraphQL
From GraphQL comes… express-graphql! As you might have guessed, this helpful library lets you create a GraphQL HTTP server with Express (also works with connect and Restify). By default, the express request is passed as the GraphQL context, which means you can use most express middleware just by inserting it before graphqlHTTP is mounted to support scenarios like authenticating users, handling uploads, or mounting GraphQL on a dynamic endpoint. If working with Express this might be what you’re looking for.
