GraphQL is a query language and runtime for APIs. It enables clients to specify queries and allows servers to validate data against a strongly typed schema.
Unlike REST APIs, GraphQL uses a single endpoint for all operations. GraphQL-based servers can only communicate via GraphQL queries. For simple projects, it’s feasible to use a REST client, like Axios or fetch, to send GraphQL queries. However, for larger, more complex projects that have advanced requirements, a GraphQL client is needed.
GraphQL clients make communication easier by abstracting away small details and implementing additional features, some of which include caching, query batching and deduplication, and static typing of GraphQL query results.
In this guide, we’ll compare the following five GraphQL clients and evaluate each in terms of functionality, community support, and size.
graphql-request
Apollo Client
urql
Relay
graphql-hooks
Let’s get started!
graphql-request is a very minimal GraphQL client. The library is isomorphic, meaning it supports both Node.js and browsers. It comes with first-class TypeScript support, so typings never become outdated. The library weighs just 5.2kB.
The graphql-request GitHub repository activity is healthy with 3.7 million stars. On npm, graphql-request is downloaded more than 1.3 million times weekly, so you shouldn’t have any trouble finding help online!
graphql-request is simple to use, and there’s almost no learning curve:
import { GraphQLClient, gql } from ‘graphql-request’
const query = gql`{
hero {
name
}
}`
const client = new GraphQLClient(‘<graphql-endpoint>’)
const data = await client.request(query)
Works on both server and client
Support for TypeScript
Very lightweight
Strong community support
No support for advanced features like query caching and deduplication
No support for GraphQL subscriptions
Apollo Client is an advanced GraphQL client only for frontends. It includes features for caching, query batching, query deduplication, and pagination. It can also be used to manage local state in place of a Redux store. The base library weighs about 33.9kB.
Apollo Client is written in TypeScript, so TypeScript support is excellent. It has integrations for popular frameworks and libraries like React, Next.js, Angular, and Vue.js. Apollo Client also has a Chrome extension for inspecting and making queries.
Apollo Client is updated at least once a month. It is downloaded more than one million times weekly on npm and has over 16k stars and 2k forks on GitHub.
Robust and comprehensive
Satisfies most use cases
Support for TypeScript
Integrations for popular UI libraries and frameworks
Integrations for iOS and Android
Chrome extension for inspecting queries
In addition to activity on npm and GitHub, Apollo Client enjoys online support in the form of a dedicated community forum. It also has commercial backing from Apollo GraphQL Inc.
Steep learning curve for advanced features like query batching, persisted queries, and caching
urql aims to be both easy to use and extensible through built-in caching mechanisms with sensible defaults. urql has clients for Preact, React, and Svelte, in addition to a core library for use with Node.js on the server side.
urql’s bundle size is very small, weighing only 7.1kB. It is one of few GraphQL libraries with built-in offline support.
The urql library is downloaded at least 95k times a week on npm. On GitHub, urql has received over 6k stars.
urql is robust, but it is still easy to use for basic functionality:
const QUERY = `
query Test($id: ID!) {
getUser(id: $id) {
id
name
}
}
`;
const result = client.readQuery(QUERY, { id: ‘test’ });
Clear and readable documentation
Support for Typescript
Integrations for many popular UI libraries and frameworks
Browser extension for inspecting queries
Built-in offline support
Small bundle size
No support for Angular
No support for query batching
No built-in pagination support
Small community in comparison to other GraphQL clients
Relay is a highly performant and scalable GraphQL client developed by Facebook.
As you might guess, Relay was built with React in mind. As such, it takes a component-based approach to data fetching. Relay is highly opinionated and is strictly for use with React frontends. Relay has a bundle size of 47.1 kB.
Relay is downloaded at least 94k times a week on npm. Relay has received over 15k stars and over 1.5k forks on GitHub.
Advanced features for caching, query deduplication, pagination, and local state management
Tightly integrated with React, giving it higher order components and hooks
Trusted by top companies like Facebook and Quora
Only supports React
Very opinionated because of its rigid conventions
Steeper learning curve in comparison to other clients
Documentation is difficult to parse
Relay client can only communicate with a Relay compatible GraphQL server
By enforcing a rigid convention, Relay offers less room for mistakes, which can be both positive and negative.
graphql-hooks is a very small GraphQL client for React. Despite its tiny size, graphql-hooks features first-class support for caching, pagination, authentication, file uploads, and server-side rendering. Its bundle size weighs only 3.6kB.
The client provides the useQuery, useMutation, and useSubscription React Hooks for handling queries, mutations, and subscriptions, respectively. The official documentation includes a guide to migrate from Apollo Client.
graphql-hooks is downloaded 6k times monthly on npm. It has 1.5k stars on GitHub.
Support for TypeScript
Support for advanced features like caching, pagination, and SSR out of the box
Very small size
API has a small surface area
Only supports React
Small community
The table below summarizes the information discussed above.
Community
support
Learning
curve
Size
Typescript typings
Pagination, query caching,
batching, and deduplication
Isomorphic support
Integrations with UI libraries and frameworks
graphql-request
Great
Low
5.2 kB
Yes
No
Yes
No
Apollo Client
Great
Medium
33.9 kB
Yes
Yes
Client only
React, Next.js, Angular, Svelte, Ember, web components,
and Vue
urql
Fair
Low
7.1 kB
Yes
Batching not supported
Yes
React, Svelte, and Vue
Relay
Fair
High
47.1 kB
No
Yes
Client only
React only
graphql-hooks
Low
Low
3.6 kB
Yes
Batching and deduplication not supported
Clients only
React only
Choosing the best client for your project will depend heavily on your individual goals and needs. You can, however, use the guidelines listed below as a starting point:
graphql-request: server-side or frontend project with simple requirements
Apollo Client: advanced frontend project
urql: advanced features like caching that runs server side
Relay: project is React-based, requires advanced features, and includes many components
graphql-hooks: project is React-based and doesn’t require advanced features
GraphQL clients make interfacing with GraphQL APIs much easier than calling them directly.
Every GraphQL client has its pros and cons. Choosing a client that offers the best features for your use case is paramount to a smooth development experience. Selecting the optimal client will depend on your unique project, and there might not always be an obvious answer. Hopefully, the information in this article will help you to get started!
I hope you enjoyed this article! If you liked my writing and want to read more, follow me on Medium.
The post 5 GraphQL clients for JavaScript and Node.js appeared first on LogRocket Blog.