Server State Layer во Vue-приложениях

Во frontend-приложениях серверные данные часто начинают жить своей жизнью: где-то неожиданно дернулся лишний запрос, где-то инвалидация сбросила не тот кеш, где-то DTO с backend протекли прямо в UI, а бизнес-сценарий размазался между компонентами, composables и query client. Пока проект маленький, это почти незаметно. Но чем дольше живет кодовая база, тем сложнее понять, кто и почему управляет серверным состоянием.

В докладе я расскажу, что вообще такое server state, покажу, как выделить его в отдельный архитектурный слой и вернуть контроль над запросами, мутациями, кешем и типами. На примерах Vue-приложений разберем подход, который можно применять с TanStack Query, Pinia Colada и похожими инструментами: описывать работу с серверными данными через понятные границы и декларативные интерфейсы. Поговорим о том, где должны жить query keys, инвалидации, optimistic updates, маппинг-backend DTO в frontend-модель и runtime validation.

Главная цель доклада — не продать конкретную библиотеку, а показать архитектурный способ сделать server state предсказуемым, читаемым и удобным для поддержки. Доклад будет полезен frontend-разработчикам уровня middle и выше, которые работают с Vue/SPA-приложениями, TanStack Query, Pinia Colada, TypeScript и большим количеством серверных данных. Особенно тем, кто уже сталкивался с магическими инвалидациями, лишними запросами и ощущением, что кеш в приложении управляет вами, а не наоборот.