Houdini: A GraphQL-First Application Framework
summary
Houdini claims to be a GraphQL-first framework that combines a GraphQL compiler with a file-based +page router and Vite bundling to avoid query and asset waterfalls. It generates TypeScript types, gives each fragment its own cache subscription so components only update on relevant changes, and provides list insertion via named fragments and built‑in pagination. A loading directive creates mock loading shapes and inserts suspense boundaries for streaming, and progressive form mutations fall back to server endpoints for offline/hydration resilience. Implementation exists for React and production support is most mature for SvelteKit.
AI-written summary · about
chapters (19)
- 0:00Introduction and background
- 1:25Relay's influence on Houdini
- 2:28Core concepts of Houdini
- 4:55Building a React router
- 6:41File system based routing
- 8:45Query and layout files
- 10:30Dynamic routes and variables
- 11:32TypeScript support
- 12:34React Suspense basics
- 14:21Simplifying loading states
- 16:28Loading directive explained
- 18:12Streaming data with loading
- 20:59Loading vs defer directives
- 21:42Mutations in Houdini
- 23:49Waterfalls in frontend apps
- 25:55Preventing query waterfalls
- 27:18Asset waterfalls and lazy loading
- 29:25Server components overview
- 31:08How to try Houdini
related talks
38mWeb Applications of the Future With TypeScript and GraphQL
32mFrom learning to thinking in GraphQL
31mGraphQL Without GraphQL: Backend Agnostic Requests with GraphQL Style Querying
26mA Journey Through React Apollo
29mWhy You Should Use Implementation-First to Build Your GraphQL Schema
24mModern Apollo Client React
10mReact Router + Vite is a Framework
30mReact state management in a GraphQL era