Introduction to KY HTTP Client

• KY (Kai) is HTTP client library built on fetch API
• Addresses fetch API limitations and ergonomic issues
• 3.3 kilobytes minified and gzipped, no dependencies
• Targets modern browsers, Node, Bun, and Deno

Historical Context: Axios vs Fetch

• Axios was primary fetch solution before native fetch existed
• Fetch only recently added to Node.js
• React Native still getting fetch support
• Axios provided reliable, consistent data fetching across platforms
• Fetch became standard but has downgrades from axios experience

KY Features and Benefits

• Simpler API with method shortcuts (ky.get, ky.post)
• Treats non-200 responses as errors (enables try/catch)
• Includes timeout support
• Automatic retry for failed requests (default: 2 retries)
• Better TypeScript support for JSON responses
• Automatic content-type headers for JSON requests
• No manual method specification required

Code Comparison Examples

Traditional Fetch Approach

• Manual response.ok checking and error throwing
• Manual JSON parsing with type casting
• Explicit method specification in options
• Manual content-type header setting
• Common mistakes: forgetting content-type, method specification

KY Approach

• ky.get('/todos').json<Todo[]>() with type inference
• ky.post('/todos', {json: todoData}).json<Todo>()
• Automatic content-type handling
• Built-in error handling

Senior Developer Perspective (Dax's Tweet)

• Tweet: "Can tell how senior you are by whether you include stuff like this"
• Argument: Installing every helper makes codebase "not JavaScript anymore"
• Fetch benefit: universal understanding, standard everywhere
• AI tools generate fetch code better due to familiarity
• "Different is type of bad" - unfamiliarity creates cognitive overhead
• Benefits must justify making something "knowingly worse"

React Query Comparison Deep Dive

Manual React Fetch Implementation Problems

• 39 lines of code for basic safe fetching
• Race condition bugs when props change
• Need cleanup functions with isMounted checks
• Manual loading, error, and data state management
• Complex useEffect with dependency arrays

React Query Solution

• Reduces 39 lines to ~4 lines of code
• Handles race conditions automatically
• Prevents duplicate requests
• Built-in caching and sharing across components
• Performance improvements and better UX

Cost-Benefit Analysis

React Query vs Vanilla React

• Massive gap: 39 lines → 4 lines
• Prevents potential errors and bugs
• Significant performance wins
• Justifies dependency addition

KY vs Fetch

• Smaller gap: ~3 lines → 1 line
• Doesn't solve caching or major architectural issues
• Limited performance/UX improvements
• Smaller dependency but also smaller benefit

Final Assessment

• KY has merit but benefit-to-cost ratio lower than React Query
• Not "obvious win" compared to other abstractions
• Wouldn't judge developers for including or excluding KY
• Would judge developers for refusing React Query
• Abstractions exist for reasons - evaluate case by case
• Blanket rejection of non-vanilla solutions problematic