5 GraphQL clients for JavaScript and Node.js
Tags: graphql, javascript, node, webdev
Published: 2021-07-06 19:17:27

**Written by [Chisimdiri Ejinkeonye](https://blog.logrocket.com/author/chisimdiriejinkeonye/)** ✏️

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()`](https://blog.logrocket.com/axios-or-fetch-api/), 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`](#graphqlrequest)
*   [Apollo Client](#apolloclient)
*   [urql](#urql)
*   [Relay](#relay)
*   [`graphql-hooks`](#graphqlhooks)

Let’s get started!

## `graphql-request`

[`graphql-request`](https://graphql.org/code/) 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](https://bundlephobia.com/package/graphql-request@3.4.0).

### Activity

The `graphql-request` GitHub repository activity is healthy, with [3.7K stars](https://github.com/prisma-labs/graphql-request) at the time of writing. On npm, `graphql-request` is [downloaded more than 1.3 million times](https://www.npmjs.com/package/graphql-request#whats-the-difference-between-graphql-request-apollo-and-relay) weekly at the time of writing, so you shouldn’t have any trouble finding help online!

### Pros

`graphql-request` is simple to use, and there’s almost no learning curve:

```javascript
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

### Cons

*   No support for advanced features like query caching and deduplication
*   No support for GraphQL subscriptions

## Apollo Client

[Apollo Client](https://www.apollographql.com/docs/react/) 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](https://bundlephobia.com/package/@apollo/client@3.3.6).

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](https://chrome.google.com/webstore/detail/apollo-client-devtools/jdkknkkbebbapilgoeccciglkfbmbnfm?utm_source=chrome-ntp-icon) for inspecting and making queries.

### Activity

Apollo Client is updated at least once a month. It is downloaded [more than 1 million times weekly](https://www.npmjs.com/package/apollo-client) on npm and has over [16K stars and 2K forks](https://github.com/apollographql/apollo-client) on GitHub at the time of writing.

### Pros

*   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](https://community.apollographql.com). It also has commercial backing from [Apollo GraphQL Inc.](https://www.apollographql.com)

### Cons

*   Steep learning curve for advanced features like query batching, persisted queries, and caching

## urql

[urql](https://formidable.com/open-source/urql/) aims to be both [easy to use and extensible](https://blog.logrocket.com/why-i-finally-switched-to-urql-from-apollo-client/) 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](https://formidable.com/open-source/urql/docs/comparison/). It is one of few GraphQL libraries with built-in offline support.

### Activity

At the time of writing, the urql library is [downloaded 95K times a week](https://www.npmjs.com/package/urql) on npm, and on GitHub, urql has [received over 6K stars](https://github.com/FormidableLabs/urql).

### Pros

urql is robust, but it is still easy to use for basic functionality:

```javascript
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

### Cons

*   No support for Angular
*   No support for query batching
*   No built-in pagination support
*   Small community in comparison to other GraphQL clients

## Relay

[Relay](https://relay.dev/) 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](https://bundlephobia.com/package/react-relay@11.0.2).

### Activity

At the time of writing, Relay is [downloaded at least 94K times](https://www.npmjs.com/package/react-relay) a week on npm and has received [over 15K stars and over 1.5K forks](https://github.com/facebook/relay) on GitHub.

### Pros

*   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

### Cons

*   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](https://blog.logrocket.com/making-a-graphql-server-compatible-with-relay/) GraphQL server

By enforcing a rigid convention, Relay offers less room for mistakes, which can be both positive and negative.

## `graphql-hooks`

[`graphql-hooks`](https://www.nearform.com/blog/introducing-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](https://bundlephobia.com/package/graphql-hooks@5.2.0).

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](https://www.apollographql.com/docs/react/migrating/hooks-migration/).

### Activity

`graphql-hooks` is downloaded [6K times monthly on npm](https://www.npmjs.com/package/graphql-hooks) to go along with [1.5K stars on GitHub](https://github.com/nearform/graphql-hooks).

### Pros

*   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

### Cons

*   Only supports React
*   Small community

## Choosing the right GraphQL client for your project

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                   | Client 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

## Conclusion

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!

---

## Monitor failed and slow GraphQL requests in production

While GraphQL has some features for debugging requests and responses, making sure GraphQL reliably serves resources to your production app is where things get tougher. If you’re interested in ensuring network requests to the backend or third party services are successful, [try LogRocket] (https://logrocket.com/signup).

[![LogRocket Dashboard Free Trial Banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dbqi8ncnli9u7o0k36qt.png)](https://logrocket.com/signup) [![LogRocket Dashboard Free Trial Banner] (https://blog.logrocket.com/wp-content/uploads/2017/03/1d0cd-1s_rmyo6nbrasp-xtvbaxfg.png)](https://logrocket.com/signup)

[LogRocket] (https://logrocket.com/signup) is like a DVR for web apps, recording literally everything that happens on your site. Instead of guessing why problems happen, you can aggregate and report on problematic GraphQL requests to quickly understand the root cause. In addition, you can track Apollo client state and inspect GraphQL queries' key-value pairs.

LogRocket instruments your app to record baseline performance timings such as page load time, time to first byte, slow network requests, and also logs Redux, NgRx, and Vuex actions/state. [Start monitoring for free] (https://logrocket.com/signup).