Mantendo o estado entre as páginas com o estado local em Gatsby.js

Thomas Weibenfalk em Level Up Your Code Seguir 11 de jun · 4 min ler Foto de Anas Alshanti em Unsplash

O problema"

Ao usar o gerador de site estático Gatsby, você não tem um componente básico "App" para brincar. Dito isso, não há nenhum componente que envolva todo o seu aplicativo, onde você pode colocar seu estado que precisa ser mantido entre as rotas / páginas. Gatsby.js automaticamente (ou automagicamente?) Cria rotas para páginas que você coloca em sua pasta de páginas de sua instalação. Ou você cria páginas programaticamente a partir do seu arquivo gatsby-node.js .

Isso nos causará problemas se precisarmos, por exemplo, de um menu que deve estar visível e disponível para interação em todas as rotas de nossa página. No meu caso, eu tinha um menu de formulário de correio que poderia ser mostrado ou escondido no canto inferior direito do meu aplicativo. Este componente tem um estado local que decidirá se o componente está sendo mostrado ou não. Abaixo a imagem mostra o menu fechado e aberto.

Então, este é o nosso problema. Como podemos lidar com isso? Há várias maneiras de lidar com isso, mas uma maneira e a abordagem que eu tomei são descritas abaixo.

A solução

Eu vou direto ao ponto. O Gatsby tem um arquivo chamado gatsby-browser.js. Podemos usar este arquivo para fazer com que os componentes envolvam nosso aplicativo e páginas completos!

Isso é ótimo!

Este arquivo nos permite usar a API do Gatsby Browser. Essa API contém várias funções úteis, mas há uma em particular que atende às nossas necessidades. É chamado de wrapPageElement. Confira o código abaixo. Este é o código real que usei para o aplicativo do meu cliente.

Aqui, criei um componente wrapper que estará disponível em todas as rotas e páginas do Gatsby. Fantástico! E apenas o que precisamos. O componente wrapper é assim:

Este é um Componente de Reação muito simples, cuja única função é envolver nosso aplicativo e fornecê-lo com o componente MailWidget. Mas como funciona o wrapPageElement ?

wrapPageElement

Primeiro, eu também recomendo usar o gatsbyjs.org o máximo que puder para encontrar respostas para qualquer coisa relacionada ao Gatsby. O site é excelente e cheio de explicações muito boas e completas da maioria dos problemas que você encontrará.

Em nosso caso, se você observar o código acima, teremos dois parâmetros criados para nós na função de retorno de chamada wrapPageElement : element e props. Você deve estar familiarizado com adereços se você usar o React para que eles não precisem de mais introdução. Neste caso, os adereços são usados pela página em que estamos atualmente. Nós não precisamos usar nenhum desses adereços, pois só precisamos usar os filhos (criados automaticamente pelo React) prop. O MailWidgetWrapper apenas renderiza os filhos e o MailWidget . Os filhos são a página que estamos enviando para o componente MailWidgetWrapper do arquivo gatsby-browser.js, conforme mostrado abaixo. A página atual mora no parâmetro do elemento e é essa que estamos enviando com a expressão {element} .

 <MailWidgetWrapper {… props}> {element} </ MailWidgetWrapper> 

Então, em suma, os parâmetros que obtemos de wrapPageElement podem ser resumidos:

O parâmetro props são os adereços da página atual em que estamos. E o parâmetro do elemento é a página atual em que estamos