fetcher.ts

Overview

The fetcher.ts file is a collection of utility functions designed to demonstrate and validate type inference and type safety when using the useSWR and useSWRInfinite hooks from the SWR (stale-while-revalidate) data fetching library. It extensively uses TypeScript's type utilities and custom type assertions to ensure that the keys and fetcher functions passed to these hooks conform to expected types.

Each exported function in this file showcases different key types and shapes that can be used with SWR hooks, including strings, objects (records), tuples, readonly tuples, and function-returned keys. The file primarily serves as a testbed or reference for how various key types interact with SWR's generic typing system, ensuring correctness and consistency.

Detailed Explanation of Functions

Imports

• useSWR and useSWRInfinite: Hooks from the SWR library for data fetching and infinite scrolling data fetching respectively.

• expectType and truthy: Utility functions imported from a local ./utils file.

  • expectType is used to assert type equality during compilation (not runtime).

  • truthy returns a boolean used to toggle conditional key generation.

• Equal: A TypeScript utility type from @type-challenges/utils that checks for type equality.

1. useDataErrorGeneric()

Purpose:
Demonstrates usage of useSWR and useSWRInfinite with generic type parameters explicitly provided, verifying type correctness of keys and data.

Details:

• Calls useSWR with explicit generic types and different key shapes (string, object).

• Uses useSWRInfinite with generics, verifying types of the index and previous page data parameters.

• Utilizes expectType to enforce compile-time type checks.

Example Usage:

useDataErrorGeneric();

2. useString()

Purpose:
Shows usage of useSWR where the key is a string or conditionally null/false, validating that the key type is inferred correctly.

Key Points:

• Keys can be directly string literals or conditional expressions returning string, null, or false.

• Ensures the fetcher receives the correct string literal type.

3. useRecord()

Purpose:
Demonstrates usage of useSWR with an object (record) as the key, testing type inference with nested objects.

4. useTuple()

Purpose:
Demonstrates use of tuples as keys in useSWR, including nested object and array structures.

5. useReadonlyTuple()

Purpose:
Similar to useTuple, but uses readonly tuples (as const) to enforce immutability and literal types.

6. useReturnString()

Purpose:
Shows how keys can be provided as functions returning strings or conditional strings, applicable for lazy or dynamic key generation.

Additional Details:

• Also demonstrates usage of useSWRInfinite with function-returned keys.

• Validates that the fetcher always receives a string key type.

7. useReturnRecord()

Purpose:
Similar to useReturnString but with function-returned record keys for both useSWR and useSWRInfinite.

8. useReturnTuple()

Purpose:
Shows function-returned tuple keys for useSWR and useSWRInfinite.

9. useReturnReadonlyTuple()

Purpose:
Demonstrates function-returned readonly tuple keys with useSWR and useSWRInfinite.

Important Implementation Details

• Type Assertions:
  The file leverages the expectType<Equal<ExpectedType, ActualType>>(true) pattern extensively. This is a compile-time check that enforces that the actual type inferred by TypeScript matches the expected type, helping catch typing errors early.

• Conditional Keys:
  Many hooks use conditional expressions (truthy() ? key : null/false) to illustrate how SWR accepts keys that might be disabled by falsy values (null or false), which is a common pattern for conditional fetching.

• Fetcher Functions:
  The fetcher functions simply return their keys, making this file focused on typing rather than actual data fetching logic.

• Use of useSWRInfinite:
  Shows the pattern of providing a function that returns the key for each page, validating types of index and previous page data parameters.

Interaction with Other Parts of the System

• ./utils Module:
  Uses utility functions expectType and truthy for type validation and conditional branching.

• SWR Library:
  The core interaction is with the SWR hooks (useSWR and useSWRInfinite) which are widely used in React applications for data fetching. This file serves as a type-safe layer or test suite for various key and fetcher type combinations used throughout the system.

• Type Challenges Utilities:
  Uses Equal from @type-challenges/utils to check type equality, indicating this file is likely part of a library or project emphasizing strong typing and type correctness.

Visual Diagram

Below is a Mermaid class diagram representing the structure of this file, focusing on the exported functions and their key/fetcher type interactions.

classDiagram
    class useDataErrorGeneric {
        +void()
        -uses useSWR<{id:number}>
        -uses useSWR<string>
        -uses useSWRInfinite<string[]>
    }
    class useString {
        +void()
        -uses useSWR<string | null | false>
    }
    class useRecord {
        +void()
        -uses useSWR<Record>
    }
    class useTuple {
        +void()
        -uses useSWR<[object, array]>
    }
    class useReadonlyTuple {
        +void()
        -uses useSWR<readonly tuple>
    }
    class useReturnString {
        +void()
        -uses useSWR<() => string | null | false>
        -uses useSWRInfinite<string>
    }
    class useReturnRecord {
        +void()
        -uses useSWR<() => Record | null | false>
        -uses useSWRInfinite<{index:number, endPoint:string}>
    }
    class useReturnTuple {
        +void()
        -uses useSWR<() => tuple | null | false>
        -uses useSWRInfinite<tuple>
    }
    class useReturnReadonlyTuple {
        +void()
        -uses useSWR<() => readonly tuple | null | false>
        -uses useSWRInfinite<readonly tuple>
    }

    useDataErrorGeneric ..> useSWR : calls
    useDataErrorGeneric ..> useSWRInfinite : calls
    useString ..> useSWR : calls
    useRecord ..> useSWR : calls
    useTuple ..> useSWR : calls
    useReadonlyTuple ..> useSWR : calls
    useReturnString ..> useSWR : calls
    useReturnString ..> useSWRInfinite : calls
    useReturnRecord ..> useSWR : calls
    useReturnRecord ..> useSWRInfinite : calls
    useReturnTuple ..> useSWR : calls
    useReturnTuple ..> useSWRInfinite : calls
    useReturnReadonlyTuple ..> useSWR : calls
    useReturnReadonlyTuple ..> useSWRInfinite : calls

Summary

The fetcher.ts file is a comprehensive suite of typed examples and tests for using SWR's data fetching hooks with various key formats. It ensures type correctness through compile-time assertions and reflects best practices in conditional fetching and generic typing in TypeScript React projects. This file is primarily a developer tool aiding in robust type-safe usage of SWR hooks across the application.