Gavin Cettolo's 6-step blueprint for a clean frontend data layer

This review examines a structured approach to API calls in frontend projects, moving from ad-hoc fetch usage to a maintainable apiClient architecture integrated with TanStack Query.

TL;DR

Best for: Frontend projects, particularly those using React and TypeScript, that are experiencing growing complexity in API interactions and require a robust, scalable, and maintainable data layer. Skip if: Your project has minimal API interaction, you are not using React, or you prefer a different server state management library. Simple fetch calls might suffice for very small, short-lived applications. Bottom line: Gavin Cettolo's 6-step blueprint provides a production-grade architecture for frontend data layers, effectively addressing common pitfalls of scattered fetch calls through clear separation of concerns, type safety, and intelligent server state management.

METHODOLOGY

This v0 review draws on the founder's published claims in the dev.to article "API Calls Done Right: From Messy Fetch to Clean Data Layer" by Gavin Cettolo. Independent benchmarks are pending. Update cadence: re-tested when claims diverge from observed behavior.

The methodology, here referred to as "Cettolo's 6-Step Data Layer Blueprint," was observed on 2026-05-19T08:00:01.557Z. This review covers the architectural recommendations, code examples, the responsibility matrix, and the proposed final folder structure detailed in the source article. It specifically focuses on the transition from raw fetch calls to a structured apiClient pattern, incorporating TypeScript for type safety, structured error handling, authentication management, automatic token refresh, and integration with TanStack Query for server state management.

What's not covered in this v0 review includes independent performance benchmarks of the proposed architecture, long-term workflow impacts in a team environment beyond the author's claims, and an exhaustive analysis of edge cases not explicitly discussed in the article. Our assessment is based solely on the technical blueprint provided by Gavin Cettolo.

WHAT IT DOES

Gavin Cettolo's article outlines a six-step process to evolve a chaotic frontend API integration into a clean, typed, maintainable data layer. The core idea is to establish a clear separation of concerns, moving responsibilities away from individual React components into dedicated modules.

apiClient for transport logic

The first step introduces a centralized apiClient responsible for HTTP transport details like base URLs, headers, and timeouts. This consolidates network-level concerns, preventing their dispersal across the codebase. It acts as the single point of entry for all outgoing API requests.

Typed responses and error handling

Building on the apiClient, the blueprint emphasizes TypeScript for defining expected API response types and implementing structured error handling. This ensures type safety throughout the data flow and provides a consistent mechanism for handling API-specific errors, moving beyond generic try/catch blocks.

Service modules by domain

To organize domain-specific API calls, the guide proposes creating