Carga de datos con GraphQL y Gatsby - Tutorial de React.js

Gatsby utiliza un muy interesante sistema de queries utilizando GraphQL para importar información que luego va a renderizar dentro de los sitios. Te voy a mostrar cómo cargar información externa, específicamente, en este caso, desde un archivo JSON. Para eso, necesitamos realizar algunos pasos previos. Primero, yo he creado dentro de mi aplicación una carpeta llamada data y dentro de ella he insertado un archivo JSON que tiene tres diferentes ítems, cada uno de ellos con información. Vamos a consumir estos datos para desplegarlos en pantalla. Luego también necesito ir a la página de Gatsby, a la sección de Plugins y voy a descargar el plugin gatsby-transformer-json. Esto me va a servir a mí para tomar información en formato JSON y consumirla. Toma en cuenta que existen otros plugins para consumir información en diferentes formatos, como markup, así que, si te interesa, puedes utilizar estos formatos. En este caso, vamos a hablar del de JSON y simplemente tenemos que copiar esta línea…