Introducci贸n a Gatsby

1

驴Por qu茅 Gatsby? Seguridad y Velocidad

2

驴Qu茅 es Gatsby?

3

Diferencias entre SPA, SSR y Gatsby

Preparando el entorno

4

Requisitos previos y herramientas de desarrollo

5

Gatsby y Gatsby CLI y Starters

6

Configuraci贸n de ESLint

Fundamentos de Gatsby

7

Presentaci贸n y Estructura de Archivos de nuestro proyecto: Platziswag

8

Ecosistema de plugins

9

Usando React para manejar la parte visual e interactiva de nuestra aplicaci贸n

Creando la vista con React

10

Router en Gatsby y Componente Link

11

Layout en Gatsby

Graphql en Gatsby

12

驴C贸mo funciona GraphQL en Gatsby?

13

Accediendo a nuestros datos en Gatsby desde GraphQL

14

Queries, Edges (conexiones) y Nodos en Gatsby

15

Consultas en GraphQL desde React

Usando plugins en Gatsby

16

Instalaci贸n y configuraci贸n de plugins

17

Im谩genes como fuente de datos

18

Plugins de transformaci贸n

19

Estilizando nuestros componentes con styled-components

20

Estilos Globales con styled-components

Stripe checkout

21

Introducci贸n a la API de Stripe Checkout

22

Agregando productos a nuestra tienda en l铆nea

23

Productos en React

Generando p谩ginas program谩ticamente

24

Creando p谩ginas en funci贸n de los datos

25

Manejo de Gatsby Templates

26

Terminando la Vista de Detalle de los Productos

27

StaticQuery vs. useStaticQuery

28

Construyendo el Carrito de Compras: useContext

29

Construyendo el Carrito de Compras: Vista

30

Construyendo el Carrito de Compras: Agregar productos al carrito

31

Comprando productos

Gatsby a producci贸n

32

Gatsby build para compilar nuestro proyecto

33

Deploy a Netlify

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Queries, Edges (conexiones) y Nodos en Gatsby

14/33
Recursos

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

Aportes 4

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

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/