DEVOURED
fate (GitHub Repo)
fate is a new React data client inspired by Relay and GraphQL, offering view composition, normalized caching, data masking, and type-safe data fetching with a minimal API.
What: fate is an alpha-stage data client for React (requiring React 19.2+) that focuses on composable, declarative, and predictable data fetching. It uses co-located "views" for components to declare data requirements, features a normalized cache, data masking, and integrates Async React features like Suspense, aiming to reduce overfetching and boilerplate.
Why it matters: This project attempts to bring the sophisticated data management ergonomics of GraphQL frameworks like Relay to plain TypeScript and RPC backends, addressing a common pain point for React developers who desire similar benefits without adopting a full GraphQL stack.
Takeaway: If you are a React developer working with React 19.2+ and looking for advanced data fetching and state management similar to Relay/GraphQL but using plain TypeScript and RPC, consider exploring the `fate` GitHub repository and its templates for a potential future solution.
Deep dive
- fate is a modern data client for React, inspired by Relay and GraphQL, designed for composable, declarative, and predictable data fetching and state management.
- It combines view composition, a normalized cache, data masking, Async React features (Actions, Suspense, use), and type-safe data fetching.
- Components declare their data requirements using co-located "views," which are then composed into a single network request per screen to minimize requests and eliminate waterfalls.
- The framework maintains a normalized cache, enabling efficient data updates, optimistic updates for mutations, and live view updates via Server-Sent Events.
- fate enforces strict data selection for each view and masks (hides) data not explicitly requested, preventing accidental coupling and reducing overfetching.
- It is built with just JavaScript, has a minimal API, and no DSL, distinguishing itself from GraphQL which requires its own type system and query language.
- The project aims to provide GraphQL/Relay ergonomics (fragments co-located with components, normalized cache, compiler for hoisting fragments) for developers using tRPC or other type-safe RPC frameworks.
- fate requires React 19.2+ and is currently in alpha, not production-ready.
- Developers can start with
vp create fate my-appusing templates for Void app with Drizzle, tRPC with Drizzle, or tRPC with Prisma.
Decoder
- Relay: A JavaScript framework for building data-driven React applications, developed by Facebook, that uses GraphQL for data fetching.
- GraphQL: A query language for APIs and a runtime for fulfilling those queries with your existing data.
- Normalized cache: A data caching strategy where each unique entity (e.g., a
UserorPost) is stored once in a single, consistent location, and references to these entities are used throughout the application. This prevents data duplication and simplifies updates. - Data masking: In the context of
fate, it refers to the practice of preventing components from accessing data fields that they did not explicitly request in their view definition. - Async React features: Modern features in React, such as
Suspenseanduse, that facilitate asynchronous operations and concurrent rendering, allowing components to "suspend" rendering while waiting for data or other async work. - DSL (Domain-Specific Language): A specialized computer language designed for a particular application domain.
- tRPC: A TypeScript framework for building end-to-end type-safe APIs without GraphQL or REST.
Original article
Full article content is not available for inline reading.
Explore all 57 articles in today's digest
Fresh dev news, AI-digested daily. Never miss a trend at devoured.fyi