# urql-graphql/urql

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/urql-graphql-urql).**

8,959 stars · 476 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/urql-graphql/urql
- Homepage: https://urql.dev
- awesome-repositories: https://awesome-repositories.com/repository/urql-graphql-urql.md

## Topics

`complex-apps` `exchange` `graphql` `graphql-client` `graphql-clients`

## Description

urql is a GraphQL client library designed for fetching and managing data from a GraphQL API. It provides a system for handling GraphQL data fetching, state management, and integration with React components.

The library is distinguished by a middleware pipeline architecture that allows the request-response flow to be modified through swappable exchanges. This enables the customization of the data layer, including the addition of custom business logic, request deduplication, and specialized fetching behaviors.

The project covers a broad range of capabilities, including normalized caching to ensure data consistency, the execution of mutations, and server-side rendering hydration to prevent duplicate requests during client-side restoration. It also supports integration with React Suspense to delegate loading states to declarative UI handlers.

## Tags

### Web Development

- [GraphQL Data Management Libraries](https://awesome-repositories.com/f/web-development/graphql-data-management-libraries.md) — Acts as a comprehensive library for fetching, caching, and synchronizing GraphQL data between servers and clients.
- [GraphQL Client Middleware](https://awesome-repositories.com/f/web-development/backend-development/web-frameworks/node-js-server-frameworks/graphql-client-middleware.md) — Provides a middleware-based architecture for customizing the GraphQL client request-response pipeline.
- [React GraphQL Hooks](https://awesome-repositories.com/f/web-development/react-graphql-hooks.md) — Provides a set of hooks and utilities to connect GraphQL operations to React components, including support for Suspense.
- [Data Fetching & Caching](https://awesome-repositories.com/f/web-development/data-fetching-caching.md) — Offers a customizable data layer allowing developers to swap fetching, caching, and subscription mechanisms. ([source](https://urql.dev))
- [Request Orchestration](https://awesome-repositories.com/f/web-development/request-orchestration.md) — Orchestrates the full lifecycle of GraphQL operations from dispatch through middleware to the final result.
- [Server-Side Hydration Utilities](https://awesome-repositories.com/f/web-development/server-side-hydration-utilities.md) — Provides utilities for transferring server-prefetched GraphQL data to client-side caches during hydration.
- [Server-Side Rendering](https://awesome-repositories.com/f/web-development/server-side-rendering.md) — Facilitates server-side rendering by capturing data results for client-side hydration. ([source](https://cdn.jsdelivr.net/gh/urql-graphql/urql@main/README.md))
- [State Hydration](https://awesome-repositories.com/f/web-development/server-side-rendering/state-hydration.md) — Implements server-side data pre-fetching and client-side state hydration to prevent duplicate requests during page load.
- [Suspense Integrations](https://awesome-repositories.com/f/web-development/suspense-integrations.md) — Integrates with React Suspense to delegate loading states to declarative UI handlers. ([source](https://cdn.jsdelivr.net/gh/urql-graphql/urql@main/README.md))

### Data & Databases

- [Query Result Caching](https://awesome-repositories.com/f/data-databases/data-engineering-infrastructure/caching-performance/caching-strategies/query-result-caching.md) — Manages query result caching using both document-based and normalized storage strategies. ([source](https://cdn.jsdelivr.net/gh/urql-graphql/urql@main/README.md))
- [Operation Execution](https://awesome-repositories.com/f/data-databases/graphql-integrations/operation-execution.md) — Provides the mechanism to send and execute GraphQL mutations to modify remote data. ([source](https://cdn.jsdelivr.net/gh/urql-graphql/urql@main/README.md))
- [GraphQL Normalized Caches](https://awesome-repositories.com/f/data-databases/normalized-data-caching/graphql-normalized-caches.md) — Ships a normalized cache that flattens nested GraphQL responses to ensure data consistency across the application.
- [GraphQL Result Caches](https://awesome-repositories.com/f/data-databases/data-processing-pipelines/data-processing/result-caching/graphql-result-caches.md) — Implements a document-based caching mechanism specifically for GraphQL query results.

### Software Engineering & Architecture

- [Pipeline Extenders](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/extensibility/plugin-architectures/developer-authoring-interfaces/custom-module-implementations/module-functionality-extenders/pipeline-extenders.md) — Supports adding middleware extensions to the request pipeline for deduplication, subscriptions, and custom logic. ([source](https://cdn.jsdelivr.net/gh/urql-graphql/urql@main/README.md))
- [Composable Middleware Pipelines](https://awesome-repositories.com/f/software-engineering-architecture/request-interception-middleware/composable-middleware-pipelines.md) — Provides a composable middleware pipeline using exchanges to intercept and modify the GraphQL request-response flow.
- [Serialization-to-Hydration Pipelines](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/reactive-messaging/pipeline-processing-architectures/two-stage-parsing/serialization-to-hydration-pipelines.md) — Implements serialization on the server and hydration on the client to prevent duplicate GraphQL network requests.

### User Interface & Experience

- [GraphQL Data Fetching](https://awesome-repositories.com/f/user-interface-experience/content-rendering-components/server-side-data-fetching/graphql-data-fetching.md) — Enables retrieving data from GraphQL APIs while managing loading and error states. ([source](https://cdn.jsdelivr.net/gh/urql-graphql/urql@main/README.md))
- [Suspenseful Data Loading](https://awesome-repositories.com/f/user-interface-experience/asynchronous-data-fetching/suspenseful-data-loading.md) — Supports suspending component rendering until GraphQL data promises resolve via a specialized exchange.