graphql-request vs @urql/core vs apollo-client
GraphQL Client Libraries Comparison
Search packages..
1 Year
graphql-request@urql/coreapollo-clientSimilar Packages:
What's GraphQL Client Libraries?

GraphQL client libraries are essential tools for interacting with GraphQL APIs. They facilitate the process of sending queries and mutations, managing local state, and handling caching mechanisms. These libraries streamline the integration of GraphQL into applications, providing developers with various features to enhance data fetching and state management. Each library has its unique strengths, catering to different use cases and preferences in application architecture.

Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
graphql-request4,644,5615,971320 kB365 months agoMIT
@urql/core1,923,9628,769322 kB32a month agoMIT
apollo-client406,92719,543-5445 years agoMIT
Feature Comparison: graphql-request vs @urql/core vs apollo-client

Complexity and Size

  • graphql-request:

    graphql-request is extremely lightweight and has a minimal API, making it easy to use for simple GraphQL queries without the need for a complex setup.

  • @urql/core:

    @urql/core is designed to be lightweight and modular, allowing developers to include only the features they need. This makes it easy to integrate into existing projects without adding unnecessary bloat.

  • apollo-client:

    Apollo Client is a more comprehensive library that comes with a larger bundle size due to its extensive features, including built-in caching and state management. This can be beneficial for complex applications but may be overkill for simpler use cases.

Caching Mechanism

  • graphql-request:

    graphql-request does not include built-in caching capabilities, which means developers need to implement their own caching strategies if needed. This can be beneficial for small projects where caching is not a priority.

  • @urql/core:

    @urql/core offers a customizable caching mechanism that allows developers to define how data is cached and updated. This flexibility can lead to optimized performance based on specific application needs.

  • apollo-client:

    Apollo Client provides a powerful caching system out of the box, which automatically manages data updates and synchronization. It supports normalized caching, making it easier to manage related data across queries.

Integration and Ecosystem

  • graphql-request:

    graphql-request is framework-agnostic and can be used in any JavaScript environment. However, it lacks the extensive ecosystem and tooling that Apollo provides, making it less suitable for larger applications.

  • @urql/core:

    @urql.core integrates well with React and other frameworks, providing hooks and utilities that make it easy to use within component-based architectures. It also supports subscriptions and real-time updates.

  • apollo-client:

    Apollo Client has a rich ecosystem with tools like Apollo Server and Apollo Studio, making it a robust choice for full-stack applications. It also offers excellent support for various frameworks, including React, Angular, and Vue.

Learning Curve

  • graphql-request:

    graphql-request is very easy to learn and use, making it ideal for beginners or those looking to quickly implement GraphQL queries without the complexity of a full client.

  • @urql/core:

    @urql/core has a moderate learning curve, especially for developers familiar with React hooks. Its modular nature allows for gradual learning as features are added to the application.

  • apollo-client:

    Apollo Client has a steeper learning curve due to its extensive features and concepts like caching, local state management, and optimistic UI updates. However, it provides comprehensive documentation and community support.

Flexibility and Customization

  • graphql-request:

    graphql-request is straightforward and minimalistic, which allows for quick integration but offers less flexibility compared to the other two libraries. It is best suited for simple use cases where minimal configuration is needed.

  • @urql/core:

    @urql/core is highly customizable, allowing developers to create tailored solutions for their specific use cases. This flexibility is beneficial for applications with unique data fetching requirements.

  • apollo-client:

    Apollo Client offers a lot of built-in functionality, which can sometimes limit flexibility. However, it provides many configuration options to adapt to various scenarios, making it versatile for different applications.

How to Choose: graphql-request vs @urql/core vs apollo-client
  • graphql-request:

    Choose graphql-request for its simplicity and minimalism if you need a straightforward way to make GraphQL requests without the overhead of a full client. It is perfect for smaller projects or when you want to quickly integrate GraphQL without extensive setup.

  • @urql/core:

    Choose @urql/core if you need a lightweight, flexible client that allows for fine-tuned control over your GraphQL requests and caching strategies. It is particularly suitable for applications that require a customizable approach to data fetching and state management.

  • apollo-client:

    Choose Apollo Client if you are looking for a comprehensive solution that includes advanced features like caching, state management, and integration with the Apollo ecosystem. It is ideal for larger applications that benefit from a robust set of tools and a strong community support.

Similar Npm Packages to graphql-request

graphql-request is a simple and lightweight GraphQL client for making requests to a GraphQL API. It provides an easy-to-use API for sending queries and mutations, making it a great choice for developers who want to interact with GraphQL without the overhead of more complex libraries. With graphql-request, you can quickly set up your GraphQL operations and manage responses in a straightforward manner.

While graphql-request is a solid option for GraphQL data fetching, there are other libraries that offer additional features and capabilities. Here are a couple of alternatives:

  • apollo-client is a comprehensive GraphQL client that provides a robust set of features for managing GraphQL data in your applications. It includes built-in support for caching, optimistic UI updates, and subscriptions, making it a powerful choice for complex applications that require advanced data management. If you need a full-featured solution that integrates seamlessly with React and offers extensive tooling for working with GraphQL, apollo-client is an excellent option.
  • urql is a highly customizable and flexible GraphQL client that focuses on simplicity and performance. It offers a minimalistic API while providing powerful features such as caching, real-time updates, and support for GraphQL subscriptions. urql is designed to be modular, allowing you to choose only the features you need for your application. If you are looking for a lightweight yet powerful GraphQL client that can be tailored to your specific requirements, urql is a great choice.

To see how graphql-request compares with apollo-client and urql, check out the comparison: Comparing apollo-client vs graphql-request vs urql.

Similar Npm Packages to @urql/core

@urql/core is a highly customizable and efficient GraphQL client for React applications. It provides a simple API for querying and mutating data, while also offering advanced features such as caching, real-time updates, and support for subscriptions. Designed with performance in mind, @urql/core allows developers to build scalable applications that can efficiently manage GraphQL data. Its modular architecture enables users to extend functionality through various plugins, making it a flexible choice for a wide range of projects.

While @urql/core is a powerful option for managing GraphQL data, there are other libraries in the ecosystem that serve similar purposes. Here are a couple of notable alternatives:

  • apollo-client is one of the most popular GraphQL clients available. It provides a comprehensive solution for managing GraphQL data, including features like caching, optimistic UI updates, and support for local state management. apollo-client is well-suited for applications that require a robust and feature-rich GraphQL solution. Its extensive ecosystem, including tools for server-side rendering and integration with various frameworks, makes it a go-to choice for many developers.

  • graphql-request is a minimalistic GraphQL client that focuses on simplicity and ease of use. It allows developers to send GraphQL queries and mutations with a straightforward API. While it lacks some of the advanced features found in @urql/core and apollo-client, graphql-request is an excellent choice for smaller projects or applications that require a lightweight solution for making GraphQL requests without the overhead of a more complex client.

To see how @urql/core compares with apollo-client and graphql-request, check out the comparison: Comparing @urql/core vs apollo-client vs graphql-request.

Similar Npm Packages to apollo-client

apollo-client is a powerful and flexible GraphQL client for managing data in JavaScript applications, particularly those built with React. It allows developers to easily fetch, cache, and manage GraphQL data, providing a seamless experience for integrating GraphQL APIs into applications. While Apollo Client is widely used and feature-rich, there are several alternatives that cater to different needs and preferences. Here are a few notable alternatives:

  • graphql-request is a minimalistic GraphQL client that focuses on simplicity and ease of use. It provides a straightforward API for making GraphQL queries and mutations without the overhead of a larger library like Apollo Client. If you are looking for a lightweight solution for making GraphQL requests without the need for advanced features like caching or state management, graphql-request is an excellent choice.

  • react-apollo is a legacy library that integrates Apollo Client with React. It provides React components and hooks for managing GraphQL data in a React application. While it was widely used in the past, it has since been succeeded by Apollo Client's new hooks API, which offers a more modern and streamlined approach to working with GraphQL in React. If you are maintaining an older codebase, you might encounter react-apollo, but for new projects, it's recommended to use the latest Apollo Client features directly.

  • urql is a highly customizable and flexible GraphQL client that focuses on simplicity and performance. It offers a modular architecture, allowing developers to choose only the features they need. urql is particularly well-suited for applications that require a lightweight client with a focus on performance and flexibility. If you prefer a client that can be tailored to your specific needs without unnecessary complexity, urql is a great option.

To see how Apollo Client compares with graphql-request, react-apollo, and urql, check out the comparison: Comparing apollo-client vs graphql-request vs react-apollo vs urql.

README for graphql-request

graphql-request

Minimal GraphQL client supporting Node and browsers for scripts or simple apps.

GitHub Action npm version

Highlights

  • Most simple & lightweight GraphQL client
  • Promise-based API (works with async / await)
  • Pure ESM package
  • First class TypeScript support
    • Including TypedDocumentNode
  • Isomorphic (works in both Node and Browsers)

Install

npm add graphql-request graphql

TypeScript Setup

This package uses package.exports. Therefore if you are a TypeScript user you must:

  1. have your tsconfig.json moduleResolution set to "bundler" or "node16"/"nodenext".
  2. Have your package.json type set to "module".

Quick Start

Send a GraphQL document using a static request function:

import { gql, request } from 'graphql-request'

const document = gql`
  {
    company {
      ceo
    }
  }
`
await request('https://api.spacex.land/graphql/', document)

The function can be passed a configuration object for more complex cases:

await request({
  url,
  document,
  variables,
  requestHeaders,
})

A class is available for constructing your own instances:

import { gql, GraphQLClient } from 'graphql-request'

const document = gql`
  {
    company {
      ceo
    }
  }
`
const endpoint = 'https://api.spacex.land/graphql/'
const client = new GraphQLClient(endpoint)
await client.request(document)

Examples

Node Version Support

We only (officially) support versions of Nodejs of the following status:

  • Current
  • LTS
  • Maintenance and end of life not yet reached

So for example on Oct 24 2023 that would mean these versions: 18, 20, 21.

Any issue that exists solely for an unsupported version of Nodejs will be rejected (not worked on).

Reference

⚠️ This reference is incomplete. Check out the examples for more reference material.

Configuration

ErrorPolicy

By default GraphQLClient will throw when an error is received. However, sometimes you still want to resolve the (partial) data you received. You can define errorPolicy in the GraphQLClient constructor.

const client = new GraphQLClient(endpoint, { errorPolicy: 'all' })
None (default)

Allow no errors at all. If you receive a GraphQL error the client will throw.

Ignore

Ignore incoming errors and resolve like no errors occurred

All

Return both the errors and data, only works with rawRequest.

IgnoreOperationName

OperationName has been introduced to address issues reported here Support operation name, However, on certain occasions this information may not be needed in requests. In such cases, you might consider ignoring operationName to avoid the extraction steps currently performed by a parsing operation when the document is provided in string format.

By default the GraphQLClient tries to extract the operationName from the document. You can define excludeOperationName in the constructor of GraphQLClient to avoid the extraction process if it is not needed. This can be useful if you don't use operationName and want to optimise queries by reducing the amount of computation as much as possible, especially if we are in a context where we are using documents in string format to reduce bundle size.

// example where the operation name is not ignored
const client = new GraphQLClient(endpoint, {
  method: 'POST',
})
// example in which the operation name is ignored
const client = new GraphQLClient(endpoint, {
  method: 'POST',
  excludeOperationName: true,
})

Knowledge Base

Why was the file upload feature taken away? Will it return?

In this issue we decided to make this library more stable and maintainable. In principal the feature is still in scope of this library and will make a return when we find time to do the feature right.

Why do I have to install graphql?

graphql-request uses methods exposed by the graphql package to handle some internal logic. On top of that, for TypeScript users, some types are used from the graphql package to provide better typings.

Do I need to wrap my GraphQL documents inside the gql template exported by graphql-request?

No. It is there for convenience so that you can get the tooling support like automatic formatting and syntax highlighting. You can use gql from graphql-tag if you need it for some reason too.

What sets graphql-request apart from other clients like Apollo, Relay, etc.?

graphql-request is the most minimal and simplest to use GraphQL client. It's perfect for small scripts or simple apps.

Compared to GraphQL clients like Apollo or Relay, graphql-request doesn't have a built-in cache and has no integrations for frontend frameworks. The goal is to keep the package and API as minimal as possible.

Project Stats

Package Installs

NPM Usage Trend of graphql-request

Repo Beats

Alt

npm-compare.com is an independent website designed to help developers choose the most suitable npm packages. We are not affiliated with npm, Inc or npmjs.com, the official website for the npm registry. Please note that npm is a registered trademark of npm, Inc. For more details, please refer to our Terms & Privacy.