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,
Iniciar sesi贸n
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?
o inicia sesi贸n.