No entiendo la diferencia entre primero llamar por edges o hacerlo directo sin poner edges y usar nodes
allFile {
nodes {
name,
relativePath
}
}
¿Diferencia entre el query escrito en el video y este query anterior?
Introducción a Gatsby
¿Por qué Gatsby? Seguridad y Velocidad
¿Qué es Gatsby?
Diferencias entre SPA, SSR y Gatsby
Preparando el entorno
Requisitos previos y herramientas de desarrollo
Gatsby y Gatsby CLI y Starters
Configuración de ESLint
Fundamentos de Gatsby
Presentación y Estructura de Archivos de nuestro proyecto: Platziswag
Ecosistema de plugins
Usando React para manejar la parte visual e interactiva de nuestra aplicación
Creando la vista con React
Router en Gatsby y Componente Link
Layout en Gatsby
Graphql en Gatsby
¿Cómo funciona GraphQL en Gatsby?
Accediendo a nuestros datos en Gatsby desde GraphQL
Queries, Edges (conexiones) y Nodos en Gatsby
Consultas en GraphQL desde React
Usando plugins en Gatsby
Instalación y configuración de plugins
Imágenes como fuente de datos
Plugins de transformación
Estilizando nuestros componentes con styled-components
Estilos Globales con styled-components
Stripe checkout
Introducción a la API de Stripe Checkout
Agregando productos a nuestra tienda en línea
Productos en React
Generando páginas programáticamente
Creando páginas en función de los datos
Manejo de Gatsby Templates
Terminando la Vista de Detalle de los Productos
StaticQuery vs. useStaticQuery
Construyendo el Carrito de Compras: useContext
Construyendo el Carrito de Compras: Vista
Construyendo el Carrito de Compras: Agregar productos al carrito
Comprando productos
Gatsby a producción
Gatsby build para compilar nuestro proyecto
Deploy a Netlify
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Queries, Edges (conexiones) y Nodos en Gatsby
14/33Recursos
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
}
}
}
}
}
Aportes 4
Preguntas 1
Ordenar por:
Según lo que he estudiado de Graphql, los edges y nodes, son parte de la paginación que hace graphql, si estoy equivocado un gusto que me corrijan.
Queries, Edges (conexiones) y Nodos en Gatsby
Podemos pedir información más especifica de nuestras imágenes, pero es necesario que primero entremos a los Edges (que son las conexiones con los plugins) y luego a los Nodos.
query TodasLasFotos{
allFile{
totalCount
edges{
node{
name
relativePath
size
}
}
}
}
Este query nos regresa:
{
"data": {
"allFile": {
"totalCount": 11,
"edges": [
{
"node": {
"name": "Logo",
"relativePath": "Logo.png",
"size": 6321
}
},
{
"node": {
"name": "cart",
"relativePath": "cart.png",
"size": 515
}
},
{
"node": {
"name": "gatsby-icon",
"relativePath": "gatsby-icon.png",
"size": 21212
}
},
{
"node": {
"name": "stickers1",
"relativePath": "stickers1.png",
"size": 44827
}
},
{
"node": {
"name": "camiseta",
"relativePath": "camiseta.png",
"size": 97101
}
},
{
"node": {
"name": "hoodie",
"relativePath": "hoodie.png",
"size": 83826
}
},
{
"node": {
"name": "icon",
"relativePath": "icon.png",
"size": 126350
}
},
{
"node": {
"name": "pin",
"relativePath": "pin.png",
"size": 71111
}
},
{
"node": {
"name": "mug",
"relativePath": "mug.png",
"size": 56485
}
},
{
"node": {
"name": "gatsby-astronaut",
"relativePath": "gatsby-astronaut.png",
"size": 167273
}
},
{
"node": {
"name": "stickers2",
"relativePath": "stickers2.png",
"size": 110158
}
}
]
}
},
"extensions": {}
}
Si estan interesados en usar gatsby con firebase aca se los dejo.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?