Una colección de lecciones que describen como crear un plugin fuente para Gatsby desde cero hasta su publicación en npm.

Crearás tu propio plugin de fuentes (source plugin) para gatsby para obtener datos de una fuente externa disponible por medio de una API Rest. El plugin integrará los datos como nodos de gatsby y creará las consultas graphql necesarias para ser utilizadas en tu sitio.

Para crear un plugin de fuentes utilizaremos algunos de los métodos que la API de gatsby provee como `sourceNodes`, `createNode`,`createNodeId` y  `createContentDigest`

gatsby

Crear un plugin de gatsby para consumir datos de una API externa

En el plugin que has implementado, cada nodo creado contiene un atributo `artwork_url` que hace referencia a la url de una imagen externa. Es posible usar esa URL directamente para cargar las imágenes en tu sitio, pero estas pueden ser muy grandes y tomar mucho tiempo en cargar. Pero es posible optimizar dichas imágenes directamente en el plugin para que el sitio que utilice tu plugin pueda utilizar directamente  `gatsby-image`.


Para lograr optimizar las imágenes externas tu plugin tendrá que crear un nuevo tipo de nodo. Este nuevo nodo tipo archivo permitirá al usuario de tu plugin usar los plugins `gatsby-plugin-sharp` y `gatsby-transformer-sharp` para realizar transformaciones en la imagen.


Optimizar images remotas en un plugin fuente para Gatsby

Es posible pasar parámetros que ayuden a configurar tu plugin de Gatsby. Uno de sus caso de uso es permitir que el plugin se utilice multiples veces creando diferentes consultas que estarán disponibles para tu sitio.
Para esto es necesario refactorizar el plugin original para aceptar estos parámetros que son configurados mediante el archivo `gatsby-config.js`

Creación de un plugin de Gatsby desde cero

Matías Hernández

Course Content