Fragmenty GraphQL: Niech każdy komponent zarządza własnymi danymi

Zapytania GraphQL na początku wyglądają przejrzyście. Jedno żądanie pobiera wszystkie dane. Potem aplikacja rośnie.

Zapytanie strony zaczyna gromadzić pola dla wielu różnych komponentów potomnych. Dodajesz pole dla nowego komponentu. Sześć tygodni później usuwasz ten komponent. Zapominasz usunąć pole z głównego zapytania. Teraz nikt nie wie, czy bezpieczne jest jego usunięcie. Zapytanie rośnie w nieskończoność.

Fragmenty rozwiązują ten problem. Większość zespołów używa ich jako sposobu na kopiowanie i wklejanie pól. To błędne podejście. Fragmenty powinny być modelem własności komponentów.

Fragment to nazwana grupa pól dla konkretnego typu.

Przykład:

fragment UserBadge on User {
  id
  name
  avatarUrl
}

Rozszerzasz ten fragment w każdym zapytaniu, które wymaga typu User.

Prawdziwa wartość płynie z tego, gdzie zapisujesz fragment. Nie umieszczaj ich w współdzielonym pliku. Umieść fragment w tym samym pliku, co komponent, który go używa.

Nazywa się to ko-lokacją (co-location). Każdy komponent deklaruje własne potrzeby dotyczące danych.

Gdy komponent potrzebuje nowego pola, dodajesz je do jego fragmentu. Zapytanie nadrzędne aktualizuje się automatycznie. Gdy usuwasz komponent, usuwasz jego fragment. Zapytanie staje się krótsze. Komponent nadrzędny nie musi znać wewnętrznych pól swoich komponentów potomnych.

Maskowanie danych (data masking) sprawia, że jest to jeszcze lepsze. Gdy maskowanie jest włączone, komponent widzi tylko te pola, o które poprosił w swoim własnym fragmencie. Nawet jeśli serwer wysyła dodatkowe dane, Twój komponent nie może mieć do nich dostępu.

Tworzy to ścisły kontrakt.

• TypeScript dokładnie wie, jakie dane posiada każdy komponent.
• Jeśli usuniesz pole z fragmentu, TypeScript wskaże Ci każdy błąd.
• Refaktoryzacja staje się prostym sprawdzaniem typów, a nie przeszukiwaniem całego kodu źródłowego.

Używaj fragmentów, gdy:

• Wiele komponentów używa tego samego typu, takiego jak User lub Product.
• Zapytania stron są zbyt długie.
• Przypadkowo zostawiasz nieużywane pola w zapytaniach.
• Chcesz zapewnić bezpieczeństwo typów (TypeScript safety) dla swoich danych.

Zacznij od małych kroków. Znajdź jeden komponent, który pobiera dane z zapytania nadrzędnego. Przenieś jego pola do fragmentu. Umieść ten fragment w pliku komponentu.

Fragmenty zapewniają, że pobieranie danych będzie odpowiadać Twojemu UI wraz ze wzrostem aplikacji.

Źródło: https://dev.to/grimicorn/graphql-fragments-let-each-component-own-its-data-5359