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

No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

Compra acceso a todo Platzi por 1 a√Īo

Antes: $249

Currency
$209/a√Īo

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscríbete

Termina en:

15D
16H
49M
44S

StaticQuery vs. useStaticQuery

27/33
Recursos

Diferencias entre consultas a GraphQL desde p√°ginas, con StaticQuery o useStaticQuery:

Las p√°ginas de Gatsby (los archivos de la carpeta src/pages) nos permiten hacer consultas a GraphQL. Debemos exportar la propiedad query con el esquema de nuestra consulta y esto nos permitir√° recibir los datos como props en el componente que exportamos en esa misma p√°gina.

Por ejemplo:

export const query = graphql`
  query GET_DATA {
    # ...
  }
`

export default ({ data }) => {
  console.log(data);

  return /* ... */;
}

Pero esta sintaxis solo funciona en las p√°ginas de Gatsby. Si necesitamos hacer consultas desde alg√ļn otro componente de nuestra aplicaci√≥n podemos usar el componente StaticQuery.

Solo debemos escribir la consulta en la propiedad query para recibir la información desde la propiedad render:

<StaticQuery
  query={graqhql`
    query {
      # ...
  `}
  render={data => {
    console.log(data);
    return <AnyOtherComponent data={data} />;
  }}
/>

También podemos usar el hook useStaticQuery: funciona igual que StaticQuery pero nos permite usar la sintaxis de los hooks:

const data = useStaticQuery(
  graphql`
    query {
      # ...
    }
  `
)

Aportes 2

Preguntas 0

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Si todo esto es est√°tico,¬ŅC√≥mo se puede usar Graphql din√°micamente? @joss_dz

genial aclaracion!!! ‚̧ԳŹ