Repository in Nuxt with GraphQL: a Data Layer that doesn’t turn into spaghetti
summary
Shows how to replace ad-hoc useFetch calls in Nuxt + GraphQL apps with a Repository-style data layer so components contain no network logic and backend changes don’t break the UI. Covers concrete techniques: integrating a Repository pattern into Nuxt, using GraphQL Codegen sensibly for typing, and extracting a shared API layer via Nuxt Layers to reuse the same API code and rules across projects.
AI-written summary · about
chapters (16)
- 0:00Introduction
- 2:08Projects to product architecture
- 9:14Direct server issues
- 12:07Repository transport layer
- 14:15Query factory and errors
- 16:20Plugins module init
- 18:06Business logic separation
- 18:48Typing issues with GraphQL Codegen
- 21:18Types, fragments, generation
- 24:47Structure and centralization problems
- 26:15Next Layers solution
- 29:45External and local layers
- 31:50Layer setup and loading
- 33:59Adding query instructions
- 36:05Summary
- 37:07Q&A
related talks
38mLarge Scale Nuxt Architecture
38mVue + GraphQL
34mGraphQL & Apollo in Vue
22mWays to architecture your vue/nuxt app
24mGraphQL and me
21mHow to enable large scale collaboration between disciplines using Nuxt
43mGraphQL in the Era of Server Components
28mGraphQL without GraphQL - Backend Agnostic GraphQL inspired Queries For Colocating Data Requests With Components