Adicionar dados ao aplicativo Gatsby

Concluído

O Gatsby tem um sistema de plug-ins que examina várias fontes de dados e coloca os dados resultantes em um objeto na memória, o grafo de dados. Ele faz tudo isso no momento do build. Quando você estiver criando uma nova página, poderá presumir que os dados desse grafo estão disponíveis.

Ferramentas

O grafo de dados é algo com o qual você pode interagir. Depois de iniciar o servidor de desenvolvimento, o grafo de dados estará disponível em http://localhost:8000/___graphql. Isso renderizará o grafo de dados em uma ferramenta chamada GraphiQL.

graphiql.

O GraphiQL permite que você faça o seguinte:

  • Navegar: Faça uma busca detalhada no grafo de dados e em seu conteúdo expandindo os nós para encontrar apenas os dados de que você precisa.
  • Construir consultas: Conforme você faz uma busca detalhada no gráfico, a ferramenta criará uma consulta para você. Você também pode editar o texto da consulta como achar melhor para exibir os resultados.
  • Procurar resultados: Execute a consulta que você constrói para vê-la renderizada na ferramenta. Você saberá exatamente qual resposta uma consulta renderiza antes de se aventurar a incluí-la em um componente.

Usar dados em um componente de página

Quando você cria um componente de página que deseja usar dados do gráfico mencionado acima, há duas coisas que você fará:

  1. Definir uma consulta. Crie uma consulta na linguagem de consulta do GraphQL que solicita um recurso e algumas colunas nesse recurso.

  2. Escrever o código para executar a consulta. No arquivo de .js da página, chame a função graphql() com a consulta como uma entrada e armazene o resultado em uma variável chamada query. Aqui está um exemplo:

    export const query = graphql ("query {} ");
    

    Nomear a variável query é uma convenção importante: O Gatsby processará automaticamente a variável query, buscará os dados e os inserirá no componente do React no mesmo arquivo.

  3. Criar um componente com parâmetros que usa os dados. Crie um componente do React com um parâmetro data. Quando você compila o aplicativo, data será preenchido com a resposta da consulta. A forma do resultado é exatamente igual à consulta que você criou. Dentro da seção de renderização do componente, agora você pode ler por meio da propriedade data e fazer o layout dos dados no modelo da maneira que achar apropriada.

Um exemplo de plug-in: carregamento de imagens usando arquivos

Os dados podem ser praticamente qualquer coisa. O Gatsby ajuda você a extrair dados e colocá-los no grafo de dados usando plug-ins. O plug-in gatsby-source-filesystem examina o sistema de arquivos e preenche o gráfico de dados com base nisso. O que ele faz é examinar o sistema de arquivos em um local que especificamos e disponibilizamos os resultados no Graph. Vamos ver como esse plug-in está configurado no gatsby-config.js:

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `images`,
    path: `${__dirname}/src/images`,
  },
},

A propriedade path nos diz onde esse plug-in deve procurar arquivos. Em nosso caso, ele procura __dirname, que é o diretório de trabalho atual e, especificamente, o subdiretório /images. No momento da pré-compilação, o Gatsby agora examinará o diretório image/ e coletará informações sobre os arquivos. Ele também adicionará essas informações ao grafo de dados na memória do Gatsby.

Então, como usamos as informações sobre imagens que configuramos por meio do plug-in gatsby-source-filesystem? Como o plug-in examina o diretório images/ ele coleta informações como caminho, tipo, tamanho e dimensões. Em seguida, podemos consultar essas informações usando o grafo de dados na memória e usá-las para renderizar a imagem por meio de seu caminho armazenado no grafo. Além disso, podemos executar várias manipulações de imagem na imagem antes de exibi-las, como a escala, por exemplo. A funcionalidade de manipulação de imagem é algo criado no Gatsby e não é fornecido pelo plug-in. No entanto, a funcionalidade interna e esse plug-in funcionam mesmo em conjunto, a fim de que o trabalho com ativos de imagem seja uma ótima experiência.

Quaisquer plug-ins adicionais adicionados ao Gatsby seguem este padrão:

  1. Baixe os plug-ins via NPM.
  2. Configure o plug-in por meio do arquivo gatsby-config.js.