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

Optimizar images remotas en un plugin fuente para Gatsby

Utilizar parámetros de configuración en un plugin para Gatsby

Creación de un plugin de Gatsby desde cero

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`

Matías Hernández: [0:00] Comenzaremos con un sitio de Gatsby cualquiera. En este caso, este sitio fue creado utilizando el starter que puedes ver aquí. Una forma de crear un nuevo plugin es creando un nuevo directorio dentro de nuestro sitio.

[0:10] Creamos el directorio llamado plugins, entramos en él y creamos un nuevo sitio de Gatsby, utilizando el starter gatsby-starter-plugin. En este caso, lo nombraremos gatsby-source-buzzsprout-api.

[0:22] Abriremos el archivo gatsby-node.js para agregar nuestra primera función, exports.sourceNodes, que será una función async y podemos probarla con un simple console.log.

[0:32] Ahora para ver este test, simplemente agregamos el nuevo plugin al archivo gatsby-config de nuestro sitio original, ejecutamos el script de build y podemos ver el resultado de ésta en consola. Ahora, requerimos de alguna librería o paquete que nos permita obtener datos externos.

[0:47] En este ejemplo, utilizaremos una API Rest, por lo que el paquete node-fetch nos permitirá utilizar una API como la del browser. Simplemente entramos utilizando npm.

[0:55] Una vez integrado el paquete podemos agregarlo a nuestro archivo. Para este ejemplo, utilizaremos la API de Buzzsprout para obtener los episodios de un podcast. Esta API retorna un archivo JSON con todos los episodios de un podcast dado y requiere autorización basada en un token.

[1:10] Ahora reemplazamos nuestro console.log con una llamada a la API externa, por lo que crearemos una nueva variable llamada response que será igual a await fetch, y como parámetros le pasamos la URL de la API de Buzzsprout y agregamos como segundo parámetro el header que pasará al token de autorización.

[1:29] Para proteger nuestro token, simplemente lo agregaremos al archivo .env y utilizaremos el paquete .env para obtener sus datos. Luego, obtenemos el objeto JSON de este response utilizando await response.json, y para probar podemos ejecutar build en la consola y ver nuestro resultado.

[1:48] Ahora que ya tenemos un arreglo de los episodios, podemos hacer que estos estén disponibles para Gatsby utilizando el método createNode provisto por su API. Para comenzar, agregaremos algunos parámetros a nuestra función basando el argumento actions.

[2:01] Ahora, tenemos que recorrer nuestro arreglo de episodio. Para esto, simplemente usaremos forEach para tener acceso a cada episodio y crear un nuevo nodo de Gatsby. Aquí ya podemos utilizar createNode que es parte del argumento actions.

[2:15] A este método, createNode, debemos pasarle todos los datos que necesitamos de nuestro episodio y lo hacemos utilizando destructuring. Luego, debemos crear un id. Para esto, utilizamos un método provisto por Gatsby llamado createNodeId que se obtiene desde los argumentos.

[2:29] CreateNodeId recibe un string único que representará cada nodo. Para esto creamos una nueva constante llamada NODE_TYPE y la utilizaremos dentro de la llamada createNodeId con un template literal para poder agregar el id del episodio que es provisto por la API.

[2:44] Además de esto, debemos pasar a algunos otros parámetros, como parent que será null, children que será un arreglo vacío, y un objeto internal necesario para Gatsby cuyos atributos son type, que será el mismo NODE_TYPE, content que es un string basado en el objeto episodio, contentDigest que se crea con una función llamada createContentDigest(), que la haremos disponible desde los argumentos de la función y le pasamos el objeto episodio.

[3:10] Ahora, podremos ejecutar nuestro script de build, pero para ver si esto realmente funciona, podemos ejecutar gatsby develop y visitar el explorador de GraphQL. Aquí, podremos ver que existe una nueva query llamado allPodcastEpisode y otra llamada podcastEpisode. Para probar, podemos ver todos nuestros episodios.

[3:30] En resumen, tomamos todos los datos obtenidos desde la API de Buzzsprout y creamos un nuevo gatsby-node para cada uno de ellos. Para hacer esto utilizamos alguno de los argumentos del método sourceNode, como createNodeId y createContentDigest.

[3:43] Con estas variables configuramos el nuevo nodo, el contenido y el atributo internal, lo que nos provee de una nueva consulta que nos permite ver todos los datos de nuestro podcast para ser utilizado en nuestro sitio...

Course

Creación de un plugin de Gatsby desde cero

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

Share this video with your friends