Top 13 GraphQL Libraries and Tools You Should Know in 2019

Top 13 GraphQL Libraries and Tools You Should Know in 2019

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. Top 13 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.

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.

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.

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.

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.

Thanks for reading

If you liked this post, share it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading

A Beginner’s Guide to GraphQL

Node, Express, Angular 7, GraphQL and MongoDB CRUD Web App

How to Create a Secure Node.js GraphQL API


graphql rest web-development database apollo

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Explore GraphQL with Apollo & React: Build a Superhero Database

In this article, We share some light on what GraphQL is and give you an opportunity for some hands-on experience with Apollo and React.

Hire Dedicated eCommerce Web Developers | Top eCommerce Web Designers

Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.

How long does it take to develop/build an app?

This article covers A-Z about the mobile and web app development process and answers your question on how long does it take to develop/build an app.

From REST To GraphQL

From REST to GraphQL: A different way to create an API (with Apollo & Node.js). Ready to make the jump to a GraphQL API? In this tutorial, we will cover how to create models based on your database, create a NodeJS GraphQL API that reads the data from the database, and learn how to make relations in your GraphQL API between different tables.