Этап 14 из 19 · ≈ 6 ч

Работа с 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 ломали сборку фронтенда.

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

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

Смотреть все

Какие изменения REST API обратно совместимы для существующих клиентов?Middle

Добавлять можно (новое необязательное поле в ответе, новый эндпоинт, новый необязательный параметр); удалять, переименовывать, менять тип и ужесточать — нельзя.

Полный разбор

Чем TCP отличается от UDP?Junior

TCP — надёжный упорядоченный поток байтов с установкой соединения. UDP — отдельные датаграммы без гарантий: быстро и просто.

Полный разбор

Когда фронтенду нужен REST, GraphQL или WebSocket?Middle

REST — ресурсы и HTTP-методы: просто, кэшируется HTTP, хватает для большинства приложений. GraphQL — клиент сам описывает нужные поля одним запросом: удобно при множестве экранов с разными данными и нескольких клиентах, но сложнее кэширование и защита от…

Полный разбор

Как сделать HTTP-запрос через fetch и правильно обработать ошибки?Junior

fetch(url, options) возвращает Promise ответа. Важно: промис отклоняется только при сетевой ошибке — на 404 и 500 он выполняется успешно, поэтому надо проверять response.ok или status. Тело читают await res.json() (тоже промис). Для POST — method, headers…

Полный разбор

Как работать с серверными данными через TanStack Query?Middle

Серверное состояние — копия данных сервера: его нужно кэшировать, обновлять, дедуплицировать. useQuery({ queryKey, queryFn }) даёт data, isPending, error, кэш по ключу, повторы при ошибках, фоновое обновление при возврате на вкладку, отмену устаревших…

Полный разбор

Как сделать оптимистичное обновление интерфейса с откатом при ошибке?Middle

Оптимистичное обновление показывает результат действия сразу, не дожидаясь сервера (лайк, отметка задачи), — интерфейс кажется мгновенным. В TanStack Query: в onMutate отменить текущие запросы этого ключа, сохранить прежние данные, записать новые через…

Полный разбор

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

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

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования