GraphQL Fragments: пусть каждый компонент владеет своими данными

GraphQL-запросы поначалу выглядят чисто. Один запрос получает все ваши данные. Затем ваше приложение растет.

Ваш запрос страницы начинает собирать поля для множества различных дочерних компонентов. Вы добавляете поле для нового компонента. Спустя шесть недель вы удаляете этот компонент. Вы забываете удалить поле из основного запроса. Теперь никто не знает, безопасно ли его удалять. Запрос растет бесконечно.

Фрагменты решают эту проблему. Большинство команд используют их как способ копирования и вставки полей. Это неправильный подход. Фрагменты должны служить моделью владения компонентами.

Фрагмент — это именованная группа полей для определенного типа.

Пример: fragment UserBadge on User { id name avatarUrl }

Вы используете этот фрагмент через spread в любом запросе, которому нужен User.

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

Это называется колокацией (co-location). Каждый компонент декларирует свои собственные потребности в данных.

Когда компоненту требуется новое поле, вы добавляете его в его фрагмент. Родительский запрос обновляется автоматически. Когда вы удаляете компонент, вы удаляете и его фрагмент. Запрос уменьшается. Родительскому компоненту не нужно знать о внутренних полях своих дочерних компонентов.

Маскирование данных (data masking) делает это еще эффективнее. При включенном маскировании компонент видит только те поля, которые он запросил в своем собственном фрагменте. Даже если сервер присылает дополнительные данные, ваш компонент не сможет получить к ним доступ.

Это создает строгий контракт.

  • TypeScript точно знает, какие данные есть у каждого компонента.
  • Если вы удалите поле из фрагмента, TypeScript покажет вам все ошибки.
  • Рефакторинг превращается в простую проверку типов вместо поиска по всей кодовой базе.

Используйте фрагменты, когда:

  • Несколько компонентов используют один и тот же тип, например User или Product.
  • Ваши запросы страниц слишком длинные.
  • Вы случайно оставляете неиспользуемые поля в своих запросах.
  • Вам нужна типобезопасность ваших данных с помощью TypeScript.

Начните с малого. Найдите один компонент, который получает данные из родительского запроса. Перенесите его поля во фрагмент. Поместите этот фрагмент в файл компонента.

Фрагменты гарантируют, что получение данных соответствует вашему UI по мере роста приложения.

Источник: https://dev.to/grimicorn/graphql-fragments-let-each-component-own-its-data-5359