Exercício – Adicionar dados ao aplicativo Gatsby

Concluído

As funcionalidades de consulta do Gatsby permitem que você compile um site estático usando dados coletados de diversas fontes distintas.

Aqui, você criará uma consulta para capturar alguns dados de um arquivo de configuração e renderizá-los em uma página.

Adicionar dados ao componente

A maneira como você trabalha com os dados no Gatsby é eficiente. O Gatsby pode consultar dados de praticamente qualquer lugar, de seus arquivos, de dados estáticos e até mesmo de dados dos pontos de extremidade de API e bancos de dados. Para consultar dados, usaremos o GraphQL.

gatsby-config.js é onde você armazena metadados para o site juntamente com as configurações dos plug-ins em um objeto JavaScript. Há uma propriedade nesse objeto JavaScript chamado siteMetadata. Essa propriedade, juntamente com os respectivos valores, é lida no grafo de dados como parte do processo de build e é armazenada em um nó chamado site. Você verá como a consulta de dados funciona, construindo um componente About para consultar o título e a descrição.

Veja abaixo uma descrição da aparência da propriedade siteMetadata:

siteMetadata: {
  title: `Gatsby Default Starter`,
  description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
  author: `@gatsbyjs`,
}

Podemos construir uma consulta fornecida acima, ler os dados e fazer com que um componente a renderize.

Iniciar o servidor de desenvolvimento

Inicie o servidor de desenvolvimento digitando o seguinte comando na raiz do projeto:

gatsby develop

Agora você deve ter duas rotas em funcionamento:

  • http://localhost:8000/, no qual seu aplicativo é renderizado
  • http://localhost:8000/___graphql, no qual o grafo de dados interno é exibido com GraphiQL

Construir uma consulta

Acesse http://localhost:8000/___graphql no navegador para que você possa obter ajuda para criar a consulta.

Consulta do Gatsby.

Na imagem acima, você pode ver a seção Explorer à esquerda. Você pode usar o Explorer para fazer uma busca detalhada em nosso Graph até encontrar os dados de que precisamos. Na seção do meio, é possível ver como a consulta é gravada para você enquanto realiza seleções à esquerda. À direita, será exibido o resultado da execução da consulta. Você poderá executar a consulta clicando no botão executar na seção do meio.

Selecione a seguinte consulta construída na seção do meio:

site {
  siteMetadata {
    author,
    description,
    title
  }
}

Copie-o para a área de transferência.

Volte para o editor e localize o arquivo about.js no diretório pages/. Altere o conteúdo para o código seguinte:

import React from 'react';
import { Link, graphql } from 'gatsby';

export default ({ data }) => (
  <React.Fragment>
    <h2>{data.site.siteMetadata.title}</h2>
    <div>{data.site.siteMetadata.description}</div>
    <Link to="/">Back to home</Link>
  </React.Fragment>
)

export const query = graphql `
  query {
    site {
      siteMetadata {
        author,
        description,
        title
      }
    }
  }
`

Aqui, você está chamando a função graphql usando a consulta como um argumento e atribuindo-a à variável query. É importante que ela seja chamada de query para que o Gatsby saiba processá-la e colocar o resultado no componente e no tempo de build.

Durante o tempo de build, o Gatsby inserirá o resultado da consulta na propriedade data do componente, conforme indicado abaixo, no qual você poderá referenciá-lo usando o JSX do componente.

Salve o arquivo e navegue até http://localhost:8000/about e você verá o seguinte:

Componente de página com os dados.

Você adicionou dados ao componente com uma consulta do GraphQL! Você também precisa usar a ferramenta de consulta GraphiQL e o servidor de desenvolvimento Gatsby no processo.