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

¿Cómo funciona GraphQL en Gatsby?

12/33
Recursos

GraphQL es un lenguaje tipado que facilita la comunicación entre servicios, pero los datos de nuestra aplicación pueden venir de diferentes lugares, así que GraphQL no tiene forma de acceder a todos estos datos para que podamos consumirlos desde un mismo lugar.

Gatsby recolecta toda la información de nuestra aplicación mientras desarrollamos en local y la almacena en un servidor de GraphQL. Luego, en la etapa de compilación, justo antes de pasar a producción, Gatsby guardará los datos de GraphQL junto al código, de esta forma los tendremos disponibles sin necesidad de hacer peticiones a las fuentes de datos originales.

Aportes 7

Preguntas 4

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Y que sucede en producción ?

Entonces si el proceso de consumir ocurre en el server nosotros deberiamos alojar nuestro proyecto en algún hosting que luego haga el rebuild escuchando cada vez que el “api” cambie y de esta manera actualizar el buid. Estoy en lo correcto?

¿Cómo funciona GraphQL en Gatsby?

GraphQL es un lenguaje tipado que nos ayuda a comunicar servicios. No importa cual sea la fuente de datos, podemos recolectar la información.
Todo el flujo sucede solamente en ‘desarrollo’. La información se recolecta previamente en este proceso.

esa es la capa del backend hasta la transferencia? que beneficios tiene el usar gatsby y no directarmente con Apollo, o por ejemplo express-graphql?

No tiene muchas desventajas el simple hecho que tenga que re-compilar para obtener los cambios? si un blog que todos los días recibe nueva información tendría que recompilar todo día a día? y si son varios autores como por ejemplo el caso de un blog con múltiples usuarios que actualizan el contenido muchas veces en un día, compilaría todo el tiempo, eso no es contra producente?

Sí el consumo es en desarrollo, qué sucede cuando se actualiza por ejemplo WordPress (API) y el sitio web con Gastby ya está en Producción?

¿Con Gatsby puedo crear mutaciones con graphql?