Click here to share this article on LinkedIn »

GraphQL is becoming rapidly popular, and tools are being developed on a daily basis. In this article, I will try to analyze from “my own point of view” not claiming absolute/complete knowledge of all available tools. Some of the common tools that are on the forefront. Most notably are tools by ApolloGraphQL, Graphcool and FormidableLabs(urql).

These tools are becoming overwhelming and it can be a bit difficult to decide the right tool without piling together lots of packages that might be doing the same thing.

I might be a bit biased since my Experience with GraphQL has been within Javascript environment(Node JS and React).

Despite using React from Facebook, I have not attempted to use Relay which from several reviews I have read seems a bit complex compared to other tools like client side tools from Apollo.

I have also not used GraphQL JS directly, so the tools I’m going to focus on are tools that have leveraged these originally developed technologies and made it easier to develop GraphQL apps both on the client and server side.

Big thanks to the people involved in creating theses tools.

Facebook

Most tools that are being designed right now heavily depend on libraries developed by facebook.

graphql(graphqljs) — The JavaScript reference implementation for GraphQL, a query language for APIs created by Facebook.

Creating a Schema Programmatically

import { graphql, GraphQLSchema, GraphQLObjectType, GraphQLString } from 'graphql'; var schema = new GraphQLSchema({

query: new GraphQLObjectType({

name: 'RootQueryType',

fields: {

hello: {

type: GraphQLString,

resolve() {

return 'world';

}

}

}

})

});

Creating a Schema using the schema language

var { graphql, buildSchema } = require('graphql');



// Construct a schema, using GraphQL schema language

var schema = buildSchema(`

type Query {

hello: String

}

`);

Lee Byron tries to explain why and when to create a schema programmatically or use schema language. Check out this github discussion.

We can also use this package to run the queries against the schema.

var query = '{ hello }'; graphql(schema, query).then(result => {

console.log(result); // Result: data: { hello: "world" }

}

express-graphql — GraphQL HTTP Server Middleware.

const express = require('express');

const graphqlHTTP = require('express-graphql'); const app = express(); app.use('/graphql', graphqlHTTP({

schema: /* The defined schema */

})); app.listen(4000);

Combining the two libraries above, we can create a schema and connect it with a server(connect, express, Restify).

graphiql- If you want to test your server without creating a front end client application, then this is the perfect package. Graphiql can be enabled in express-graphql by setting it to true.

...

app.use('/graphql', graphqlHTTP({

schema: /* The defined schema */,

graphiql: true

}));

...

Apollographql

Apollo community has emerged as one of the top creators of GraphQL tools. Here are some of the tools and their use cases.

Server

graphql-tools — At the base of GraphQL is a schema written using the GraphQL SDL(Schema Definition Language). The schema definition needs to be connected with resolvers that provide the actual implementation of the methods getBooks and createBook(…) to create an executable schema.

graphql-tools is the tool that will enable us to do this. There are some other functionalities for this tool under the hood but so far this stands out.

GraphQL schema

apollo-server — While graphql-tools creates the schema, apollo-server is required to connect it to the server(Express, Connect, Hapi, Koa …). This is a very huge package that I would advice that you don’t install it. The best way is to use it’s variants depending on your server which take the format apollo-server-<variant> e.g apollo-server-express, apollo-server-koa, …

With the executableSchema, we can now connect to an express server as follows.

With the above tools from apollographql, we can create a fully functional server-side application using GraphQL.

Client

The Apollo community also provides some tools to use on the client side with different frameworks, libraries or vanilla javascript. The most notable tools are apollo-client and react-apollo.

So what’s the difference between the two tools. From learnapollo:

apollo-client - the core package that exposes the vanilla JS Apollo Client which provides the core functionality.

- the core package that exposes the vanilla JS Apollo Client which provides the core functionality. react-apollo - the React integration exposes the ApolloProvider that can be used to wrap other React components, allowing them to send queries and mutations

From apollo-client repo:

From Apollo Client is a fully-featured caching GraphQL client with integrations for React, Angular, and more.

So far an integration of react is available in form of react-apollo. Some other frameworks integrations are still under development.

For any JS especially React dev, the following use case should be pretty straight forward.

Unfortunately for Redux fans, Apollo 1.x has an implementation for Redux but it was dropped in Apollo 2.0 in favour of apollo-cache-inmemory. (See here why). createReactInterface has also been replaced by HttpLink from apollo-link-http.

The inmemory cache can be used as follows:

...

import { InMemoryCache } from 'apollo-cache-inmemory';

import { ApolloClient } from 'apollo-client'; // Create client that connects to the server

const client = new ApolloClient({

link: HttpLink({ uri: 'https://api.graph.cool/simple/v1/__PROJECT_ID__'}),

cache: new InMemoryCache()

})

graphql-tag — This is used together with react-apollo to parse GraphQL queries on the client side. The example below , a snippet from apollographql shows how to connect a functional component to GraphQL using functions from react-apollo and graphql-tag. Pretty similar to connect in Redux.

import { graphql } from 'react-apollo';

import gql from 'graphql-tag';



function TodoApp({ data: { todos, refetch } }) {

return (

<div>

<button onClick={() => refetch()}>Refresh</button>

<ul>{todos && todos.map(todo => <li key={todo.id}>{todo.text}</li>)}</ul>

</div>

);

}



export default graphql(gql`

query TodoAppQuery {

todos {

id

text

}

}

`)(TodoApp);

There are also apollo-ios and apollo-android client-side tools for native mobile app developers.

So far I will touch on those tools from Apollo. A complete tutorial on Apollo tools can be found at learnapollo(Note: Relies on Apollo 1.x).

Graphcool

Graphcool is another cool community pushing forward the GraphQL gospel. They have developed some awesome tools ranging from graphql-framework, graphql-playground, graphql-yoga to the super awesome Prisma. The development has been rapid and at some point, the community was confused about graphcool-framework and Prisma. Here’s a good explanation by Nilan on exactly what they are and what’s their difference.

From my observation, some tools by Graphcool leverage tools from Apollo which I think is a pretty cool when open source communities collaborate.

One other good thing about Graphcool, the provide a free tier service to host graphcool and Prisma applications during development.(Saves some of us poor folks who can’t pay for AWS). So, let’s look at some of these tools in “shallow depth”.

GraphLQL Playground

Most people refer to them as GraphQL IDEs, I prefer GraphQL query editors; query here meaning query, mutation or subscription. If you have played around with GraphQL then you might have interacted with GraphiQL. GraphQL Playground is very similar with some additional features.

Graphcool Framework

The Graphcool Framework is an open-source technology, that provides a GraphQL backend solution based on an opinionated stack. It uses graphcool CLI tool to scaffold, manage and deploy applications. With Graphcool, an API is directly generated on top of our database which we can access directly from client apps. For now, it only supports MySQL but integrations for other databases are in the pipeline. From the npm package, we can easily setup a simple application and deploy it in less than 5 mins.

Prisma

Just like Graphcool Framework, Prisma also exposes a whole database and its methods but with an additional application layer where we can dictate how to use the database methods.

Prisma Binding

Prisma Binding is a very powerful tool. When an application is created using Prisma CLI, it exposes a database API but on top of that, it creates a GraphQL server using graphql-yoga which is exposes another API on its own. What Prisma Binding does, is enable us to combine the two API so that with our server API, we can create our own methods and call the database API.

The question is why? When we create databases under normal circustastances(REST), we don’t expose all fields/data about records to the clients, we filter out some data which maybe sensitive like passwords. With Prisma Binding, we get this ability to define our own types that filter out what we don’t want from the CRUD API. Now clients cannot access our CRUD API directly and we can define our own auth system and include all those complicated features we like.

GraphQL Yoga

This tool is build on top of apollo-server , graphql-subscriptions and some other tools. With yoga, we can easily setup a GraphQL server that has subscriptions also setup already.

FormidableLabs

While doing some research, I stumbled on a tool by Apollo: apollo-boost. I have not had a chance to use it but here’s a good and promising article about the tool. So why is this apollo-boost under Formidable? If you read that article you might have known why it was developed.

FormidableLabs has developed urql, GraphQL client, exposed as a set of ReactJS components. Just going through the README on the urql repo shows something very promising; If you managed react-apollo then this should be a bit easier.

There are many more tools out there like Graphene that provide an implementation for Python and JS. Feel free to explore and use them.

For now If you are beginning a GraphQL application, I would advice the following formats.

Server

Setup an app with one of the apollo-server variants and configure subscriptions on your own using PubSub.

Easily setup using graphql-yoga and get moving with already setup subscriptions.

graphql(graphqljs) + express-graphql

Client

For react applications apollo-client + react-apollo works fine.

React + urql.

As for Graphcool Framework and Prisma, I will advice watching them out and keep tabs on the updates until everything balances out. They are tools undergoing development with rapid changes. Some links from their docs are still broken dues to the changes but that should not discourage anyone from using them.