Queries, Edges (conexiones) y Nodos en Gatsby
Clase 14 de 33 • Curso de Desarrollo de Aplicaciones Web con Gatsby JS
Contenido del curso
Preparando el entorno
Fundamentos de Gatsby
Creando la vista con React
Graphql en Gatsby
Usando plugins en Gatsby
Stripe checkout
Generando páginas programáticamente
- 24

Creando páginas en función de los datos
08:57 min - 25

Manejo de Gatsby Templates
13:39 min - 26

Terminando la Vista de Detalle de los Productos
05:58 min - 27

StaticQuery vs. useStaticQuery
03:23 min - 28

Construyendo el Carrito de Compras: useContext
08:18 min - 29

Construyendo el Carrito de Compras: Vista
09:22 min - 30

Construyendo el Carrito de Compras: Agregar productos al carrito
08:44 min - 31

Comprando productos
08:34 min
Gatsby a producción
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 propiedadedgesnos 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 propiedadedges.
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
}
}
}
}
}