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:

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

Consola al momento de ejecutar el proyecto

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.

El astronauta de Gatsby

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.

Lista de articulos en el home

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.

Un artculo independiente

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

Actualizado 10/11/2019 a las 17:18