Built-in Middlewares

Purpose

This subtopic focuses on the aggregation and composition of essential middleware layers bundled with the SWR library. These built-in middlewares provide foundational, commonly used enhancements—such as developer tooling integration and data preloading—that extend the core SWR hooks with zero-config usability. By consolidating these into a single preset, the system simplifies middleware management and ensures consistent application of critical features across SWR instances.

The Built-in Middlewares subtopic addresses the need to offer out-of-the-box middleware functionality that complements SWR’s extensibility without requiring users to manually compose or configure each middleware. It strikes a balance between flexibility and convenience by grouping proven, stable middlewares while still allowing additional custom middleware layers if desired.

Functionality

The built-in middleware preset is essentially a curated collection of middleware functions that are composed and applied in sequence to SWR hooks. Two main middleware components are currently included:

• Devtools Middleware: Integrates SWR with developer tools, enabling inspection and debugging of data fetching states, cache mutations, and revalidation events in real time. This middleware hooks into internal SWR events and exposes relevant state and actions to devtools interfaces.

• Preload Middleware: Adds support for preloading data before the associated React components mount. It enables caching data ahead of time, reducing loading waterfalls and improving perceived performance when suspense is enabled.

The middleware preset exports a single array that concatenates these middlewares:

import { use as devtoolsUse } from './devtools'
import { middleware as preload } from './preload'

export const BUILT_IN_MIDDLEWARE = devtoolsUse.concat(preload)

Workflow

1. When SWR hooks are instantiated, the built-in middleware array is provided as part of the middleware chain.

2. Each middleware function wraps or enhances the core hook's behavior, adding its specialized logic.

3. The devtools middleware attaches event listeners and exposes hook state updates for developer tooling.

4. The preload middleware manages the prefetching and caching of data before rendering.

5. Middleware composition ensures that all built-in features are applied in order, forming a seamless enhancement pipeline.

This centralized aggregation prevents duplication and inconsistencies, making it easier to maintain and evolve the middleware set as new features or improvements are introduced.

Integration

The Built-in Middlewares integrate tightly with the Middleware Architecture parent topic by serving as the primary example and default set of middleware layers applied to SWR hooks. They demonstrate how middleware composition can package multiple functionalities into a reusable preset, which users can adopt directly or extend with custom middleware.

• With Core SWR Hook: The built-in middlewares wrap the core useSWR hook, adding capabilities without modifying the core logic. This preserves separation of concerns and promotes modularity.

• With Other Middlewares: Users can compose the built-in middlewares with additional third-party or custom middleware, leveraging the middleware composition utilities to create tailored behavior.

• With Developer Tooling and Data Preloading Subtopics: The built-in middlewares provide a practical bridge to these features by integrating their logic into the standard hook lifecycle.

By bundling these middlewares, the subtopic exemplifies middleware best practices within the project and serves as a foundation for future middleware development.

Diagram

flowchart LR
    subgraph SWR Hook Initialization
        A[useSWR Core Hook]
        B[Devtools Middleware]
        C[Preload Middleware]
    end

    A --> B --> C --> D[SWR Hook with Built-in Middleware]

This flowchart illustrates the sequential composition of the built-in middlewares wrapping the core SWR hook, resulting in an enhanced hook instance used by components.