Usando componentes em vez de grafos

O Gato GraphQL não usa grafos para representar o modelo de dados. Em vez disso, usa componentes.

Essa não é uma abordagem inesperada. Sob o título Thinking in Graphs, o projeto GraphQL afirma (ênfase adicionada):

Os grafos são ferramentas poderosas para modelar muitos fenômenos do mundo real, pois se assemelham aos nossos modelos mentais naturais e às descrições verbais do processo subjacente. Com o GraphQL, você modela seu domínio de negócio como um grafo definindo um schema; dentro do seu schema, você define diferentes tipos de nós e como eles se conectam/relacionam entre si. No lado do cliente, isso cria um padrão semelhante à Programação Orientada a Objetos: tipos que referenciam outros tipos. No lado do servidor, como o GraphQL define apenas a interface, você tem a liberdade de usá-lo com qualquer backend (novo ou legado!).

O que se deve extrair dessa definição é o seguinte:

Mesmo que a resposta tenha a forma de um grafo, isso não significa que os dados sejam realmente representados como um grafo quando trabalhados no lado do servidor. O grafo é apenas um modelo mental, não uma implementação real.

Isso é uma boa notícia, pois trabalhar com grafos (ou árvores) não é trivial. Os componentes, por outro lado, são muito mais simples de implementar e oferecem todos os mesmos benefícios.

​

Simplificando o modelo de dados por meio de componentes

Usar componentes para representar a estrutura de dados no lado do servidor é ótimo em termos de simplicidade, pois permite consolidar os diferentes modelos de dados em uma única estrutura. Em vez de ter um fluxo como este:

construir query para alimentar os componentes (cliente) => processar dados como grafo/árvore (servidor) => alimentar dados aos componentes (cliente)

...nosso fluxo será assim:

componentes (cliente) => componentes (servidor) => componentes (cliente)

Isso é possível porque a requisição GraphQL pode ser concebida como tendo uma estrutura de dados de "hierarquia de componentes", na qual cada tipo de objeto representa um componente, e cada campo de relacionamento de um tipo de objeto para outro tipo de objeto representa um componente envolvendo outro componente.

Vamos usar um exemplo para visualizar essa relação entre componente e query GraphQL. Digamos que queremos construir o seguinte widget "Diretor em destaque":

Usando Vue ou React (ou qualquer outra biblioteca baseada em componentes), primeiro identificaríamos os componentes. Neste caso, teríamos um componente externo <FeaturedDirector> (em vermelho), que envolve um componente <Film> (em azul), que por sua vez envolve um componente <Actor> (em verde):

O pseudo-código ficará assim:

<!-- 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

Em seguida, identificamos quais dados são necessários para cada componente. Para <FeaturedDirector> precisamos de name, avatar e country. Para <Film> precisamos de thumbnail e title. E para <Actor> precisamos de name e avatar:

E construímos nossa query GraphQL para buscar os dados necessários:

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

Como se pode observar, há uma relação direta entre a hierarquia de componentes acima e esta query GraphQL.