Gatsby é um gerador de sites estáticos popular que é construído com React, e é o que eu uso para criar este blog. Com seu sistema de plugins poderoso, ele permite que os desenvolvedores adicionem facilmente recursos aos seus sites.

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

Neste post, vamos ver como adicionar endpoints da API ao Gatsby v3, modificando o arquivo gatsby-node.js.

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 ponto final 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:

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 ponto final para este post do blog:

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 pontos finais de API a um site Gatsby é uma tarefa simples, mas pode aumentar as possibilidades do 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!