Gatsby Workshop

Plugins

Los plugins de Gatsby son paquetes de Node.js que implementan APIs propias de Gatsby y, si nuestro proyecto es grande, nos permiten modularizar algunas personalizaciones que tengamos y convertirlas en plugins específicos para lo que necesitemos.

Gatsby está diseñado para ser extensible, y los plugins nos sirven para eso: extender y modificar todo lo que Gatsby hace.

Algunas de las cosas que los plugins nos permiten hacer son:

• Añadir contenido o data externa (ej. CMS, archivos estáticos, una API REST) a nuestra data de GraphQL
• Transformar data de otros formatos (ej. Markdown, YAML, CSV) a objetos JSON
• Añadir servicios externos (ej. Google Analytics, Instagram) a nuestro proyecto
• Muchísimas cosas más!

En este link podemos ver todos los plugins que nos ofrece el ecosistema de Gatsby 😀

Tipos de plugins

Gatsby nos propone, entre otros, dos tipos importantes (a mi parecer) de plugins para hacer algunas de las cosas que recién nombramos:

• source plugins: Los plugins de tipo source (fuente) nos sirven para crear lo que sería una "fuente de datos" para que nosotros podamos, mediante GraphQL, consultar y utilizar esa data en el frontend. (La data consultada puede ser data de un CMS, imágenes, Markdown, otros archivos estáticos locales, etc.)
• transformer plugins: Este tipo de plugins nos permite convertir o transformar (de ahí el nombre 😝) la data consultada de nuestra fuente de datos, por ejemplo, nos permite convertir Markdown a HTML, procesar imágenes, archivos PDF, etc.

Veamos un poco cómo se usan estos tipos de plugins en nuestro proyecto.

Usando plugins en nuestro proyecto

Los plugins de Gatsby, al ser paquetes de Node.js, podemos instalarlos como cualquier otro paquete utilizando NPM, Yarn, o lo que más les guste. Analicemos nuestro proyecto para ver qué plugins usamos, veamos el archivo gatsby-config.js que es donde indicamos qué plugins vamos a usar, deberíamos ver algo así:

module.exports = {
  siteMetadata: {
    title: 'Gatsby Default Starter',
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    'gatsby-transformer-sharp',
    'gatsby-plugin-sharp',
    [...]

Con lo cual podemos observar que ya estamos indicando que vamos a utilizar, entre otros, los plugins:

• gatsby-source-filesystem
• gatsby-transformer-sharp
• gatsby-plugin-sharp

Y vemos que la forma de importarlos (verificando antes que estén instalados y estén en nuestro package.json) es agregando un string con el nombre del plugin en el array de plugins de nuestro archivo de configuración. Pero por qué gatsby-source-filesystem está como objeto? Eso es porque algunos plugins reciben parámetros para que funcionen como necesitemos, suele ser por medio del objeto options y nosotros debemos indicar el nombre en un string en la clave resolve del objeto. La utilización de cada plugin suele explicarse en la documentación de cada plugin, así que a no tener miedo y leer que van a encontrar mejores explicaciones que la mía jajaja. Bueno, hablando de eso, vamos a ver la documentación de gatsby-transformer-sharp donde vamos a ver que nos indica que es un plugin oficial de Gatsby y podemos ver que gatsby-plugin-sharp es un adaptador de una biblioteca Sharp que existe y se encarga de manejar imágenes. Entonces, una idea de cómo sería el flujo desde consultar una imagen que tenemos en una carpeta local hasta que se usa en el frontend, sería algo como lo siguiente:

Se genera una fuente de datos desde nuestra carpeta con imágenes ⇒ Se consultan esos datos que tiene nuestras imágenes desde el frontend ⇒ Se usan las imágenes en el frontend con el componente gatsby-image (siendo procesadas con gatsby-transformer-sharp y gatsby-plugin-sharp, que ya viene todo preparado para nosotros 🥰)

Para varias cosas nos vamos a topar con esta dinámica de Crear fuente de datos ⇒ Procesar datos ⇒ Usarlos, y si traducimos, estaríamos teniendo que hacer Source ⇒ Transformer ⇒ Use

No toda la data tiene que pasar obligatoriamente por un plugin de tipo Transformer, eso vamos a ir viendo mientras usemos más plugins.

Hasta acá creo que estamos bien para continuar con el siguiente tema, que es nuestra forma de consultar la fuente de datos que creemos con nuestros plugins de tipo Source, sigamos con GraphQL 😉