Queries, Edges (conexiones) y Nodos en Gatsby

Clase 14 de 33Curso de Desarrollo de Aplicaciones Web con Gatsby JS

Resumen

Al trabajar con plugins de fuente de datos debemos entender dos conceptos:

  • Edges: No podemos consumir la información de estos plugins de la misma forma que otras consultas de GraphQL. En estos casos, la propiedad edges nos hace referencia a la conexión entre estos plugins y el servidor de GraphQL.
  • Nodos: Son los elementos individuales de información que obtenemos al hacer una consulta con la propiedad edges.

Por ejemplo: Para conseguir la información del nuestras imágenes (guardadas en la carpeta src/images) usamos el plugin gatsby-source-filesystem.

En este caso podemos acceder a la información de nuestras imágenes con la siguiente consulta de GraphQL:

query {
  allFile {
    edges {
      node {
         name
         relativePath
      }
    }
  }
}

Recuerda que la ruta que obtenemos con la propiedad relativePath es relativa a la propiedad path de nuestra configuración del plugin gatsby-source-filesystem en el archivo gatsby-config.js.

Otro ejemplo: Podemos acceder a la metadata que configuramos en el archivo gatsby-config.js ejecutando la siguiente consulta en GraphQL:

query {
  allSite {
    edges {
      node {
        siteMetadata {
          title
          description
          author
        }
      }
    }
  }
}