Лекція 291: Фрагменти (Fragments) та їх використання в GraphQL

Фрагменти (або Fragments) в GraphQL — це блоки коду, які дозволяють тобі повторно використовувати певні групи полів у запитах.

Проблема дублювання в запитах

Припустимо, у нас є схема, що описує сутності User з полями id, name, email і profilePicture. Припустимо, ми хочемо отримати інформацію про авторів постів і коментарів. Запит може виглядати так:

query GetPostsAndComments {
  posts {
    id
    title
    author {
      id
      name
      email
      profilePicture
    }
  }
  comments {
    id
    text
    author {
      id
      name
      email
      profilePicture
    }
  }
}

Зверни увагу, що блок з полями користувача (author) повторюється двічі.

Це не лише виглядає громіздко, але й загрожує помилками: якщо потрібно буде додати або змінити одне з полів, доведеться внести правки у всіх відповідних місцях (а постарайся нічого не забути).

Рішення: використання фрагментів

Фрагменти дозволяють винести спільну частину в окремий блок, щоб повторно її використовувати. Ось як можна переписати запит вище з використанням фрагментів:

query GetPostsAndComments {
  posts {
    id
    title
    author {
      id
      name
      email
      profilePicture
    }
  }
  comments {
    id
    text
    author {
      id
      name
      email
      profilePicture
    }
  }
}

Класно, правда? Фрагмент UserFields визначає список полів, який можна знову і знову використовувати в будь-якому запиті або мутації, де фігурує сутність User.

Синтаксис і структура фрагментів

Фрагмент оголошується з використанням ключового слова fragment, за яким слідує його ім'я, тип, до якого він належить, і перелік полів:

fragment Ім'яФрагмента on Тип {
  поле1
  поле2
  ...
}

Щоб використати фрагмент всередині запиту, достатньо вказати його ім'я, попередивши трьома крапками (...):

{
  entity {
    ...Ім'яФрагмента
  }
}

Візьмемо інший приклад. У нас є тип Book, який описує книги:

type Book {
  id: ID!
  title: String!
  author: User!
  publishedYear: Int
}

Якщо запит стосується списку книг і їх авторів, ми можемо оголосити фрагмент для автора:

fragment AuthorFields on User {
  name
  email
}

query GetBooks {
  books {
    id
    title
    author {
      ...AuthorFields
    }
    publishedYear
  }
}

Таким чином ми позбуваємося необхідності перераховувати поля автора (name, email) в кожному запиті.

Переваги використання фрагментів

1. Зменшення дублювання коду
   Чим менше копій одного й того ж коду, тим менша ймовірність помилок і невідповідностей.
2. Зручність підтримки
   Оновлення або додавання поля в одному фрагменті автоматично впливає на всі запити, де він використовується.
3. Чистота і читабельність коду
   Запити стають коротшими і простішими для розуміння.
4. Підвищення узгодженості
   Єдиний фрагмент з певною структурою полів гарантує, що всі запити використовують одні й ті ж дані.

Обмеження та поради щодо роботи з фрагментами

Хоча фрагменти корисні, важливо розуміти їхні обмеження:

• Фрагменти працюють лише в межах одного типу або інтерфейсу. Якщо ти хочеш використовувати фрагмент для різних типів, потрібно буде визначити окремі фрагменти для кожного з них.
• Занадто багато фрагментів можуть ускладнювати розуміння структури схеми. Не варто фрагментувати все підряд. Оптимально використовувати фрагменти для великих і часто повторюваних груп полів.

Практика: Створення та використання фрагментів

Крок 1: Створимо просту GraphQL-схему

type User {
  id: ID!
  name: String!
  email: String!
}

type Comment {
  id: ID!
  text: String!
  author: User!
}

type Query {
  comments: [Comment!]!
}

Крок 2: Напишемо фрагмент для User

fragment UserBasicInfo on User {
  id
  name
  email
}

Крок 3: Використовуємо фрагмент в запиті

query GetCommentsWithAuthors {
  comments {
    id
    text
    author {
      ...UserBasicInfo
    }
  }
}

Крок 4: Додамо новий запит

Припустимо, ми захотіли додати ще один запит, який показує список користувачів. Фрагмент знову виявляється незамінним:

query GetAllUsers {
  users {
    ...UserBasicInfo
  }
}

Корисні інструменти для роботи з GraphQL-фрагментами

1. GraphQL Playground
   Якщо ти розробляєш GraphQL API, Playground допоможе тестувати запити і фрагменти в зручному інтерфейсі.
2. Apollo Client
   Apollo автоматично підтримує кешування даних, засноване на фрагментах. Це особливо корисно для фронтенду.

Підсумкова практика

Припустимо, до типу User додалося нове поле profilePicture. Достатньо оновити фрагмент:

fragment UserBasicInfo on User {
  id
  name
  email
  profilePicture
}

Тепер це оновлення відобразиться у всіх запитах, де використовується фрагмент. Хіба це не диво?

Наступне заняття торкнеться більш складних і потужних підходів, таких як batch-завантаження (Batch Loading). Але перш ніж рухатися далі, переконайся, що фрагменти тобі зрозумілі і ти готовий використовувати їх у реальних проєктах!