Gatsby é um gerador de sites estáticos popular que é construído com React, e é o que eu uso para criar este blog. Ele tem um sistema de plugins que deixa bem fácil adicionar recursos no seu site.

Uma característica que pode ser adicionada são os endpoints da API, que podem ser usados para servir dados JSON ao cliente.

Eu adicionei endpoints de API no meu blog em Gatsby v3 modificando o arquivo gatsby-node.js, e é assim que eu fiz.

Primeiro post de 2023, vamos lá!!

O problema#

Em um site feito com Gatsby, os dados usados para construir as páginas geralmente são provenientes de uma variedade de fontes, como arquivos Markdown ou um headless CMS.

No meu caso, todos os meus posts vêm de arquivos Markdown, e eu tenho alguns scripts personalizados para corresponder a posts relacionados, obter comentários do post do blog, etc.

Como todos os meus dados estão armazenados “offline”, se eu quiser acessá-los em outra aplicação, eu teria que praticamente raspar o meu próprio site e isso não é bom.

A solução#

Se eu criar um endpoint de API para o meu blog, então posso expor todos os dados que atualmente já são públicos e exibidos como HTML, mas fornecer como dados “brutos” JSON.

Para adicionar endpoints da API a um site feito com Gatsby, precisamos aproveitar o método de ciclo de vida onPostBuild no arquivo gatsby-node.js. Este método é chamado depois que o site foi construído e nos permite realizar ações adicionais, como criar arquivos JSON.

Como eu faço muitos scripts personalizados em todas as minhas páginas, estamos usando uma variável global chamada jsonFiles que será preenchida dinamicamente com dados da função onCreatePage.

Isso será usado para armazenar os dados que queremos usar para criar os arquivos JSON e, em seguida, percorrer cada caminho no objeto jsonFiles e usar a ação createPage para criar uma nova página para cada caminho.

Aqui está um exemplo de como estou fazendo isso:

javascript
const { writeFileSync } = require('fs');
const jsonFiles = {};

exports.onCreatePage = ({ page }) => {
    jsonFiles[page.path] = page.context.data;
}

exports.onPostBuild = () => {
    Object.entries(jsonFiles).map(([filePath, content]) => {
        const fileFullPath = path.resolve(
            __dirname,
            'public',
            ...filePath.split('/').filter((part) => part)
        );

        writeFileSync(fileFullPath, JSON.stringify(content));
    });
}

Consumindo os dados dos endpoints da API#

Agora que os endpoints da API foram criados, o próximo passo é consumir os dados do lado do cliente. Isso pode ser feito usando a função fetch().

Aqui está um exemplo de como usar fetch() para obter os dados do endpoint deste post do blog:

javascript
fetch('https://pablo.gg/pt-br/blog/coding/criando-api-endpoints -para-o-meu-blog-em-gatsby.json')
    .then((response) => response.json())
    .then((data) => {
      console.log(data);
      // { comments: [], html: '<p>..</p>', language: 'pt-br', path: 'blog-path', postHashId: 'hash', relatedPosts: [], title: 'Titulo' }
    })
    .catch((error) => console.log(error))

Conclusão#

Adicionar endpoints de API a um site Gatsby é uma tarefa simples, mas abre um monte de possibilidades pro seu site.

Em breve (espero) compartilharei o que planejo fazer com minha própria API 👀

Isso é tudo que tenho para vocês hoje, até a próxima!