[001.2] Implementation overview and tooling

A brief look at libraries and tools to help you build GraphQL applications

Subscribe now

Implementation overview and tooling [01.22.2019]

In the last lesson, we saw that GraphQL should be considered from both the server side and the client side. What libraries are available to help with each use case? What other tools can we use to make our development lives easier? Let’s have a look at some GraphQL implementation details.

GraphQL on the Server

Using GraphQL on the server typically means using GraphQL as an interface to your application. Imagine you have an existing business logic layer and you want to expose a GraphQL API. You just need to create a schema and define resolvers which will interact with the business logic layer. That means we just need to focus on the types and the resolvers.

We can use GraphQL on the server in different ways. There are GraphQL implementations in a lot of different languages. Let's take a look at some of these implementations.

JavaScript

GraphQL backends are very frequently written in JavaScript.

GraphQL Yoga

GraphQL Yoga is probably the best way to do GraphQL on the back-end with JavaScript. It is a mix of best practices and some libraries that help with performance, type creation, subscriptions, tracing and other features. It is also extensible if you're using Express. GraphQL Yoga is like create-react-app for React developers, but here it's for creating GraphQL apps on the server.

Yoga has a hosted demo available to play around with. It hosts GraphQL Playground pre-configured to talk to the demo backend.

You can also use GraphQL Yoga with Prisma. Prisma takes the place of your ORM, and has built-in support for GraphQL to easily add an API atop your data layer.

Remember, if you don't want to use GraphQL Yoga, you can still use Express GraphQL - it’s just the Express server with some GraphQL libraries.

Apollo Server

Apollo Server is the library we will be using to build our JavaScript server implementation. It's a simple implementation that makes it easy to get up and running with Apollo. Apollo Server is a library to create GraphQL applications; and even GraphQL-Yoga uses Apollo Server under the hood!

Serverless

You can also use GraphQL when building serverless applications. The Apollo community maintains Apollo Server with Lambda to make this easier.

Elixir

If you’re building a GraphQL backend in Elixir, you should use Absinthe.

Absinthe

Absinthe is the best GraphQL implementation for Elixir. It is easy to integrate with the Ecto database wrapper to avoid n+1 queries, and it has support for Phoenix Channels to manage subscriptions and send queries without HTTP overhead.

Other Languages

If you’re using another language, GraphQL.org has a great list of client libraries.

At a glance

There are many implementations of GraphQL on the server side. It’s very easy to build a GraphQL server. You use whatever language you want and implement your types, resolvers, queries, mutations, and subscriptions.

GraphQL on the Client

Once you have a GraphQL server up and running, you’ll probably want to talk to it from a client. There are a host of client libraries available, but we’ll focus on the ones we’re using in this series.

JavaScript

Apollo Client is the most feature-rich JavaScript GraphQL client available. It supports intelligent caching, optimistic operations, and is extremely well-factored. We use it from React Native directly, and for our Vue projects we use vue-apollo which uses apollo-client under the hood.

@absinthe/socket is an npm package for talking directly to the Absinthe websocket server. We use it from Elm, and it provides subscriptions as well as a websocket transport for queries and mutations.

Flutter

If you’re building Flutter applications, graphql_flutter is a Dart GraphQL client with Flutter components that aims to reproduce Apollo Client for the Dart ecosystem. We also built a package to interact with Absinthe sockets from Dart.

Tooling

GraphQL has a rich ecosystem of tools to help you in a variety of situations. Here are some of our favorites.

Type generation

GraphQL Code generator generates code from a GraphQL schema. You can use it to build TypeScript types for the server or client, or even React Apollo components. It’s a flexible code generation framework. You can write your own generator to do whatever you want with it, but there are lots of existing plugins that are highly useful already.

GraphiQL

GraphiQL is an in-browser IDE for exploring a GraphQL endpoint. You can execute mutations and queries and export documentation.

GraphiQL is also embeddable. For instance, Absinthe embeds a GraphiQL instance that’s pre-wired to talk to your API, which makes getting started that much simpler.

GraphQL Playground

GraphQL Playground is similar to GraphiQL. It allows you to explore a GraphQL server, execute queries and mutations, and read documentation. Those are just table stakes though. It’s made to be a generally useful GraphQL IDE, so it has some nice additional features: you can use tabs to organize queries and mutations, and you can connect with multiple endpoints or just read a local schema. You can also easily share your playground with others, which is rather nice. It can also be used for Subscriptions, which is nice as a lot of competing tools don’t support them.

Additionally, GraphQL Playground has a cross-platform installable binary. We spend a lot of time in it when building applications.

GraphQL Voyager

GraphQL Voyager is a tool that reads a GraphQL Introspection Query and provides a graphical overview of the schema, including queries, mutations and types.

GraphQL Network for chrome

GraphQL Network for Chrome is a Chrome extension that adds a tab to the developer tools to help you debug GraphQL queries.

Apollo Engine

Apollo Engine is a service from the Apollo team. It is “a GraphQL toolkit that enables you to understand, optimize, and control your GraphQL service.” It provides performance insights, error aggregation, request tracing, and caching, among other things.

GraphQLHub

GraphQLHub provides an in-browser interface to query popular public APIs like HackerNews, Reddit, GitHub, and more. It’s a really nice place to get started digging into production GraphQL schemas and get a feel for things.

awesome-graphql

For an up-to-date listing of neat GraphQL related libraries, tools, and articles, you should check out awesome-graphql.

Summary

GraphQL tooling is already a mature space. The community is large, and growing, and new tools pop up regularly. Whatever your needs or preferred language, there are likely well maintained libraries to leverage.

Resources