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

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Creando páginas en función de los datos

24/33
Recursos

El método createPages de gatsby-node.js nos ayuda a crear páginas sin necesidad de crear un archivo por cada una de ellas en la carpeta src/pages.

En este caso, vamos a generar una página por cada uno de los productos que guardamos en Stripe:

// gatsby-node.js
const path = require("path")

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;
  const productTemplate = path.resolve(`src/templates/Product.js`);
  const result = await graphql(`
    query GET_SKUS {
      allStripeSku {
        edges {
          node {
            id
            price
            product {
              name
              metadata {
                description
                img
                wear
              }
            }
          }
        }
      }
    }
  `);

  if (result.errors) throw result.errors;

  result.data.allStripeSku.edges.forEach(({ node }) => {
    createPage({
      path: `${node.id}`,
      component: productTemplate,
    });
  });
}

Aportes 9

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Porqué? deberíamos hacer una página por cada producto¿? si podrías tener una página productDetails donde le pasamos el SKU y nos bajamos los datos de ese mismo?

¿Pregunta, si tengo 1000 productos, gatsby va a crear 1000 páginas?
¿Esto no afecta el rendimiento de la página?
¿No vendría a ser mejor pasar el id del producto por parámetro, que un componente lea el id, se lo pida por graphql y muestre los datos del producto?

al intentar compilar me sale este error
error There was an error compiling the html.js component for the
development server.

Creando páginas en función de los datos

Tenemos que generar páginas en un función de los productos.

En gatsby-node.js podemos crear nuestros propios plugins y generar páginas programáticamente.

Creamos la carpeta ‘templates’ dentro de ‘src’, y creamos un template de prueba, Product.js:

import React from 'react'

export default function Product() {
  return (
    <div>
      Producto
    </div>
  )
}

Hacemos esto en gatsby-node.js:

const path = require('path')

exports.createPages = async ({graphql, actions}) => {
  const { createPage } = actions
  const productTemplate = path.resolve(`src/templates/Product.js`)
  const result = await graphql(`
  query GET_PRODUCTS{
    allStripePrice {
      edges {
        node {
          id
          unit_amount
          product {
            name
            metadata {
              img
              description
              wear
            }
          }
        }
      }
    }
  }
  `)

  if (result.errors) {
    throw result.errors
  }

  result.data.allStripePrice.edges.forEach(({node}) => {
    createPage({
      path: `${node.id}`,
      component: productTemplate,
    })
  })
}

Por qué configurar una página en gatsby-node.js, gatsby no es capas de detectar cuando una página recibe un parametro? Por ejemplo, en node.js defino un archivo [id].js el cual es capaz de recibir el id que se esta enviando.

Cual es la diferencia entre createPage y createNode?

Hola Devs:
-Muy importante lo que aprendemos en esta clase, el aprender como generar esas paginas de manera dinamica, aca les traigo un poco de documentacion sobre createPages: Click Aqui
-Tambien les tengo el codigo de esta clase en el archivo: gatsby-node.js:

-Bonus: Por si lo necesitan, aca tengo el codigo hasta este punto de la clase [apuntanto al commit], pueden checar por si tienen alguna duda: Click Aqui
Recuerden, #NuncaParenDeAprender 💚

tengo un persistente error cuando compila createPages … si alguien puede ayudarme lo agradeceria mucho!

les dejo mi repo para que observen el codigo!
https://github.com/alexrodriguez2498/platzi-gatsby

success open and validate gatsby-configs - 0.156s
success load plugins - 1.390s
success onPreInit - 0.039s
info One or more of your plugins have changed since the last time you ran Gatsby. As
a precaution, we're deleting your site's cache to ensure there's no stale data.
success initialize cache - 0.071s
success copy gatsby files - 0.237s
success onPreBootstrap - 0.024s
success createSchemaCustomization - 0.008s
success Checking for changed pages - 0.002s
success source and transform nodes - 0.812s
success building schema - 0.532s

 ERROR #11321  PLUGIN

"gatsby-node.js" threw an error while running the createPages lifecycle:

Syntax Error: Unexpected }

  4 |   const { createPage } = actions
  5 |   const productTemplate = path.resolve(`./src/templates/Product.js`)
> 6 |   const result = await graphql
    |                        ^
  7 |   (`
  8 |     query {
  9 |       allStripePrice{ 

File: gatsby-node.js:6:24



  GraphQLError: Syntax Error: Unexpected }

  - graphql-runner.ts:88 GraphQLRunner.parse
    [platzi-gatsby]/[gatsby]/src/query/graphql-runner.ts:88:34

  - graphql-runner.ts:161 GraphQLRunner.query
    [platzi-gatsby]/[gatsby]/src/query/graphql-runner.ts:161:27

  - create-graphql-runner.ts:59 
    [platzi-gatsby]/[gatsby]/src/bootstrap/create-graphql-runner.ts:59:8

  - gatsby-node.js:6 Object.exports.createPages
    C:/Users/luis/dev/platzi/platzi-gatsby/gatsby-node.js:6:24

  - api-runner-node.js:485 runAPI
    [platzi-gatsby]/[gatsby]/src/utils/api-runner-node.js:485:22

  - api-runner-node.js:636 Promise.catch.decorateEvent.pluginName
    [platzi-gatsby]/[gatsby]/src/utils/api-runner-node.js:636:13

  - debuggability.js:384 Promise._execute
    [platzi-gatsby]/[bluebird]/js/release/debuggability.js:384:9

  - promise.js:518 Promise._resolveFromExecutor
    [platzi-gatsby]/[bluebird]/js/release/promise.js:518:18

  - promise.js:103 new Promise
    [platzi-gatsby]/[bluebird]/js/release/promise.js:103:10

  - api-runner-node.js:634 
    [platzi-gatsby]/[gatsby]/src/utils/api-runner-node.js:634:16


info Total nodes: 63, SitePage nodes: 1 (use --verbose for breakdown)
failed createPages - 0.866s
success Checking for changed pages - 0.006s
success createPagesStatefully - 0.237s
success update schema - 0.044s
success write out redirect data - 0.004s
success Build manifest and related icons - 0.164s
success onPostBootstrap - 0.174s
info bootstrap finished - 9.695s
success onPreExtractQueries - 0.002s
success extract queries from components - 0.592s
success write out requires - 0.030s
success run static queries - 0.126s - 2/2 15.91/s
success run page queries - 0.049s - 3/3 61.58/s
⠀
You can now view gatsby-starter-default in the browser.
⠀
  http://localhost:8000/View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  http://localhost:8000/___graphqlNote that the development build is not optimized.
To create a production build, use gatsby build