GraphQL Client Libraries for Frontend Architecture

When building applications that rely on GraphQL, choosing the right client library shapes your data flow, caching strategy, and overall code maintenance. @urql/core, apollo-client, and graphql-request represent three distinct approaches to solving this problem. Let's break down how they handle common engineering challenges.

🗄️ Caching and State Management

@urql/core uses a modular exchange system to handle caching.

• You configure a cacheExchange to store results.
• It supports normalized caching but keeps it optional and configurable.

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

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

apollo-client (Legacy) includes a powerful normalized cache out of the box.

• It automatically updates UI when cache data changes.
• Note: This package is deprecated; modern projects should use @apollo/client.

// apollo-client: Legacy cache setup
import ApolloClient from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';

const client = new ApolloClient({
  uri: '/graphql',
  cache: new InMemoryCache()
});

graphql-request does not include caching or state management.

• It sends raw HTTP requests and returns promises.
• You must pair it with external tools (like React Query) for caching.

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

const query = `{ user { id } }`;
const data = await request('/graphql', query);
// Manual caching required elsewhere

⚙️ Setup and Configuration Complexity

@urql/core balances flexibility with simplicity.

• You define exchanges to handle logging, caching, and fetching.
• Setup is straightforward but allows deep customization.

// @urql/core: Custom exchange setup
import { createClient, fetchExchange } from '@urql/core';

const client = createClient({
  url: '/graphql',
  exchanges: [fetchExchange]
});

apollo-client requires more initial configuration.

• You need to set up links, cache, and often context providers.
• More boilerplate is needed for advanced features.

// apollo-client: Legacy link setup
import { createHttpLink } from 'apollo-link-http';
import ApolloClient from 'apollo-client';

const link = createHttpLink({ uri: '/graphql' });
const client = new ApolloClient({ link });

graphql-request has the lowest setup barrier.

• Instantiate a client or use the standalone request function.
• No complex providers or context needed.

// graphql-request: Minimal setup
import { GraphQLClient } from 'graphql-request';

const client = new GraphQLClient('/graphql');
const data = await client.request(query);

🛑 Deprecation and Maintenance Status

@urql/core is actively maintained.

• It serves as the core for framework-specific packages like @urql/react.
• Safe for long-term use in production.

// @urql/core: Current standard usage
import { createClient } from '@urql/core';
// Actively developed by Formidable

apollo-client is officially deprecated.

• It receives no new features or security updates.
• Using it in new projects introduces technical debt.

// apollo-client: Deprecated warning
// npm install apollo-client // DO NOT USE
// Use @apollo/client instead

graphql-request is actively maintained.

• It focuses on stability and minimalism.
• Safe for scripts and simple clients.

// graphql-request: Current standard usage
import { request } from 'graphql-request';
// Actively maintained community project

🔒 Type Safety and Code Generation

All three tools work well with GraphQL code generators like graphql-code-generator, but integration differs.

@urql/core supports typed clients via plugins.

• You can generate typed hooks or client wrappers.
• Type safety is strong when configured.

// @urql/core: Typed query
import { typedClient } from './generated';
const result = await typedClient.query(UserQuery);

apollo-client supports TypeScript natively.

• Generics on hooks provide type safety.
• Legacy package has older type definitions.

// apollo-client: Typed query (Legacy)
import { gql } from 'apollo-client';
const query = gql`{ user { id } }`;

graphql-request generates typed SDKs easily.

• The codegen tool can output a ready-to-use SDK.
• Very clean developer experience for types.

// graphql-request: Generated SDK
import { getSdk } from './generated';
const sdk = getSdk(client);
const { user } = await sdk.GetUser();

🤝 Similarities: Shared Ground

While the differences are clear, these libraries share some core capabilities.

1. 🌐 GraphQL Protocol Support

• All three send valid GraphQL queries and mutations.
• Support headers, variables, and context.

// All support variables
const variables = { id: 1 };
// urql: client.query(query, variables)
// apollo: client.query({ query, variables })
// request: request(url, query, variables)

2. 🔌 Extensibility

• All allow custom headers or middleware logic.
• You can intercept requests before they send.

// All support headers
// urql: context in operation
// apollo: link middleware
// graphql-request: headers in constructor

3. 📦 Ecosystem Integration

• All work with Node.js and browsers.
• Compatible with major build tools (Vite, Webpack).

// All import via npm
import { ... } from 'package-name';

📊 Summary: Key Differences

💡 The Big Picture

@urql/core is like a customizable engine 🏎️—great for teams that want control over how data flows without being locked into a specific framework. It shines when you need to build custom bindings or want a lighter alternative to Apollo.

apollo-client is like a legacy enterprise system 🏢—powerful but outdated. Do not use it for new work. If you need its feature set, migrate to @apollo/client.

graphql-request is like a lightweight utility knife 🔪—perfect for simple tasks, server-side scripts, or when you want to handle caching yourself. It removes magic and gives you raw control.

Final Thought: For new frontend applications, avoid apollo-client entirely. Choose @urql/core if you want a balanced, modern client with caching. Choose graphql-request if you prefer minimalism and plan to manage state elsewhere.