{"id":1334,"date":"2019-09-06T11:11:40","date_gmt":"2019-09-06T14:11:40","guid":{"rendered":"https:\/\/felipeelia.com.br\/?p=1334"},"modified":"2019-09-06T19:15:32","modified_gmt":"2019-09-06T22:15:32","slug":"gatsbyjs-e-wordpress-entendendo-o-basico","status":"publish","type":"post","link":"https:\/\/felipeelia.com.br\/gatsbyjs-e-wordpress-entendendo-o-basico\/","title":{"rendered":"GatsbyJS e WordPress: entendendo o b\u00e1sico"},"content":{"rendered":"\n<p>Depois de falar sobre a <a href=\"https:\/\/felipeelia.com.br\/a-api-rest-do-wordpress\/\">API REST do WordPress<\/a> e sobre <a href=\"https:\/\/felipeelia.com.br\/o-que-e-wordpress-headless\/\">o que \u00e9 WordPress Headless<\/a>, acho que \u00e9 hora de mostrar alguma coisa mais pr\u00e1tica. Como eu comentei l\u00e1 no <a href=\"https:\/\/twitter.com\/felipe_elia\/status\/1166427364471037953\">meu twitter<\/a>, assisti a alguns v\u00eddeos, dei uma lida na documenta\u00e7\u00e3o do Gatsby e, olha&#8230; que neg\u00f3cio legal!<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<p class=\"responsive-video-wrap clr\"><iframe loading=\"lazy\" title=\"GatsbyJS e WordPress: o b\u00e1sico\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/W48eHfkwtlo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">O que \u00e9 Gatsby?<\/h2>\n\n\n\n<p><strong>O Gatsby \u00e9 um framework baseado em React para a cria\u00e7\u00e3o de sites e aplicativos est\u00e1ticos.<\/strong> Ele \u00e9 um programa livre e de c\u00f3digo aberto (sim, s\u00e3o dois conceitos diferentes, um dia eu falo disso), ent\u00e3o \u00e9 s\u00f3 baixar para come\u00e7ar a usar.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"239\" src=\"https:\/\/felipeelia.com.br\/wp-content\/uploads\/2019\/09\/gatsby.gif\" alt=\"\" class=\"wp-image-1347\"\/><figcaption>Esse aqui \u00e9 outro Gatsby.<\/figcaption><\/figure><\/div>\n\n\n\n<p>Para criar p\u00e1ginas com conte\u00fados geridos por outras ferramentas, como o WordPress, por exemplo, o Gatsby usa GraphQL. Assim com o SQL, <strong>o GraphQL \u00e9 uma linguagem de consulta<\/strong> (<em>Query Language<\/em>), onde voc\u00ea faz uma solicita\u00e7\u00e3o e o servidor responde com os dados correspondentes.<\/p>\n\n\n\n<p>O jeito mais comum de consultar uma API com GraphQL \u00e9 atrav\u00e9s do protocolo HTTP, por isso <strong>\u00e9 muito comum compararmos GraphQL com a REST<\/strong>. As diferen\u00e7as, basicamente, s\u00e3o:<\/p>\n\n\n\n<ul><li>A API REST sempre retorna as mesmas coisas. <strong>Ao usar uma rota no REST, voc\u00ea sempre receber\u00e1 todos os dados<\/strong>, n\u00e3o h\u00e1 op\u00e7\u00e3o para modificar a resposta;<\/li><li><strong>Com GraphQL voc\u00ea faz a solicita\u00e7\u00e3o com o formato e campos de resposta desejados<\/strong>, ou seja, se voc\u00ea quer s\u00f3 o ID e o t\u00edtulo dos posts, a lista vem s\u00f3 com estes dados.<\/li><\/ul>\n\n\n\n<p>O WordPress ainda n\u00e3o tem suporte nativo para GraphQL, mas para casos b\u00e1sicos o Gatsby faz bem o meio de campo. Para casos mais complicados, j\u00e1 existe um <a href=\"https:\/\/www.wpgraphql.com\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"plugin (abre em uma nova aba)\">plugin<\/a> para ajudar.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Como criar uma instala\u00e7\u00e3o do Gatsby<\/h2>\n\n\n\n<p>Se voc\u00ea j\u00e1 tem o Node.js instalado <strong>\u00e9 s\u00f3 rodar UM comando<\/strong>. Se ainda n\u00e3o tem, assista a <a href=\"https:\/\/www.youtube.com\/watch?v=dD42BsrxGls\">esse v\u00eddeo aqui onde eu falo sobre ele e o NVM<\/a>. O comando \u00e9 este aqui:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npx gatsby new<\/code><\/pre>\n\n\n\n<p>Com isso voc\u00ea est\u00e1 pedindo que o NPX (o <em>package runner<\/em> que j\u00e1 vem com o NPM desde a vers\u00e3o 5.2) encontre ou baixe temporariamente a <abbr title=\"Command Line Interface, ou Interface de linha de comando\">CLI<\/abbr> do Gatsby e execute o comando <code>new<\/code>. Este comando pergunta para voc\u00ea qual ser\u00e1 o nome da pasta do projeto e com qual modelo voc\u00ea quer usar. Dentro desta pasta o Gatsby vai baixar o <em>starter<\/em> escolhido, como o <a rel=\"noreferrer noopener\" aria-label=\"padr\u00e3o (abre em uma nova aba)\" href=\"https:\/\/github.com\/gatsbyjs\/gatsby-starter-default\" target=\"_blank\">padr\u00e3o<\/a>, por exemplo, e executar automaticamente um <code>npm install<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"771\" height=\"155\" src=\"https:\/\/felipeelia.com.br\/wp-content\/uploads\/2019\/09\/image.png\" alt=\"\" class=\"wp-image-1354\" srcset=\"https:\/\/felipeelia.com.br\/wp-content\/uploads\/2019\/09\/image.png 771w, https:\/\/felipeelia.com.br\/wp-content\/uploads\/2019\/09\/image-300x60.png 300w, https:\/\/felipeelia.com.br\/wp-content\/uploads\/2019\/09\/image-768x154.png 768w\" sizes=\"(max-width: 771px) 100vw, 771px\" \/><figcaption>Criando uma nova instala\u00e7\u00e3o do Gatsby pela linha de comando.<\/figcaption><\/figure><\/div>\n\n\n\n<p>Voc\u00ea pode criar a pasta, baixar um outro starter e executar o <code>npm install<\/code> por conta pr\u00f3pria tamb\u00e9m. Al\u00e9m disso, o comando <code>new<\/code> possui alguns par\u00e2metros que permitem automatizar a instala\u00e7\u00e3o, passando o nome da pasta como par\u00e2metro ou o endere\u00e7o do <em>starter<\/em>.<\/p>\n\n\n\n<p>Depois que o Gatsby baixar o <em>starter<\/em> e executar o npm install, voc\u00ea estar\u00e1 de volta ao terminal. Ent\u00e3o \u00e9 s\u00f3 executar:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npx gatsby develop<\/code><\/pre>\n\n\n\n<p>Este comando sobe um servidor de desenvolvimento, que voc\u00ea pode acessar  em <code>http:\/\/localhost:8000\/<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"531\" height=\"539\" src=\"https:\/\/felipeelia.com.br\/wp-content\/uploads\/2019\/09\/site-em-gatsby.gif\" alt=\"\" class=\"wp-image-1355\"\/><figcaption>Site em Gatsby usando o <em>starter<\/em> padr\u00e3o.<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">O b\u00e1sico do Gatsby<\/h2>\n\n\n\n<p>A estrutura dentro da pasta do Gatsby vai ser mais ou menos assim:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"359\" height=\"589\" src=\"https:\/\/felipeelia.com.br\/wp-content\/uploads\/2019\/08\/image-2.png\" alt=\"\" class=\"wp-image-1339\" srcset=\"https:\/\/felipeelia.com.br\/wp-content\/uploads\/2019\/08\/image-2.png 359w, https:\/\/felipeelia.com.br\/wp-content\/uploads\/2019\/08\/image-2-183x300.png 183w\" sizes=\"(max-width: 359px) 100vw, 359px\" \/><figcaption>Estrutura de pastas e arquivos de um projeto simples do Gatsby.<\/figcaption><\/figure><\/div>\n\n\n\n<p>A coisa mais importante neste momento \u00e9 a pasta <code>src<\/code>. Dentro dela, \u00e9 poss\u00edvel ver a pasta <code>pages<\/code>. Cada arquivo <code>.js<\/code> nesta pasta criar\u00e1 uma p\u00e1gina no site, portanto temos <code>http:\/\/localhost:8000\/<\/code>, <code>http:\/\/localhost:8000\/page-2<\/code> e um arquivo para p\u00e1ginas n\u00e3o encontradas. Lembrando que estas p\u00e1ginas n\u00e3o tem absolutamente nenhuma rela\u00e7\u00e3o com o WordPress!<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Cada arquivo .js na pasta <code>src\/pages<\/code> ser\u00e1 uma nova p\u00e1gina do site Gatsby.<\/p><\/blockquote>\n\n\n\n<p>A pasta <code>components<\/code> cont\u00e9m as partes reutiliz\u00e1veis. Cabe\u00e7alhos, rodap\u00e9s, barras laterais, todo esse tipo de coisa fica ali dentro e \u00e9 importado nas p\u00e1ginas quando necess\u00e1rio.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"361\" height=\"235\" src=\"https:\/\/felipeelia.com.br\/wp-content\/uploads\/2019\/08\/image-3.png\" alt=\"\" class=\"wp-image-1340\" srcset=\"https:\/\/felipeelia.com.br\/wp-content\/uploads\/2019\/08\/image-3.png 361w, https:\/\/felipeelia.com.br\/wp-content\/uploads\/2019\/08\/image-3-300x195.png 300w\" sizes=\"(max-width: 361px) 100vw, 361px\" \/><figcaption>Componentes s\u00e3o os elementos reutiliz\u00e1veis do site. Neste caso s\u00e3o componentes React.<\/figcaption><\/figure><\/div>\n\n\n\n<p>O servidor tem <em>hot reloading<\/em> configurado, ent\u00e3o \u00e9 s\u00f3 alterar algum arquivo js que a mudan\u00e7a aparece no navegador na mesma hora.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/felipeelia.com.br\/wp-content\/uploads\/2019\/09\/gatsby-hot-reload.gif\" alt=\"\"\/><figcaption><em>Hot reloading<\/em> do Gatsby em a\u00e7\u00e3o: ao salvar, o navegador \u00e9 atualizado automaticamente.<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Gatsby e WordPress<\/h2>\n\n\n\n<p>Depois de brincar um pouco com o Gatsby puro, <strong>\u00e9 hora de trazer o WordPress para a dan\u00e7a<\/strong>. <\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Toda vez que precisamos que o Gatsby consulte dados externos, podemos usar um plugin de <em>source<\/em>.<\/p><\/blockquote>\n\n\n\n<p>Existe plugin pronto de <em>source<\/em> para quase tudo: WordPress, Trello, Google Photos, arquivos do sistema, etc.<\/p>\n\n\n\n<p>A documenta\u00e7\u00e3o tem uma p\u00e1gina explicando <a rel=\"noreferrer noopener\" aria-label=\"como configurar o plugin de source do WordPress (abre em uma nova aba)\" href=\"https:\/\/www.gatsbyjs.org\/docs\/sourcing-from-wordpress\/\" target=\"_blank\">como configurar o plugin de source do WordPress<\/a>. Eu peguei um exemplo pronto e adaptei, mas voc\u00ea pode ir desde o come\u00e7o com o texto deles.<\/p>\n\n\n\n<p>O <em>starter<\/em> que eu usei de modelo est\u00e1 <a rel=\"noreferrer noopener\" aria-label=\"neste endere\u00e7o (abre em uma nova aba)\" href=\"https:\/\/github.com\/gatsbyjs\/gatsby\/tree\/master\/examples\/using-wordpress\" target=\"_blank\">neste endere\u00e7o<\/a>. Como baixar s\u00f3 uma pasta de um reposit\u00f3rio \u00e0s vezes \u00e9 complicado, voc\u00ea pode usar esta ferramenta <a href=\"https:\/\/minhaskamal.github.io\/DownGit\/#\/home\">aqui<\/a> para facilitar. Resumindo, \u00e9 s\u00f3:<\/p>\n\n\n\n<ul><li>Acessar o <a href=\"https:\/\/minhaskamal.github.io\/DownGit\/#\/home\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (abre em uma nova aba)\">DownGit<\/a>;<\/li><li>Colocar o endere\u00e7o do <em>starter<\/em> de exemplo: <code>https:\/\/github.com\/gatsbyjs\/gatsby\/tree\/master\/examples\/using-wordpress<\/code>;<\/li><li>Extrair o conte\u00fado do zip;<\/li><li>Entrar na pasta e executar <code>npm install<\/code>.<\/li><\/ul>\n\n\n\n<p>Por padr\u00e3o, o <em>starter<\/em> vem apontando para uma instala\u00e7\u00e3o do WordPress que pertence ao Gatsby e d\u00e1 um monte de erro se voc\u00ea executar o <code>npx gatsby develop<\/code> para subir o servidor. \u00c9 preciso alterar algumas coisas na configura\u00e7\u00e3o para apontar para outra instala\u00e7\u00e3o do WP e, a\u00ed sim, fazer funcionar. Vou deixar aqui a lista de mudan\u00e7as que eu tive que fazer:<\/p>\n\n\n\n<ul><li>No arquivo <code>gatsby-config.js<\/code>, altere os valores de <code>baseUrl<\/code> e <code>useACF<\/code> no plugin <code>gatsby-source-wordpress<\/code>;<\/li><li>No arquivo <code>src\/templates\/post.js<\/code>, ache a vari\u00e1vel <code>pageQuery<\/code> e tire toda a parte relativa ao <code>acf<\/code>;<\/li><li>Crie pelo menos uma tag no WordPress e associe a pelo menos um post e<\/li><li>Tenha certeza de que o endere\u00e7o <code>\/wp-json<\/code> est\u00e1 funcionando.<\/li><\/ul>\n\n\n\n<p>Depois disso, voc\u00ea pode rodar o <code>npx gatsby develop<\/code> e ver o site Gatsby em a\u00e7\u00e3o no <code>http:\/\/localhost:8000\/<\/code>, listando suas p\u00e1ginas e posts.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"764\" height=\"828\" src=\"https:\/\/felipeelia.com.br\/wp-content\/uploads\/2019\/09\/screenshot-localhost_8000-2019-09-03-20_14_32.png\" alt=\"\" class=\"wp-image-1350\" srcset=\"https:\/\/felipeelia.com.br\/wp-content\/uploads\/2019\/09\/screenshot-localhost_8000-2019-09-03-20_14_32.png 764w, https:\/\/felipeelia.com.br\/wp-content\/uploads\/2019\/09\/screenshot-localhost_8000-2019-09-03-20_14_32-277x300.png 277w, https:\/\/felipeelia.com.br\/wp-content\/uploads\/2019\/09\/screenshot-localhost_8000-2019-09-03-20_14_32-738x800.png 738w\" sizes=\"(max-width: 764px) 100vw, 764px\" \/><figcaption>Site em Gatsby listando o conte\u00fado do site WordPress<\/figcaption><\/figure><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<h3 class=\"wp-block-heading\">Como a m\u00e1gica acontece<\/h3>\n\n\n\n<p>Para entendermos um pouco de como a m\u00e1gica acontece, \u00e9 preciso olhar o arquivo <code>gatsby-node.js<\/code>. <\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"275\" height=\"252\" src=\"https:\/\/felipeelia.com.br\/wp-content\/uploads\/2019\/09\/magic.gif\" alt=\"\" class=\"wp-image-1349\"\/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>Neste arquivo existem duas coisas importantes: a consulta que o Gatsby faz para saber quais s\u00e3o as p\u00e1ginas e posts do WP e o <code>forEach<\/code> que ele usa para cada um. Veja aquele <code>allWordpressPost<\/code> dentro da chamada para <code>graphql()<\/code> e depois a itera\u00e7\u00e3o sobre ele com:<\/p>\n\n\n\n<pre class=\"wp-block-code js\"><code>const postTemplate = path.resolve(`.\/src\/templates\/post.js`)\nallWordpressPost.edges.forEach(edge => {\n\tcreatePage({\n\t\tpath: `\/${edge.node.slug}\/`,\n\t\tcomponent: slash(postTemplate),\n\t\tcontext: {\n\t\t\tid: edge.node.id,\n\t\t},\n\t})\n})<\/code><\/pre>\n\n\n\n<p>Ou seja, o Gatsby vai pegar cada post, criar um caminho din\u00e2mico com o slug (poder\u00edamos colocar <code>path: \/post\/${edge.node.slug}\/<\/code>, para ficar diferente das p\u00e1ginas) e usar o arquivo <code>src\/templates\/post.js<\/code> para exibi-lo.<\/p>\n\n\n\n<p>No arquivo <code>src\/templates\/post.js<\/code> temos, l\u00e1 no final, uma query para pegar os dados do post. Pelo meio do c\u00f3digo temos refer\u00eancias para <code>post.title<\/code>, <code>post.content<\/code>, etc., que ser\u00e3o substitu\u00eddos pelos dados reais do post. Voc\u00ea pode montar a sua pr\u00f3pria query usando a interface gr\u00e1fica do Gatsby acessando <code>http:\/\/localhost:8000\/___graphql<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/felipeelia.com.br\/wp-content\/uploads\/2019\/09\/gatsby-graphql-wordpress.gif\" alt=\"\"\/><figcaption>Graph<em>i<\/em>QL: A interface gr\u00e1fica dispon\u00edvel para montar consultas mais facilmente.<\/figcaption><\/figure><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-style-large is-layout-flow wp-block-quote-is-layout-flow\"><p>Mas eu alterei o post no WordPress e n\u00e3o mudou no Gatsby!<\/p><\/blockquote>\n\n\n\n<p>Ent\u00e3o, tem algo importante aqui. <strong>O Gatsby s\u00f3 consulta os dados do WordPress no momento em que voc\u00ea sobe o servidor ou no momento em que voc\u00ea decide montar o pacote de produ\u00e7\u00e3o<\/strong>, executando <code>npm run build<\/code>. Depois isso tudo fica armazenado no pr\u00f3prio Gatsby.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>Um exemplo pr\u00e1tico onde voc\u00ea pode usar o Gatsby com WordPress \u00e9 um blog onde o WP fica, por exemplo, em <code>admin.dominio.com<\/code> e s\u00f3 \u00e9 acess\u00edvel para o cliente. O conte\u00fado do WP alimenta o site est\u00e1tico <code>dominio.com<\/code>, tendo este pacote est\u00e1tico gerado toda vez que algu\u00e9m cria um post novo. O site do <code>dominio.com<\/code> vai ser MUITO r\u00e1pido e o WordPress pode ter uma regra de acesso que permite s\u00f3 atrav\u00e9s de determinados endere\u00e7os de IP.<\/p>\n\n\n\n<p>Estudar um pouquinho do Gatsby me fez sentir aquela alegria de aprender uma coisa nova, aquela coisa boa de explorar o desconhecido e ir conseguindo avan\u00e7ar. Recomendo demais essa experi\u00eancia. \u00c9 um jeito muito legal de sair da nossa zona de conforto e ter contato com tecnologias diferentes!<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"610\" height=\"350\" src=\"https:\/\/felipeelia.com.br\/wp-content\/uploads\/2019\/09\/clap.gif\" alt=\"\" class=\"wp-image-1351\"\/><figcaption>Este post ficou gigante, ent\u00e3o se voc\u00ea chegou at\u00e9 aqui, voc\u00ea merece PARAB\u00c9NS!<\/figcaption><\/figure><\/div>\n\n\n\n<p>N\u00e3o se esque\u00e7a de comentar e compartilhar com os seus amigos nas redes sociais. Se notou alguma informa\u00e7\u00e3o errada por aqui, \u00e9 s\u00f3 avisar!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Entenda o b\u00e1sico do Gatsby e veja como ele funciona consumindo dados de uma instala\u00e7\u00e3o do WordPress com a API REST e GraphQL.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[30],"tags":[104],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.9.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>GatsbyJS e WordPress: entendendo o b\u00e1sico | Felipe Elia<\/title>\n<meta name=\"description\" content=\"Entenda o b\u00e1sico do Gatsby e veja como ele funciona consumindo dados de uma instala\u00e7\u00e3o do WordPress com a API REST e GraphQL.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/felipeelia.com.br\/gatsbyjs-e-wordpress-entendendo-o-basico\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"GatsbyJS e WordPress: entendendo o b\u00e1sico | Felipe Elia\" \/>\n<meta property=\"og:description\" content=\"Entenda o b\u00e1sico do Gatsby e veja como ele funciona consumindo dados de uma instala\u00e7\u00e3o do WordPress com a API REST e GraphQL.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/felipeelia.com.br\/gatsbyjs-e-wordpress-entendendo-o-basico\/\" \/>\n<meta property=\"og:site_name\" content=\"Felipe Elia\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/felipe.elia\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/felipe.elia\" \/>\n<meta property=\"article:published_time\" content=\"2019-09-06T14:11:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-09-06T22:15:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/felipeelia.com.br\/wp-content\/uploads\/2019\/09\/gatsby.gif\" \/>\n<meta name=\"author\" content=\"Felipe Elia\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/felipe_elia\" \/>\n<meta name=\"twitter:site\" content=\"@felipe_elia\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Felipe Elia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/felipeelia.com.br\/gatsbyjs-e-wordpress-entendendo-o-basico\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/felipeelia.com.br\/gatsbyjs-e-wordpress-entendendo-o-basico\/\"},\"author\":{\"name\":\"Felipe Elia\",\"@id\":\"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292\"},\"headline\":\"GatsbyJS e WordPress: entendendo o b\u00e1sico\",\"datePublished\":\"2019-09-06T14:11:40+00:00\",\"dateModified\":\"2019-09-06T22:15:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/felipeelia.com.br\/gatsbyjs-e-wordpress-entendendo-o-basico\/\"},\"wordCount\":1353,\"commentCount\":9,\"publisher\":{\"@id\":\"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292\"},\"keywords\":[\"API REST\"],\"articleSection\":[\"WordPress\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/felipeelia.com.br\/gatsbyjs-e-wordpress-entendendo-o-basico\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/felipeelia.com.br\/gatsbyjs-e-wordpress-entendendo-o-basico\/\",\"url\":\"https:\/\/felipeelia.com.br\/gatsbyjs-e-wordpress-entendendo-o-basico\/\",\"name\":\"GatsbyJS e WordPress: entendendo o b\u00e1sico | Felipe Elia\",\"isPartOf\":{\"@id\":\"https:\/\/felipeelia.com.br\/#website\"},\"datePublished\":\"2019-09-06T14:11:40+00:00\",\"dateModified\":\"2019-09-06T22:15:32+00:00\",\"description\":\"Entenda o b\u00e1sico do Gatsby e veja como ele funciona consumindo dados de uma instala\u00e7\u00e3o do WordPress com a API REST e GraphQL.\",\"breadcrumb\":{\"@id\":\"https:\/\/felipeelia.com.br\/gatsbyjs-e-wordpress-entendendo-o-basico\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/felipeelia.com.br\/gatsbyjs-e-wordpress-entendendo-o-basico\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/felipeelia.com.br\/gatsbyjs-e-wordpress-entendendo-o-basico\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/felipeelia.dev\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"GatsbyJS e WordPress: entendendo o b\u00e1sico\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/felipeelia.com.br\/#website\",\"url\":\"https:\/\/felipeelia.com.br\/\",\"name\":\"Felipe Elia\",\"description\":\"Programa\u00e7\u00e3o com WordPress de um jeito f\u00e1cil, do b\u00e1sico ao avan\u00e7ado\",\"publisher\":{\"@id\":\"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/felipeelia.com.br\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-BR\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292\",\"name\":\"Felipe Elia\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/felipeelia.com.br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/felipeelia.dev\/wp-content\/uploads\/2023\/06\/avatar-400x400-1.jpg\",\"contentUrl\":\"https:\/\/felipeelia.dev\/wp-content\/uploads\/2023\/06\/avatar-400x400-1.jpg\",\"width\":400,\"height\":400,\"caption\":\"Felipe Elia\"},\"logo\":{\"@id\":\"https:\/\/felipeelia.com.br\/#\/schema\/person\/image\/\"},\"description\":\"Associate Director of Platform Engineering na 10up, WordPress Core Contributor, Global Polyglots Mentor na comunidade internacional do WordPress e Locale Manager na comunidade WordPress Brasil.\",\"sameAs\":[\"https:\/\/www.facebook.com\/felipe.elia\",\"https:\/\/www.instagram.com\/felipe.elia\/\",\"https:\/\/www.linkedin.com\/in\/felipeelia\/\",\"https:\/\/twitter.com\/https:\/\/twitter.com\/felipe_elia\",\"https:\/\/www.youtube.com\/channel\/UCD_26rOE3ClALcZreTkyIoQ\"],\"url\":\"https:\/\/felipeelia.com.br\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"GatsbyJS e WordPress: entendendo o b\u00e1sico | Felipe Elia","description":"Entenda o b\u00e1sico do Gatsby e veja como ele funciona consumindo dados de uma instala\u00e7\u00e3o do WordPress com a API REST e GraphQL.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/felipeelia.com.br\/gatsbyjs-e-wordpress-entendendo-o-basico\/","og_locale":"pt_BR","og_type":"article","og_title":"GatsbyJS e WordPress: entendendo o b\u00e1sico | Felipe Elia","og_description":"Entenda o b\u00e1sico do Gatsby e veja como ele funciona consumindo dados de uma instala\u00e7\u00e3o do WordPress com a API REST e GraphQL.","og_url":"https:\/\/felipeelia.com.br\/gatsbyjs-e-wordpress-entendendo-o-basico\/","og_site_name":"Felipe Elia","article_publisher":"https:\/\/www.facebook.com\/felipe.elia","article_author":"https:\/\/www.facebook.com\/felipe.elia","article_published_time":"2019-09-06T14:11:40+00:00","article_modified_time":"2019-09-06T22:15:32+00:00","og_image":[{"url":"https:\/\/felipeelia.com.br\/wp-content\/uploads\/2019\/09\/gatsby.gif"}],"author":"Felipe Elia","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/felipe_elia","twitter_site":"@felipe_elia","twitter_misc":{"Escrito por":"Felipe Elia","Est. tempo de leitura":"7 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/felipeelia.com.br\/gatsbyjs-e-wordpress-entendendo-o-basico\/#article","isPartOf":{"@id":"https:\/\/felipeelia.com.br\/gatsbyjs-e-wordpress-entendendo-o-basico\/"},"author":{"name":"Felipe Elia","@id":"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292"},"headline":"GatsbyJS e WordPress: entendendo o b\u00e1sico","datePublished":"2019-09-06T14:11:40+00:00","dateModified":"2019-09-06T22:15:32+00:00","mainEntityOfPage":{"@id":"https:\/\/felipeelia.com.br\/gatsbyjs-e-wordpress-entendendo-o-basico\/"},"wordCount":1353,"commentCount":9,"publisher":{"@id":"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292"},"keywords":["API REST"],"articleSection":["WordPress"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/felipeelia.com.br\/gatsbyjs-e-wordpress-entendendo-o-basico\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/felipeelia.com.br\/gatsbyjs-e-wordpress-entendendo-o-basico\/","url":"https:\/\/felipeelia.com.br\/gatsbyjs-e-wordpress-entendendo-o-basico\/","name":"GatsbyJS e WordPress: entendendo o b\u00e1sico | Felipe Elia","isPartOf":{"@id":"https:\/\/felipeelia.com.br\/#website"},"datePublished":"2019-09-06T14:11:40+00:00","dateModified":"2019-09-06T22:15:32+00:00","description":"Entenda o b\u00e1sico do Gatsby e veja como ele funciona consumindo dados de uma instala\u00e7\u00e3o do WordPress com a API REST e GraphQL.","breadcrumb":{"@id":"https:\/\/felipeelia.com.br\/gatsbyjs-e-wordpress-entendendo-o-basico\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/felipeelia.com.br\/gatsbyjs-e-wordpress-entendendo-o-basico\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/felipeelia.com.br\/gatsbyjs-e-wordpress-entendendo-o-basico\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/felipeelia.dev\/"},{"@type":"ListItem","position":2,"name":"GatsbyJS e WordPress: entendendo o b\u00e1sico"}]},{"@type":"WebSite","@id":"https:\/\/felipeelia.com.br\/#website","url":"https:\/\/felipeelia.com.br\/","name":"Felipe Elia","description":"Programa\u00e7\u00e3o com WordPress de um jeito f\u00e1cil, do b\u00e1sico ao avan\u00e7ado","publisher":{"@id":"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/felipeelia.com.br\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pt-BR"},{"@type":["Person","Organization"],"@id":"https:\/\/felipeelia.com.br\/#\/schema\/person\/927a99b6e1cde7fcf9f4f79a1638b292","name":"Felipe Elia","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/felipeelia.com.br\/#\/schema\/person\/image\/","url":"https:\/\/felipeelia.dev\/wp-content\/uploads\/2023\/06\/avatar-400x400-1.jpg","contentUrl":"https:\/\/felipeelia.dev\/wp-content\/uploads\/2023\/06\/avatar-400x400-1.jpg","width":400,"height":400,"caption":"Felipe Elia"},"logo":{"@id":"https:\/\/felipeelia.com.br\/#\/schema\/person\/image\/"},"description":"Associate Director of Platform Engineering na 10up, WordPress Core Contributor, Global Polyglots Mentor na comunidade internacional do WordPress e Locale Manager na comunidade WordPress Brasil.","sameAs":["https:\/\/www.facebook.com\/felipe.elia","https:\/\/www.instagram.com\/felipe.elia\/","https:\/\/www.linkedin.com\/in\/felipeelia\/","https:\/\/twitter.com\/https:\/\/twitter.com\/felipe_elia","https:\/\/www.youtube.com\/channel\/UCD_26rOE3ClALcZreTkyIoQ"],"url":"https:\/\/felipeelia.com.br\/author\/admin\/"}]}},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"ocean-thumb-m":false,"ocean-thumb-ml":false,"ocean-thumb-l":false,"yarpp-thumbnail":false},"uagb_author_info":{"display_name":"Felipe Elia","author_link":"https:\/\/felipeelia.com.br\/author\/admin\/"},"uagb_comment_info":9,"uagb_excerpt":"Entenda o b\u00e1sico do Gatsby e veja como ele funciona consumindo dados de uma instala\u00e7\u00e3o do WordPress com a API REST e GraphQL.","_links":{"self":[{"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/posts\/1334"}],"collection":[{"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/comments?post=1334"}],"version-history":[{"count":0,"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/posts\/1334\/revisions"}],"wp:attachment":[{"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/media?parent=1334"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/categories?post=1334"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/felipeelia.com.br\/wp-json\/wp\/v2\/tags?post=1334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}