<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Gustavo Carvalho Silva</title>
    <description>The latest articles on DEV Community by Gustavo Carvalho Silva (@gustavocrvls).</description>
    <link>https://dev.to/gustavocrvls</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F582455%2F1d7f32c1-65ac-4647-8c86-46ac24171eee.png</url>
      <title>DEV Community: Gustavo Carvalho Silva</title>
      <link>https://dev.to/gustavocrvls</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/gustavocrvls"/>
    <language>en</language>
    <item>
      <title>GraphQL para iniciantes</title>
      <dc:creator>Gustavo Carvalho Silva</dc:creator>
      <pubDate>Fri, 25 Mar 2022 12:23:06 +0000</pubDate>
      <link>https://dev.to/gustavocrvls/graphql-para-iniciantes-2deo</link>
      <guid>https://dev.to/gustavocrvls/graphql-para-iniciantes-2deo</guid>
      <description>&lt;h2&gt;
  
  
  O que é GraphQL?
&lt;/h2&gt;

&lt;p&gt;O GraphQL é um padrão de API criado pelo Facebook, que provê uma alternativa mais robusta e completa ao REST. Ele permite um maior controle da parte do cliente sobre os dados que serão requisitados da API, diminuindo problemas de &lt;em&gt;overfetching&lt;/em&gt; dentro de uma aplicação.&lt;/p&gt;

&lt;p&gt;O GraphQL não é voltado para um banco de dados ou serviço de armazenamento de dados, ou ainda para uma linguagem específica. Dessa forma o GraphQL funciona a partir dos dados já existentes dentro de uma aplicação, independente da linguagem no qual foi escrita.&lt;/p&gt;

&lt;h3&gt;
  
  
  Principais conceitos
&lt;/h3&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;&lt;em&gt;Schemas e Types&lt;/em&gt;&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Um &lt;em&gt;schema&lt;/em&gt; é a estrutura básica do GraphQL, ele que define a estrutura da funcionalidade disponível para um cliente. Um &lt;em&gt;schema&lt;/em&gt; é criado utilizando os &lt;em&gt;types&lt;/em&gt; que permitem criar relacionamentos entre os dados, definir estruturas ou mesmo especificar os tipos de ações que podem ser realizadas pelos clientes.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight graphql"&gt;&lt;code&gt;&lt;span class="k"&gt;type&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="n"&gt;Hero&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="n"&gt;id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nb"&gt;ID&lt;/span&gt;&lt;span class="p"&gt;!&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="n"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nb"&gt;String&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="n"&gt;superpower&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nb"&gt;String&lt;/span&gt;&lt;span class="p"&gt;]!&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="n"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nb"&gt;String&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;

&lt;/span&gt;&lt;span class="k"&gt;type&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="n"&gt;Villain&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="n"&gt;id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nb"&gt;ID&lt;/span&gt;&lt;span class="p"&gt;!&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="n"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nb"&gt;String&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="n"&gt;sad_past&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nb"&gt;String&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="n"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nb"&gt;String&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  &lt;em&gt;Query e Mutation&lt;/em&gt;
&lt;/h4&gt;

&lt;p&gt;O GraphQL não utiliza os métodos HTTP para comunicação do que deve ser feito com os dados, em vez disso utiliza apenas o método POST para realizar suas ações. Dessa forma, o GraphQL trabalha sobre os próprios métodos para descrever os tipos de ações que devem ser realizadas. Esses métodos são os &lt;em&gt;Types&lt;/em&gt;, &lt;em&gt;Mutation e Query.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Query&lt;/em&gt; e &lt;em&gt;Mutation&lt;/em&gt; são os tipos mais básicos dentro de um &lt;em&gt;schema&lt;/em&gt;, o tipo &lt;em&gt;Query&lt;/em&gt; serve pra se definir ações de consulta dentro do GraphQL, enquanto o tipo &lt;em&gt;Mutation&lt;/em&gt; descreve ações de criação, atualização e exclusão de dados.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight graphql"&gt;&lt;code&gt;&lt;span class="k"&gt;type&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="n"&gt;Query&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="n"&gt;heros&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;Hero&lt;/span&gt;&lt;span class="p"&gt;]!&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="n"&gt;hero&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nb"&gt;ID&lt;/span&gt;&lt;span class="p"&gt;!):&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="n"&gt;hero&lt;/span&gt;&lt;span class="w"&gt;

    &lt;/span&gt;&lt;span class="n"&gt;villains&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;Villain&lt;/span&gt;&lt;span class="p"&gt;]!&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="n"&gt;villain&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nb"&gt;ID&lt;/span&gt;&lt;span class="p"&gt;!):&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="n"&gt;Villain&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;

&lt;/span&gt;&lt;span class="k"&gt;type&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="n"&gt;Mutation&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="n"&gt;addHero&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nb"&gt;String&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="n"&gt;super_power&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nb"&gt;String&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="n"&gt;Hero&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="n"&gt;addVillain&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nb"&gt;String&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="n"&gt;sad_past&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nb"&gt;String&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="n"&gt;Villain&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Vantagens e Desvantagens
&lt;/h2&gt;

&lt;p&gt;Como nem tudo são flores (😆), podemos listar algumas vantagens e desvantagens em relação à utilização do GraphQL dentro de uma aplicação:&lt;/p&gt;

&lt;h3&gt;
  
  
  Vantagens
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Diminui drasticamente a quantidade de rotas  &lt;del&gt;(geralmente há apenas uma hehe)&lt;/del&gt;
&lt;/li&gt;
&lt;li&gt;Diminui a quantidade de requisições feitas para a API&lt;/li&gt;
&lt;li&gt;Provê uma tipagem dos dados disponíveis&lt;/li&gt;
&lt;li&gt;Resolve o problema de &lt;em&gt;overfetching&lt;/em&gt;
&lt;/li&gt;
&lt;li&gt;Mais performático que o REST (Ideal para aplicações móveis)&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Desvantagens
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Maior curva de aprendizado&lt;/li&gt;
&lt;li&gt;Não utiliza os métodos HTTP além do POST&lt;/li&gt;
&lt;li&gt;Mais complexo para implementar cache&lt;/li&gt;
&lt;li&gt;Alta complexidade para upload de arquivos&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Cabe sempre ao desenvolvedor, ou mesmo ao time de desenvolvedor analisar se as vantagens da implantação de uma ferramenta compensam as desvantagens e desafios que serão trazidos junto.&lt;/p&gt;

&lt;h2&gt;
  
  
  Quando usar?
&lt;/h2&gt;

&lt;p&gt;Não há uma regra de quando o GraphQL deve ser utilizado numa aplicação, porém ele possui grande potencial em aplicações que lidam com grandes quantidades de dados, ou ainda que possuam problemas de &lt;em&gt;overfething.&lt;/em&gt; Utilizar o GraphQL significa diminuir drasticamente a quantidade de dados trafegada entre a API e o Cliente tornando muito mais rápida essa comunicação.&lt;/p&gt;

&lt;p&gt;O GraphQL tem ainda um grande potencial quando utilizado dentro de arquiteturas com microserviços, criando uma interface unificada de comunicação.&lt;/p&gt;

&lt;p&gt;Em resumo, não há um cenário específico em que ele possa ser usado, ele possui problemas assim como qualquer ferramenta, mas pode ajudar bastante quando se precisa ter um controle melhor dos dados trazidos de uma API.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;(Não existe bala de prata)&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Referências
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://graphql.org/"&gt;GraphQL&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://graphql.org/learn/best-practices/"&gt;GraphQL Best Practices&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://devopedia.org/graphql"&gt;GraphQL - Devopedia&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Methods"&gt;Métodos de requisição HTTP&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.howtographql.com/"&gt;The Fullstack Tutorial for GraphQL&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://medium.com/trainingcenter/graphql-aprendendo-na-pr%C3%A1tica-569a6866065b"&gt;GraphQL — Aprendendo na prática&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://www.youtube.com/watch?v=oD8GqurXZ-0&amp;amp;feature=youtu.be&amp;amp;ab_channel=Rocketseat"&gt;GraphQL aplicado no Node.js | Diego Fernandes&lt;/a&gt; &lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>graphql</category>
      <category>architecture</category>
      <category>beginners</category>
      <category>pt</category>
    </item>
  </channel>
</rss>
