Получить доступ

Работа с API — REST, GraphQL, WebSocket

Полезно знать с Middle

Как фронтенд получает и обновляет данные — кэш запросов, GraphQL, обновления в реальном времени.

REST и серверное состояние

Библиотеки вроде TanStack Query берут на себя кэш ответов, дедупликацию одинаковых запросов, повторы, обновление при возврате на вкладку и инвалидацию после изменений. Оптимистичные обновления — показать результат сразу и откатить при ошибке.

GraphQL

Клиент сам описывает, какие поля нужны, — один запрос вместо нескольких и без лишних данных. Цена — сложнее кэширование и сервер, риск тяжёлых запросов. Клиенты: Apollo, urql.

Реальное время

способкогда
опрос (polling)редкие обновления, простота
Server-Sent Eventsпоток с сервера к клиенту: уведомления, ответы LLM
WebSocketдвусторонний обмен: чаты, совместное редактирование

WebSocket требует переподключения с паузой, восстановления пропущенных событий и учёта балансировщиков.

Ещё

  • Генерация типов клиента из OpenAPI или схемы GraphQL — фронт и бэк не расходятся.
  • Пагинация курсором для бесконечных лент.

Критерии освоения

Middle ≈ 6 ч

  • Ведёт серверное состояние через TanStack Query с инвалидацией и оптимистичными обновлениями
  • Выбирает между опросом, SSE и WebSocket для обновлений в реальном времени

Практика. Перевести загрузку данных проекта с useEffect на TanStack Query с кэшем, повторами и оптимистичным обновлением.

Senior ≈ 4 ч

  • Организует контракт с бэкендом — генерация типов из OpenAPI или схемы GraphQL

Практика. Настроить генерацию клиента и типов из OpenAPI в CI так, чтобы изменения API ломали сборку фронтенда.

Вопросы с собеседований

Документация

← Вся карта «Frontend-разработчик»

Закрытая бета

Знать тему — половина дела

На живом собеседовании sotto слышит вопрос интервьюера и показывает короткий ответ и план. Оставьте контакт — пришлём доступ и промокод.

  • Промокод на 2 часа — сверх пробных 30 минут
  • Программа для Windows — скачать сразу, войти — через Яндекс ID или VK ID
  • Прямая связь с разработчиком: что улучшить — сделаем