Usare i componenti invece dei grafi

Gato GraphQL non usa i grafi per rappresentare il modello di dati. Al loro posto, usa i componenti.

Non si tratta di un approccio inaspettato. Sotto il titolo Thinking in Graphs, il progetto GraphQL afferma (enfasi aggiunta):

I grafi sono strumenti potenti per modellare numerosi fenomeni del mondo reale, perché assomigliano ai nostri modelli mentali naturali e alle descrizioni verbali del processo sottostante. Con GraphQL, modelli il tuo dominio aziendale come un grafo definendo uno schema; all'interno del tuo schema, definisci diversi tipi di nodi e il modo in cui si connettono/si relazionano tra loro. Sul lato client, questo crea un pattern simile alla Programmazione Orientata agli Oggetti: tipi che fanno riferimento ad altri tipi. Sul lato server, poiché GraphQL definisce solo l'interfaccia, hai la libertà di usarlo con qualsiasi backend (nuovo o legacy!).

Ciò che bisogna trarre da questa definizione è quanto segue:

Anche se la risposta ha la forma di un grafo, ciò non significa che i dati siano effettivamente rappresentati come un grafo quando li si gestisce sul lato server. Il grafo è solo un modello mentale, non un'implementazione reale.

Questa è una buona notizia, perché lavorare con i grafi (o gli alberi) non è banale. I componenti, invece, sono molto più semplici da implementare e offrono esattamente gli stessi vantaggi.

​

Semplificare il modello di dati attraverso i componenti

Usare i componenti per rappresentare la struttura dei dati sul lato server è ottimale in termini di semplicità, perché consente di consolidare i diversi modelli per i nostri dati in un'unica struttura. Invece di avere un flusso come questo:

costruire una query per alimentare i componenti (client) => elaborare i dati come grafo/albero (server) => alimentare i dati ai componenti (client)

...il nostro flusso sarà così:

componenti (client) => componenti (server) => componenti (client)

Ciò è realizzabile perché la richiesta GraphQL può essere concepita come avente una struttura di dati a "gerarchia di componenti", in cui ogni tipo di oggetto rappresenta un componente, e ogni campo di relazione da un tipo di oggetto a un altro tipo di oggetto rappresenta un componente che ne avvolge un altro.

Usiamo un esempio per visualizzare questa relazione tra componente e query GraphQL. Supponiamo di voler costruire il seguente widget "Regista in evidenza":

Usando Vue o React (o qualsiasi altra libreria basata sui componenti), identificheremmo per prima cosa i componenti. In questo caso, avremmo un componente esterno <FeaturedDirector> (in rosso), che avvolge un componente <Film> (in blu), che a sua volta avvolge un componente <Actor> (in verde):

Lo pseudo-codice avrà questo aspetto:

<!-- Component: <FeaturedDirector> -->
<div>
  Country: {country}
  {foreach films as film}
    <Film film={film} />
  {/foreach}
</div>
 
<!-- Component: <Film> -->
<div>
  Title: {title}
  Pic: {thumbnail}
  {foreach actors as actor}
    <Actor actor={actor} />
  {/foreach}
</div>
 
<!-- Component: <Actor> -->
<div>
  Name: {name}
  Photo: {avatar}
</div>Copy

Poi identifichiamo quali dati sono necessari per ciascun componente. Per <FeaturedDirector> abbiamo bisogno di name, avatar e country. Per <Film> abbiamo bisogno di thumbnail e title. E per <Actor> abbiamo bisogno di name e avatar:

E costruiamo la nostra query GraphQL per recuperare i dati richiesti:

query {
  featuredDirector {
    name
    country
    avatar
    films {
      title
      thumbnail
      actors {
        name
        avatar
      }
    }
  }
}Copy

Come si può apprezzare, esiste una relazione diretta tra la gerarchia di componenti qui sopra e questa query GraphQL.