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


Explore GraphQL with Apollo & React: Build a Superhero Database

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.

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.

Curious about all the buzz surrounding GraphQL, but not quite sure why you should be excited? You’re in the right place! We’ll shed some light on what GraphQL is and give you an opportunity for some hands-on experience.

Let’s start by clearing the air and answering the $20,000 question: what is GraphQL? No, it’s not an obscure function on your TI-89. It’s a query language at heart — or query specification more accurately — that can be used to fetch data from just about any data source.

Better yet, it allows you to fetch the exact data you need — no more, no less — in a single network request. While that may not sound like the sexiest tech to come out of the Facebook factory of innovation, you may just find yourself pleasantly surprised at how useful it can be.

All that’s needed is an Apollo server to act as our endpoint and a React app using the Apollo client to leverage any data within. We’ll tackle the server first.

Getting Started with Apollo Server

To get our Apollo server started, create a folder called apollo-server in your favorite working directory. Next, enter that directory and run the following npm command — you do have npm and Node installed, right? — to get the Apollo framework in place:

npm install apollo-server apollo-server-express graphql

Now that you’ve got the various bits and pieces of the Apollo server in place, it’s time to actually tell our server what to serve. Go ahead and create an empty index.js file in the apollo-server directory and add the following to it:

const { ApolloServer, gql } = require('apollo-server');

This line simply pulls in the required objects for starting an Apollo server and parsing our query strings into query documents for GraphQL.

Our First GraphQL Schema

Next up, let’s add our first schema:

// This will be our GraphQL schema
const typeDefs = gql`
  type User {
    id: ID!
    name: String
    superpowers: [Superpower]!
  }

  type Superpower {
    id: ID!
    text: String
  }

  type Query {
    users: [User]
    user(id: ID!): User
  }
`;

Here we add our type definitions. The first is of type User which we define as an object having an id, name, and superpowers field. The second is a simple id and text to describe each superpower. Finally, the third defines two acceptable queries — users and user — that, respectively, return all users or a single user that matches the provided id argument.

Pretty easy, right?

Adding a Dash of Data

Next, let’s add some mock data to bring our schema to life:

// This will be our mock data to query
const users = [{
  id: '1',
  name: 'Peter Parker',
  superpowers: [{
    id: '1',
    text: 'Web slinging'
  },{
    id: '2',
    text: 'Spidey sense'
  }]
},{
  id: '2',
  name: 'Tony Stark',
  superpowers: [{
    id: '3',
    text: 'Industrial design'
  },{
    id: '4',
    text: 'Robotic fashion'
  }]
}];

All we’re doing here is adding two users to our mock data. It’s worth pointing out that GraphQL isn’t relegated to only querying JavaScript arrays. This could be any database or other data construct. We’re just keeping things simple here to focus on the task at hand.

Don’t Forget Resolvers

Next up, we need to tell GraphQL how to interpret the queries we defined above. This is done with resolvers:

// This will be a map of functions to return the data described by our schema
const resolvers = {
  Query: {
    users: () => {
      return users
    },
    user: (root, { id }) => {
      return users.find(user => user.id === id);
    },
  },
};

You’ll notice the first query users requires no arguments and returns the entire users list (at least in theory, more on that later). The second query user accepts the ID of the user to be fetched and returns said user.

Putting It All Together

To finish off our Apollo server, we just need to instantiate a new instance and start listening for connections:

const server = new ApolloServer({
  typeDefs,
  resolvers,
});

server.listen().then(({ url }) => {
  console.log(`Apollo server started at ${url}`)
});

Here we send the ApolloServer constructor our schema and resolvers created above. All that’s needed then is to actually start the server, but first, here’s what your index.js should look like:

const { ApolloServer, gql } = require('apollo-server');

// This will be our GraphQL schema
const typeDefs = gql`
  type User {
    id: ID!
    name: String
    superpowers: [Superpower]!
  }

  type Superpower {
    id: ID!
    text: String
  }

  type Query {
    users: [User]
    user(id: ID!): User
  }
`;

// This will be our mock data to query
const users = [{
  id: '1',
  name: 'Peter Parker',
  superpowers: [{
    id: '1',
    text: 'Web slinging'
  },{
    id: '2',
    text: 'Spidey sense'
  }]
},{
  id: '2',
  name: 'Tony Stark',
  superpowers: [{
    id: '3',
    text: 'Industrial design'
  },{
    id: '4',
    text: 'Robotic fashion'
  }]
}];

// This will be a map of functions to return the data described by our schema
const resolvers = {
  Query: {
    users: () => {
      return users
    },
    user: (root, { id }) => {
      return users.find(user => user.id === id);
    },
  },
};

const server = new ApolloServer({
  typeDefs,
  resolvers,
});

server.listen().then(({ url }) => {
  console.log(`Apollo server started at ${url}`)
});

Go ahead and fire it up with node index.js and visit http://localhost:4000/ to see the fruit of your labor!

You should be greeted with a GraphQL playground that lets you try out interactive queries against the schema you’ve created.

Going Hands-on

Let’s test it out by entering this query in the left-hand pane:

query {
  user(id: 1) {
    name
  }
}

Here we use the user query we just set up, and pass it the id of 1. We’re also telling GraphQL that we only want to return the name of said user. The result in the left hand pane — after clicking the play-like button — should look like this:

{
  "data": {
    "user": {
      "name": "Peter Parker"
    }
  }
}

Let’s say you want to take a peek at his superpowers too. All you have to do is request that field:

query {
  user(id: 1) {
    name,
    superpowers {
      text
    }
  }
}

We added the superpowers field and, since we only care about the text and not the superpower ID, we specify as much. The result should now display each superpower for our first user:

{
  "data": {
    "user": {
      "name": "Peter Parker",
      "superpowers": [
        {
          "text": "Web slinging"
        },
        {
          "text": "Spidey sense"
        }
      ]
    }
  }
}

Say we want to grab all users and their superpowers, we can rely on the users query we defined:

query {
  users {
    id,
    name,
    superpowers {
      text
    }
  }
}

And the result:

{
  "data": {
    "users": [
      {
        "id": "1",
        "name": "Peter Parker",
        "superpowers": [
          {
            "text": "Web slinging"
          },
          {
            "text": "Spidey sense"
          }
        ]
      },
      {
        "id": "2",
        "name": "Tony Stark",
        "superpowers": [
          {
            "text": "Industrial design"
          },
          {
            "text": "Robotic fashion"
          }
        ]
      }
    ]
  }
}

Only care about superpowers? We can do that too:

query {
  users {
    superpowers {
      text
    }
  }
}

And you get:

{
  "data": {
    "users": [
      {
        "superpowers": [
          {
            "text": "Web slinging"
          },
          {
            "text": "Spidey sense"
          }
        ]
      },
      {
        "superpowers": [
          {
            "text": "Industrial design"
          },
          {
            "text": "Robotic fashion"
          }
        ]
      }
    ]
  }
}

At this point you should be able to appreciate the supreme flexibility and allure of GraphQL. With a single query and connection we can retrieve any slice of the data we desire. All that’s necessary is a well designed schema and the resolvers to support it.

Even better, back-end developers and front-end developers can do their thing almost independently. With the schema acting as a middle man, both groups can effectively avoid stepping on each other’s toes. And really, that’s GraphQL in a nutshell. Before we wrap this tutorial up however, let’s take a look at how to integrate these queries with an actual React app.

Introducing React to the Mix

Go back to your root working directory and run the following commands to set up a bootstrapped React app with the requisite GraphQL and Apollo libraries:

npm install -g create-react-app
create-react-app my-graphql
cd my-graphql
npm install apollo-boost react-apollo graphql

Next, replace the contents of src/index.js with the following:

index.js:

import React from 'react'
import ReactDOM from 'react-dom'
import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { ApolloProvider } from 'react-apollo'

import App from './App'

const client = new ApolloClient({
    link: new HttpLink({ uri: 'http://localhost:4000/graphql' }),
    cache: new InMemoryCache()
})

ReactDOM.render(
    <ApolloProvider client={client}>
    <App />
    </ApolloProvider>,
    document.getElementById('root')
)

All we need here are the usual imports for a React app along with the Apollo client to interface with our new Apollo server. To create the Apollo client we just need a link to the server http://localhost:4000/graphql and a way to cache our goods. With that, we simply render the app.

Next, we need to set up the app to query and display the data presented by our Apollo server. Go ahead and replace the default src/App.js with this:

App.js:

import React from 'react'
import { Query } from 'react-apollo'
import { gql } from 'apollo-boost'

const TEST_QUERY = gql`
  {
    user(id: 1) {
      id,
      name,
      superpowers {
        text
      }

  }}
`;

const App = () => (
  <Query query={TEST_QUERY}>
  {({ data: { user }, loading }) => {
      if (loading || !user) {
        return <div>Loading ...</div>;
      }
      return (
    <p>
        {user.name} ({user.id}) has the following superpowers:
        <ul>
        {user.superpowers.map(superpower => (
            <li>
                {superpower.text}
            </li>
        ))}
        </ul>
    </p>
      );
    }}
  </Query>
);

export default App

You should see some familiar patterns here. We first use gql to create a GraphQL query document that requests the user with ID 1 — more specifically, their ID, name and superpowers text. Then we pass the document to our server with the Query tag. It’s here that we can format the results in a pretty React app.

Go ahead and start the server with npm start and check out the beautiful results at http://localhost:3000/.

And with that, our tutorial is complete. You’ve created an Apollo server and fed it some simple data structures. You discovered how to write schemas and resolvers to define interactions with the data. You then practiced querying specific pieces of that data. Finally, you tied it all together with a React app that retrieves data from the server and presents it in a nicely formatted way.

While this should be enough to get you started with integrating GraphQL in your future projects, there’s lots still to learn. Mutations for adding and changing data is a great next step.

From REST To GraphQL

From REST To GraphQL

From REST To GraphQL: As our applications grow larger, our REST architecture often becomes unmanageable. Custom endpoints and over/under fetching all become part of your life as a developer. Leave that behind and welcome GraphQL, a declarative and hierarchal way to fetch data, with just one endpoint to rule them all.

As our applications grow larger, our REST architecture often becomes unmanageable. Custom endpoints and over/under fetching all become part of your life as a developer. Leave that behind and welcome GraphQL, a declarative and hierarchal way to fetch data, with just one endpoint to rule them all.

Thanks for reading

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

Follow us on Facebook | Twitter

Further reading about REST and GraphQL

GraphQL vs REST

An Intro to GraphQL API

GraphQL vs REST: putting REST to rest

A Beginner’s Guide to GraphQL

REST Assured Authentication

Restful controllers in Laravel