Platzi
Platzi

Suscr铆bete a Expert y aprende de tecnolog铆a al mejor precio anual.

Antes: $249
$209
Currency
Antes: $249
Ahorras: $40
COMIENZA AHORA
Termina en: 0D : 6H : 16M : 13S

No tienes acceso a esta clase

Para ver esta clase necesitas una suscripci贸n a Platzi

Queries, Edges (conexiones) y Nodos en Gatsby

14/33

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
        }
      }
    }
  }
}

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?

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.

https://www.gatsbyjs.com/plugins/gatsby-plugin-firebase/

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?

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.

https://www.gatsbyjs.com/plugins/gatsby-plugin-firebase/