Productos en React

Bufff… Al final, con esfuerzo, conseguido:

Este curso me esta encantando. aunque es todo un reto para mi porque no domino Node y Graphql es nuevo para mi. aun así lo he disfrutado mucho y he aprendido con cada error que he logrado corregir.
😄

A pesar de que el curso es de hace 2 años, aun me funciona, con la diferencia de que para guardar los productos en stripe es con el CLI por consola, aquí mi test

Realicé un tutorial para resolver los problemas de integración con Stripe https://platzi.com/tutoriales/1618-gatsby/6296-ajustes-para-integrar-stripe/

query {
  allStripeSku {
    edges {
      node {
        id
        price
        product {
          name
          metadata {
            description
            img
            wear
          }
        }
      }
    }
  }
}

No sé si a alguien más le pase esto, pero si les da el error ‘TypeError: products.map is not a function’, es porque {products} es un objeto y no un array. Si entramos a products.edges ya tendremos un array y todo funcionará correctamente.

import React from 'react'
import { Link } from 'gatsby'
import formatprice from '../utils/priceFormat'
import { StyledProducts } from '../styles/components'

export default function Products({products}) {
  return (
    <StyledProducts>
      <h2>Productos</h2>
      <section>
        {products.edges.map(({node}) => {
          const price = formatprice(node.unit_amount)
          return (
            <article key={node.id}>
              <img src={node.product.metadata.img} alt={node.product.name}/>
              <p>{node.product.name}</p>
              <small>USD {price}</small>
              <Link to={`/${node.id}`}>
                Comprar ahora <span>➡</span>
              </Link>
            </article>
          )
        })}
      </section>
    </StyledProducts>
  )
}

¿Cómo hicieron para hacer la petición en 2020?
Tengo error con Sku, estoy usando Product y este no tiene el precio de los productos.
?

Ya que usamos Gatsby…
¿Debemos hacer build cada vez que cambiamos la información de los productos? 😱🤔

El Sku ahora esta obsoleto en las nuevas versiones para esto ahora se usa el allStripePrice aca la Doc https://www.gatsbyjs.com/plugins/gatsby-source-stripe/#how-to-query-with-prices.
En su archivo gatsby-config.js deben agregar Price al objects de esta manera

  {
    resolve: `gatsby-source-stripe`,
    options: {
      objects: ['Balance', 'BalanceTransaction', 'Product', 'ApplicationFee', 'Subscription', 'Price'],
      secretKey: process.env.STRIPE_SK,
      downloadFiles: true,
    }
  }

Aunque el curso este desactualizado nada nos cuesta buscar la informacion actualizada e implementarlos a nuestro proyecto

Para el problema con la imagen decidi usar la del sku! sin entrar al product! ya que me traia bien la ulr de la misma!

Para los Platzi-nautas del 2021:

Si en las anteriores clases siguieron el camino recomendado de poner:

// gatsby-config.js
// ...
    {
      resolve: `gatsby-source-stripe`,
      options: {
        objects: [`Price`],
        secretKey: process.env.STRIPE_SK
      }
    }
// ...

Entonces, para que todo resulte bien bonito y no tengan un cartel rojo con letras aún más rojas en la página:

// src/components/Products.js

import React from 'react';
import { Link } from 'gatsby'
import formatprice from '../utils/priceFormat'
import { StyledProducts } from '../styles/components'

export default function Products({ products }) {

  return (
    <>
      <StyledProducts>
        <h2>Productos</h2>
        <section>
          {products.map(({ node }) => {
            const price = formatprice(node.unit_amount)
            return (
              <article key={node.id}>
                <img src={node.product.metadata.img} alt={node.product.name} />
                <p>{node.product.name}</p>
                <small>USD {price}</small>
                <Link to={`/${node.id}`}>
                  Comprar ahora
                </Link>

              </article>
            )
          })}
        </section>
      </StyledProducts>
    </>
  )
}

// src/pages/index.js
import React from "react"
import { Jumbo, SEO, Products } from "../components"
import { graphql } from "gatsby"

export const query = graphql`
query GET_DATA{
  allSite {
    edges {
      node {
        siteMetadata {
          title
          description
          author
        }
      }
    }
  }
  allStripePrice{
    edges{
      node{
        id
        unit_amount
        product{
          name
          metadata{
            img
            description
            wear
          }      
        }
      }
    }
  }
}
`;

const IndexPage = ({ data }) => {
  console.log(data)
  return (
    <>
      <SEO title="Home" />
      <Jumbo description={data.allSite.edges[0].node.siteMetadata.description} />

      <Products products={data.allStripePrice.edges} />
    </>
  )
}

export default IndexPage

si no puedes ver las imágenes, puede que esta etiqueta img te funcione

<img src={node.product.images}/>

Esto debido a que ha cambiado un poco la estructura respecto al video

Yo tenia problemas con las imagenes y lo solucioné remplazando los links de la metadata img (en la página de stripe) por los siguiente:
pin: https://i.postimg.cc/6qyBYsPV/pin.png
Sticker 2: https://i.postimg.cc/dVMJmxjd/stickers2.png
Mug: https://i.postimg.cc/QCwhz4L2/mug.png
Camiseta: https://i.postimg.cc/s2rDyNBy/camiseta.png
Sticker 1: https://i.postimg.cc/VNWsNWMt/stickers1.png
Hoodie: https://i.postimg.cc/xTB1pCnX/hoodie.png

Algo paso por aqui. Se llama 'Product.js' o 'Products.js', finalmente? :/

Hay que ignorar el comentario de cambiar el nombre del archivo a Product.js, al menos hasta este punto.

es recomendable utilizar un index.js (que funcione como indexador) en components?

a mi me dice que no encuentra la llave de conexion en el archivo config , es muy extraño sera que es por que lo estoy haciendo con las llaves test ?

Teniendo en cuenta que en el dashboard de Stripe no se pueden crear productos SKU, he modificado los scripts para poder mostrar la info de cada producto.

1. Archivo gatsby-config.js

{
      resolve:`gatsby-source-stripe`,
      options:{
        objects: ['Product','Price'],
        secretKey: process.env.STRIPE_SK,
        downloadFiles: true,
      },

hasta el memento me ha ido bien tube problemas con el allStripeSku pero lo solucione con el Price y me funciono!