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?
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
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
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
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.
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/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.