crear páginas en cuestiones de Gatsby; Duplicaciones y contenido sin renderizar.

3 minutos de lectura

He tenido algunos errores al tratar de mostrar publicaciones de blog individuales.

Intenté usar la plantilla de página con /post/{post_name} y recibí este error:

advertir Peligro de enrutamiento no determinista: intento de crear la página: “/blog/”, pero la página “/blog” ya existe Esto podría conducir a un comportamiento de enrutamiento no determinista

Lo intenté de nuevo con /blog/{post_name}.

Ahora tengo ambas rutas, que no estoy seguro de cómo limpiar; pero lo que es más importante, en esas páginas, no se muestra nada, aunque debería haber un h1 con su HTML interno establecido en node.title y también un div para el contenido.

He subido mi configuración y componentes a https://github.com/zackrosegithub/gatsby para que puedas echar un vistazo.

No estoy seguro de cómo arreglar

Solo quiero ver mi contenido representado en la pantalla.

Las herramientas de desarrollo no parecen ayudar cuando no hay contenido representado, ya que no puedo encontrar nada que inspeccionar para intentar acceder a él de otra manera.

Gracias por tu ayuda

  • Debe publicar los errores que podrían haber ocurrido en la compilación de gatsby. Verificar todo tu proyecto en github es mucho pedir.

    – Logemann

    27 de enero de 2021 a las 11:12

Consultar wordpress con metaconsultas de Gatsby
Ferran Buireu

Su enfoque es parcialmente correcto. Está usando un enfoque basado en promesas, pero cuando usa then() ya lo está resolviendo y resolviendo parcialmente, por lo que no necesita usar la devolución de llamada de resolve()que puede estar causando una duplicación de la función de promesa, así que intente eliminarla.

Además, es posible que desee utilizar un enfoque más amigable usando async/await funciones Algo como:

exports.createPages = async ({ graphql, actions, reporter }) => {
  const yourQuery= await graphql(
          `
            {
              allWordpressPost {
                edges{
                  node{
                    id
                    title
                    slug
                    excerpt
                    content
                  }
                }
              }
            }
          `
  if (yourQuery.errors) {
    reporter.panicOnBuild(`Error while running GraphQL query.`);

    return;
  }
  

          const postTemplate = path.resolve("./src/templates/post.js")
          _.each(yourQuery.data.allWordpressPost.edges, edge => {
            createPage({
              path: `/post/${edge.node.slug}/`,
              component: slash(postTemplate),
              context: edge.node,
            })
          })
        })

 // and so on for the rest of the queries

};

Además, coloque un console.log(pageContext) en tus postTemplate para obtener lo que está llegando a ese punto y nombrar la plantilla como:

const Post = ({pageContext}) => {
 console.log("your pageContext is", pageContext); 
return  <div>
        <h1>
            {pageContext.title}
        </h1>
    </div>
}

export default Post;

  • fantástico, ese console.log también es muy útil 🙂 gracias

    usuario15065996

    27 de enero de 2021 a las 19:37

  • Esta pregunta está completamente fuera de los límites de este tema y es extremadamente amplia.

    – Ferrán Buireu

    27 de enero de 2021 a las 20:27

  • Si el problema se resolvió, considere aceptar/votar la respuesta para cerrar el tema

    – Ferrán Buireu

    28 de enero de 2021 a las 8:48

  • Sin preocupaciones; no he tenido la oportunidad de volver a escribir todavía iba a esperar hasta que lo hubiera probado ya que actualmente el contenido aún no se está procesando

    usuario15065996

    28 de enero de 2021 a las 21:21


¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad