GraphQL Clients: Apollo vs graphql-request vs urql

These three libraries solve the same problem — fetching GraphQL data — but they approach it differently. apollo-client (now @apollo/client) is the heavy-duty option. graphql-request is the minimalist tool. urql sits in the middle with a focus on modularity. Let's compare how they handle real-world tasks.

⚠️ Package Status and Maintenance

apollo-client is deprecated.
The original apollo-client package is no longer maintained. The team moved to @apollo/client starting with version 3. You should not install apollo-client in new projects.

// apollo-client: Deprecated
// Do not use: import { ApolloClient } from 'apollo-client';

// Modern equivalent: @apollo/client
import { ApolloClient } from '@apollo/client';

graphql-request is stable and minimal.
It has no major framework dependencies. It works in Node.js, browsers, and serverless functions without extra setup.

// graphql-request: Stable
import { request } from 'graphql-request';

const data = await request(endpoint, query, variables);

urql is actively maintained.
It is built by Formidable and focuses on a customizable exchange system. It receives regular updates for React and other frameworks.

// urql: Active
import { createClient } from '@urql/core';

const client = createClient({ url: endpoint });

📦 Caching and State Management

apollo-client has a normalized cache built-in.
It stores data by ID automatically. This prevents duplicate data and updates UI across components when data changes.

// apollo-client: Normalized cache
import { InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  cache: new InMemoryCache()
});

graphql-request has no cache.
You fetch data every time. You must manage storage yourself using React state or external tools like SWR or React Query.

// graphql-request: No cache
import { request } from 'graphql-request';

// Manual caching required
const data = await request(endpoint, query);

urql has a configurable cache.
It includes a cache but lets you swap it out. The default cache handles normalized data similar to Apollo but with less setup.

// urql: Configurable cache
import { createClient, cacheExchange } from '@urql/core';

const client = createClient({
  url: endpoint,
  exchanges: [cacheExchange]
});

🔌 Setup and Configuration

apollo-client requires a provider wrapper.
You must wrap your app with ApolloProvider. It needs significant boilerplate to set up links and cache.

// apollo-client: Provider setup
import { ApolloProvider } from '@apollo/client';

function App() {
  return (
    <ApolloProvider client={client}>
      <Home />
    </ApolloProvider>
  );
}

graphql-request needs no provider.
You call functions directly. There is no context or global state required. This makes it easy to test and use outside React.

// graphql-request: No provider
async function loadData() {
  const data = await request(endpoint, query);
  return data;
}

urql requires a provider but is lighter.
You wrap your app with Provider from urql. The client setup is simpler than Apollo with fewer required options.

// urql: Lightweight provider
import { Provider } from 'urql';

function App() {
  return (
    <Provider value={client}>
      <Home />
    </Provider>
  );
}

🔄 Handling Mutations and Errors

apollo-client uses dedicated hooks.
It provides useMutation with built-in loading and error states. It handles optimistic updates easily.

// apollo-client: useMutation
import { useMutation } from '@apollo/client';

const [addTodo] = useMutation(ADD_TODO);

function Add() {
  return <button onClick={() => addTodo()} />;
}

graphql-request treats mutations like queries.
You send a mutation string using the same request function. You handle loading and errors manually with try/catch.

// graphql-request: Manual handling
try {
  await request(endpoint, mutation, variables);
} catch (error) {
  console.error(error);
}

urql uses a dedicated hook for mutations.
It provides useMutation similar to Apollo. It returns a tuple with the execute function and result state.

// urql: useMutation
import { useMutation } from 'urql';

const [result, executeMutation] = useMutation(ADD_TODO);

function Add() {
  return <button onClick={() => executeMutation()} />;
}

🧩 Extensibility and Middleware

apollo-client uses Links.
You chain link objects to handle auth, logging, or batching. It is powerful but can be complex to configure.

// apollo-client: Link chain
import { HttpLink } from '@apollo/client';

const link = new HttpLink({ uri: endpoint });

graphql-request uses interceptors.
You can add headers or modify requests before sending. It is simple but less flexible than a full middleware chain.

// graphql-request: Interceptors
const client = new GraphQLClient(endpoint, {
  requestMiddleware: (request) => {
    request.headers['Authorization'] = 'token';
    return request;
  }
});

urql uses Exchanges.
You build a pipeline of functions that process operations. It is very flexible and easier to debug than Apollo Links.

// urql: Exchange pipeline
import { fetchExchange } from '@urql/core';

const client = createClient({
  exchanges: [cacheExchange, fetchExchange]
});

📊 Summary: Key Differences

💡 Final Recommendation

apollo-client should not be used directly.
If you need the Apollo feature set, install @apollo/client instead. It is best for large enterprise apps where caching and state consistency are critical.

graphql-request is best for simple tasks.
Use it for server-side scripts, static sites, or when you already use React Query for caching. It keeps your app lean.

urql is best for balanced flexibility.
It offers a great developer experience with less complexity than Apollo. Choose it for modern frontend apps that need caching without the heavy boilerplate.