Actualmente tengo problemas para crear un archivo para un blog de WordPress usando Gatsby. Estoy tratando de configurarlo donde navega a una URL como «localhost: 8000/blog/11-19» y muestra todas las publicaciones de blog para noviembre de 2019. En este momento SÍ tengo el sitio configurado donde la URL se crea correctamente en función de la fecha, pero cuando intento recorrer la consulta y generar el contenido del blog, no aparece nada. Mi archivo de nodo gatsby:
const path = require('path')
module.exports.createPages = async ({ graphql, actions }) => {
const { createPage } = actions
const blogPostTemplate = path.resolve('./src/templates/blog-post.js')
const blogCategoryFilter = path.resolve('./src/templates/blog-filter-category.js')
const blogArchiveFilter = path.resolve('./src/templates/blog-filter-archive.js')
const res = await graphql(`
query {
allWordpressPost {
edges {
node {
slug
date(formatString:"MM-YY")
}
}
}
allWordpressCategory {
edges {
node {
slug
}
}
}
}
`)
res.data.allWordpressPost.edges.forEach((edge) => {
createPage({
component: blogPostTemplate,
path: `/blog/${edge.node.slug}`,
context: {
slug: edge.node.slug,
}
})
})
res.data.allWordpressPost.edges.forEach((edge) => {
createPage({
component: blogArchiveFilter,
path: `/blog/${edge.node.date}`,
context: {
slug: edge.node.date,
}
})
})
res.data.allWordpressCategory.edges.forEach((edge) => {
createPage({
component: blogCategoryFilter,
path: `/blog/category/${edge.node.slug}`,
context: {
slug: edge.node.slug,
}
})
})
}
Mi archivo de plantilla (en este ejemplo, es blogArchiveFilter–blog-filter-archive.js):
import React from 'react'
import { graphql, Link } from 'gatsby'
import Layout from '../components/layout'
import BlogNav from '../components/blognav'
import blogStyles from '../components/modules/blog.module.css'
export const query = graphql`
query($slug: Date!) {
allWordpressPost (filter: { date: { eq: $slug }}) {
edges {
node {
title
slug
content
date(formatString: "MMMM DD, YYYY")
}
}
}
}
`
export default ({ data }) => {
return (
<Layout>
<div className={blogStyles.blog_container}>
<div className={blogStyles.blogContent_container}>
<ol>
{data.allWordpressPost.edges.map((edge) => {
return (
<div className={blogStyles.blogPost_container}>
<li className={blogStyles.blog_list}>
<h2><Link to={`/blog/${edge.node.slug}`} className={blogStyles.blog_title} dangerouslySetInnerHTML={{ __html: edge.node.title }}></Link></h2>
<p className={blogStyles.blog_date}>{edge.node.date}</p>
<p className={blogStyles.blog_content} dangerouslySetInnerHTML={{ __html: edge.node.content }} />
</li>
</div>
)
})}
</ol>
</div>
<BlogNav />
</div>
</Layout>
)
}
EDITAR:
¿Hay alguna manera de que pueda configurar una variable dentro de una consulta para que cambie en respuesta a un slug? Por ejemplo: si la URL fuera «localhost:8000/blog/2019-11», podría filtrar gt: «$slug» y filtrar lt «2019-12». Si la URL fuera «localhost:8000/blog/2019-10», podría filtrar gt: «$slug» y filtrar lt «2019-11». Esto siempre generaría las publicaciones para el mes y el año en mi URL. El ejemplo está abajo.
Es como si el slug fuera «2019-(a)», entonces el valor lt siempre sería «2019-(a+1)». ¿Se puede hacer eso?
query($slug: Date!){
allWordpressPost (filter: { date: { gt: $slug, lt: "2019-12" }}) {
edges {
node {
date(formatString: "MMMM DD, YYYY")
}
}
}
}
.