Fragment GraphQL: con nome, inline e type condition | We.Inc
Crea fragment GraphQL in un query builder dal vivo: fragment con nome da riusare, inline fragment per union e interfacce, type condition, __typename e variabili.
Un fragment GraphQL è un insieme di campi con nome e riutilizzabile per un tipo, scritto come fragment Name on Type e inserito in una query con ...Name. Un inline fragment, scritto ... on Type, non ha nome e seleziona i campi solo quando il risultato è di quel tipo concreto: è così che interroghi union e interfacce.
Forme di fragment
Forma
Sintassi
Usala per
Fragment con nome
fragment UserCard on User { ... }
Condividere un elenco di campi tra più query
Spread
...UserCard
Includere i campi di un fragment con nome
Inline fragment
... on Photo { url }
Campi di un membro di una union o interfaccia
Inline senza tipo
... @include(if: $full) { bio }
Applicare una direttiva a un gruppo di campi
Nome del tipo
__typename
Distinguere i membri di una union nella risposta
Spunta i campi che vuoi nel builder e lui scrive la query per te, una volta con un fragment con nome e una volta con i campi scritti inline, così vedi che chiedono gli stessi dati. Attiva l'opzione dei risultati di ricerca per aggiungere inline fragment su una union.
Spunta i campi di User che mostra la card sul tuo schermo.
Scegli se i campi vanno in un fragment con nome o direttamente nella query.
Attiva i risultati di ricerca per aggiungere un campo union con un inline fragment per ogni tipo membro.
Copia la query ed eseguila su uno schema che ha questi tipi.
Dai ai fragment il nome del componente che li usa, come UserCard o PostRow, così ogni parte dello schermo dichiara i propri bisogni di dati.
Aggiungi sempre __typename quando selezioni da una union o interfaccia; il tuo codice ne ha bisogno per sapere quale membro ha ricevuto.
I fragment possono leggere le variabili dell'operazione, quindi un campo di un fragment può ricevere un argomento come size: $avatarSize.
Un fragment non può includere se stesso, né direttamente né tramite un altro fragment. La validazione rifiuta il ciclo prima che venga eseguito qualsiasi cosa.
Domande frequenti
I fragment rendono le risposte più piccole?
No. Un fragment è un aiuto per scrivere la query. Il server lo espande, e la risposta appare esattamente come se avessi scritto i campi per esteso. Se due spread selezionano lo stesso campo, compare una volta sola.
Quando devo usare un inline fragment?
Quando un campo restituisce una union o un'interfaccia e ti servono campi che hanno solo alcuni tipi membri. graphql.org lo mostra con un hero che può essere un Droid con primaryFunction o un Human con height.
Un fragment può essere usato su un tipo diverso?
Solo dove può applicarsi. Un fragment su un'interfaccia può essere incluso in qualsiasi tipo oggetto che la implementa, ma un fragment su User incluso in una selezione di Post non supera la validazione.
Dove si trovano i fragment nel documento?
Al livello principale del documento, accanto alle operazioni, in qualsiasi ordine. Ogni fragment definito deve essere usato, altrimenti il server rifiuta il documento come non valido.
Fragment con nome per il riuso
Supponi che l'intestazione di un profilo, un commento e un elenco di membri mostrino tutti un nome e un avatar. Scrivere quei campi tre volte invita al disallineamento: una copia guadagna un campo che le altre non hanno. Un fragment su User contiene l'elenco una volta sola e ogni query lo include.
Le app basate su componenti vanno oltre. Ogni componente dichiara il fragment di cui ha bisogno, e la query della pagina include i fragment dei componenti che disegna, così i bisogni di dati stanno accanto al codice che li usa.
Inline fragment e type condition
La parte on Type è la type condition. Per un fragment con nome indica a quale tipo appartengono i campi. Per un inline fragment dentro un campo union, fa sì che quei campi valgano solo quando l'oggetto è di quel tipo.
Una ricerca che restituisce utenti, post e foto è il caso classico. La selezione elenca ... on User, ... on Post e ... on Photo, ciascuno con i propri campi, e __typename dice al client quale ramo ha preso ogni risultato.
Schema usato dal builder
Una union per i risultati di ricerca
SearchResult può essere un User o una Photo, quindi una selezione su di esso richiede inline fragment per raggiungere i campi di ciascun membro.
Leggere una risposta con union
Cosa restituisce la ricerca
Ogni elemento contiene solo i campi del proprio ramo, più __typename.
Diramare in base a __typename
Il nome del tipo è il modo sicuro per distinguere i membri; controllare la presenza di un campo può rompersi quando in seguito un tipo lo acquisisce.
Query builder per fragment
Campi di User da selezionare
Usa un fragment con nome (UserCard)
Aggiungi risultati di ricerca (union con inline fragment)
Query
Copia query
{n} campo/i selezionato/i, {v} riga/righe di query