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

Consultas en GraphQL desde React

15/33
Recursos

En la clase anterior aprendimos c贸mo consultar la informaci贸n que nos proveen los plugins de fuente de datos desde GraphQL. Ahora, vamos a hacerlo desde nuestras vistas en React.

Debemos importar graphql desde gatsby:

// src/pages/NuestroPage.js
import { graphql } from 'gatsby';

Exportar nuestra consulta con el nombre de query:

// src/pages/NuestroPage.js
export const query = graphql`
  query NUESTRA_CONSULTA {
    # ...
  }
`;

Y consumir la informaci贸n de la propiedad data que obtenemos autom谩ticamente en el componente de nuestra p谩gina:

// src/pages/NuestroPage.js
export default function NuestroPage({ data }) {
  console.log(data.allSite.edges[0].node.siteMetadata);

  return /* ... */;
}

Recuerda que solo podemos hacer estas consultas en los componentes p谩gina de nuestra aplicaci贸n, es decir, solo desde los archivos dentro de src/pages/.

Aportes 13

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Tengo una duda 驴Todos los querys que copie de GraphiQL los pego todos dentro de la misma constante query? o 驴defino mas constantes para pegar dentro los dem谩s querys?

Para poder ver los querys formateados, necesitamos una extensi贸n llamada GraphQL, sino se ve gris feo.

Excelente! Estoy usando este curso para crear un ecommerce real, y he logrado conectar Gatsby usando como fuente de datos la base de datos del ERP de mi empresa

super buen curso tenia problemas con los estilos pero ya los pude correguir con wrapPageElement y hasta el momento voy bien y pienso implementar mi propio Ecommerce
! Screenshot_2.png

Si quisiera guardar un array, como datos, 驴Donde lo guardar铆a?
Por ejemplo para llenar los elementos de un navbar recorriendolo con un for
[鈥淗ome鈥,鈥淏log鈥,鈥淐ontact鈥漖

Consultas en GraphQL desde React

Los queries solamente se pueden ejecutar dentro de los archivos que est谩n en la carpeta de 鈥榩ages鈥 y tienen que ser exportados.

Vamos a conseguir esta informaci贸n:

siteMetadata: {
  title: `Platziswag`,
  description: `El mejor swag de Platzi disponible para ti`,
  author: `@MiguelAngelRe28`,
},

En index.js dentro de 鈥榩ages鈥:

import React from "react"
import { Link, graphql } from "gatsby"
import { Jumbo } from '../components/'
import { SEO } from "../components"

export const query = graphql`
  query GET_DESCRIPTION{
  allSite{
    edges{
      node{
        siteMetadata{
          description
        }
      }
    }
  }
}
`

const IndexPage = ({data}) => (
  <>
    <SEO title="Home" />
    <Jumbo description={data.allSite.edges[0].node.siteMetadata.description}/>
    <h1>Hi people</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
    <Link to="/gracias">Go to gracias</Link>
  </>
)

export default IndexPage

Y en Jumbo.js dentro de 鈥榗omponents鈥:

import React from 'react'
import {StyledJumbo} from '../styles/components'

export default function Jumbo({description}) {
  return (
    <StyledJumbo>
      <div>
        <h2>隆Consigue el mejor swag exclusivo y especial de Platzi!</h2>
        <small>{description}</small>
      </div>
    </StyledJumbo>
  )
}

No es tan hot reloading la verdad鈥

tengo este error:

GraphQL Error There was an error while compiling your site鈥檚 GraphQL queries.
Error: RelayParser: Encountered duplicate defintitions for one or more documents: each document must have a unique name. Duplicated documents:

  • GET_DESCRIPTION

si alguien sabe como solucionarlo podria ayudarme. ya intente cambiar los nombres pero ninguno esta duplicado como el error menciona.

Esto es disruptivo esta parte de accesos con GraphQL

Es posible pasar variables como props para que un componente haga un query con ella?

Mi pana que brutal este curso

Que tan recomendable es abstraer las querys en archivos individuales ???

Desgraciadamente me exploto cuando importe el description de esa manera. El c贸digo es el mismo y me dio un error. Yo lo resolv铆 usando los props de manera tradicionarl

	export default function Jumbo(props) {
    console.log(props);
    return (
        <StyledJumbo>
            <div>
                <h2>隆 Consigue el mejor swag exclusivo y especial de Platzi</h2>
                <small> {props.description.description} </small>
            </div>
        </StyledJumbo>
    )
}