Creando páginas en función de los datos

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 💚

https://www.gatsbyjs.com/docs/api-files-gatsby-node/#reach-skip-nav

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