Construyendo un blog con Gastby y Strapi, parte 2 - Configurando Gatsby
Este artículo es la parte 2 de la guía "Construyendo un blog con Gatsby y Strapi" en esta parte nos enfocaremos en configurar Gatsby para poder mostrar la información que nos expone la API, si quieres mirar los artículos anteriores o siguientes:
- Construyendo un blog con Gastby y Strapi, parte 0
- Construyendo un blog con Gastby y Strapi, parte 1 - Configurando Strapi
- Construyendo un blog con Gastby y Strapi, parte 3 - Desplegando Strapi en Heroku
- Construyendo un blog con Gastby y Strapi, parte 4 - Desplegando Gatsby en Netlify
- Construyendo un blog con Gastby y Strapi, parte 5 - Integrando Gatsby, Strapi y Cloudinary en producción
Instalar Gatsby
npm install -g gatsby-cli
Crear un nuevo proyecto con Gatsby
gatsby new blog
Con este comando crearás un nuevo directorio con el nombre del proyecto blog que puedes cambiar por el de tu preferencia.
Ejecutar el proyecto
cd blog
Para acceder al directorio
gatsby develop
ó
yarn develop
Para ejecutar el proyecto
Luego de hacer todo el proceso deberías de poder acceder a las url http://localhost:8000/ donde puedes ver la aplicación y http://localhost:8000/___graphql el playground de Graphql que tiene incluido Gatsby para realizar las consultas a las fuentes de datos.
Ahora necesitamos que Gatsby reconozca a Strapi como una fuente de datos y que pueda leer los datos por medio de Graphql pero no hay problemas, ya hay un plugin listo para esto, así como hay para muchas fuentes de datos, puedes ver más aquí.
Agregando Strapi como fuente de datos
yarn add gatsby-source-strapi
De esta forma cargamos a nuestro proyectos el plugin gatsby-source-strapi, para configurarlo debemos editar el archivo gatsby-config.js en el arreglo de plugins, agregamos:
... plugins: [ ... { resolve: "gatsby-source-strapi", options: { apiURL: "http://localhost:1337", contentTypes: [ // Lista de tipos de contenido que tenemos en Strapi, en singular "articulo" ], queryLimit: 1000, }, }, ... ] ...
Nota: cada vez que modificamos un archivo de la configuración de Gatsby debemos detener y volver a ejecutar el proyecto para que cargue de nuevo con estas configuraciones.
Ahora si accedemos al playground de Graphql http://localhost:8000/___graphql nos mostrará las consultas de la data que viene de Strapi allStrapiArticulo y strapiArticulo
Agregar la consulta en la aplicación
Comenzamos a modificar lo que nos muestra la aplicación, ve al archivo /blog/src/pages/index.js y reemplazalo por este:
1import React from "react" 2import { Link, graphql } from "gatsby" 3import Layout from "../components/layout" 4 5const IndexPage = ({ data }) => ( 6 <Layout> 7 <h1>Hi people</h1> 8 <p>Welcome to your new Gatsby site.</p> 9 <p>Now go build something great.</p> 10 <ul> 11 {data.allStrapiArticulo.edges.map(({ node }) => ( 12 <li key={node.strapiId}> 13 <h2> 14 <Link to={`/${node.strapiId}`}>{node.titulo}</Link> 15 </h2> 16 <p>{node.descripcion}</p> 17 </li> 18))} 19 </ul> 20 <Link to="/page-2/">Go to page 2</Link> 21 </Layout> 22) 23 24export default IndexPage 25 26export const pageQuery = graphql` 27 query IndexQuery { 28 allStrapiArticulo { 29 edges { 30 node { 31 strapiId 32 titulo 33 descripcion 34 } 35 } 36 } 37 } 38`
Puedes notar aquí que la consulta allStrapiArticulo es creada por el plugin de Strapi para Gatsby de forma automática y los campos que estamos requiriendo son el strapiId generado por Strapi, titulo y descripcion de todos los artículos.
Ahora podrás ver una lista de los artículos en el home de tu aplicación 👏🏻 👏🏻 👏🏻 en este punto ya estás mostrando el contenido que proviene de Strapi.
Vista de un artículo
Así como tenemos una lista de artículos puede ser necesario tener una vista independiente por cada artículo, para eso usaremos un templates, en tu proyecto crea la ruta /blog/src/templates/ y dentro el archivo articulo.js con el siguiente contenido:
1import React from "react" 2import { graphql } from "gatsby" 3import Layout from "../components/layout" 4 5const ArticleTemplate = ({ data }) => ( 6 <Layout> 7 <h1>{data.strapiArticulo.titulo}</h1> 8 <p>{data.strapiArticulo.descripcion}</p> 9 </Layout> 10) 11 12export default ArticleTemplate 13 14export const query = graphql` 15 query ArticleTemplate($id: Int!) { 16 strapiArticulo(strapiId: { eq: $id }) { 17 titulo 18 descripcion 19 } 20 } 21`
Ahora tenemos un template que nos sirve como vista para cada uno de los artículo de forma independiente, pero necesistamos decirle a Gatsby que lo utilice. Para esto ve al archivo gatsby-node.js y agrega:
1const path = require(`path`) 2 3const makeRequest = (graphql, request) => 4 new Promise((resolve, reject) => { 5 // Hace la solicitud a la API para leer la información 6 resolve( 7 graphql(request).then(result => { 8 if (result.errors) { 9 reject(result.errors) 10 } 11 return result 12 }) 13 ) 14}) 15 16// Utiliza el método createPages para crear las páginas con la data que recibe 17exports.createPages = ({ actions, graphql }) => { 18 const { createPage } = actions 19 // Hace una solicitud de los strapiId de cada articulo para generar la URL y directorio 20 const getArticles = makeRequest( 21 graphql, 22 ` 23 { 24 allStrapiArticulo { 25 edges { 26 node { 27 strapiId 28 } 29 } 30 } 31} 32` 33).then(result => { 34 // Crea la página para cada articulo 35 result.data.allStrapiArticulo.edges.forEach(({ node }) => { 36 createPage({ 37 path: `/${node.strapiId}`, 38 // Le indica que template utilizar en esta página 39 component: path.resolve(`src/templates/articulo.js`), 40 context: { 41 id: node.strapiId, 42 }, 43 }) 44 }) 45}) 46 // Devuelve todos los artículos 47 return getArticles 48}
Ahora puedes hacer click sobre el título de algún artículo en tu home y te llevara a la vista independiente de dicho artículo
Genial! Ya tienes la vista general de todos los artículos y la vista independiente de cada uno.
Si quieres más información acerca de lo que puedes hacer con Gatsby no te pierdas la documentación
¿Estamos listos para subir a producción? Casi pero primero necesitamos subir Strapi a Heroku
Continua con: Construyendo un blog con Gastby y Strapi, parte 3 - Desplegando Strapi en Heroku