es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Cómo obtener el valor actualizado / última modificación para archivos estáticos para el mapa del sitio de Gatsby

Cómo obtener el valor actualizado / última modificación para archivos estáticos para el mapa del sitio de Gatsby

11 Jun, 2023 Programación

He estado usando Gatsby y he estado intentando crear un sitemap con valores lastmod para páginas estáticas (src/pages). Vi un trozo de código aleatorio en el que alguien ejecutó la consulta que se muestra a continuación dentro de su archivo gatsby-config.js y pudo obtener la fecha en que las modificó por última vez.

graphql
allSitePage {
nodes {
path
context {
updated
}
}
}

No he logrado lograr lo mismo.

Esto es lo que he intentado hasta ahora. He supuesto que estaba utilizando un gestor de contexto y configuré el contexto dentro de sus archivos js y actualicé el valor del contexto manualmente cada vez que editó los archivos.

const Updated = React.createContext('2021-11-29')

class IndexPage extends React.Component {
  render() {
    return (
      <div>
        {/* Ejemplo */}
      </div>
    )
  }
}

/* También intenté IndexPage.contextType = Updated */
IndexPage.useContext = Updated

export default IndexPage

He vuelto a ejecutar la consulta, pero no he podido pasar el valor para que se vea dentro de la consulta de graphql. Esta es la consulta que ejecuté en Graphql playbook.


consulta MyQuery {
allSitePage {
nodes {
id
contexto {
updated
}
}
}
}

Así es como se ve toda mi estructura de datos en el Graphql playbook: [insertar enlace de imagen]

¿Cómo podría obtener/establecer un valor updated que se utilizaría en gatsby-config.js al crear un sitemap?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Basándonos en lo que has intentado hasta ahora, parece que estás tratando de usar el contexto de React para pasar datos a tu consulta de GraphQL. Sin embargo, esto no funcionará porque GraphQL se ejecuta en tiempo de compilación, antes de que se rendericen los componentes de React. Por lo tanto, tendrás que encontrar un enfoque diferente para pasar el valor updated a tu archivo gatsby-config.js.

    Una posible solución es utilizar una API de Gatsby Node llamada onCreateNode. Esta API se llama cada vez que se crea un nuevo nodo en tu sitio de Gatsby, y te permite modificar los datos de ese nodo antes de que sean procesados por Gatsby.

    Aquí tienes un ejemplo de código que demuestra cómo podrías usar onCreateNode para agregar un campo updated a cada nodo SitePage basándote en la fecha de modificación del archivo correspondiente:

    const { createFilePath } = require('gatsby-source-filesystem')
const moment = require('moment')

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions
  if (node.internal.type === 'SitePage') {
    // Use the `createFilePath` function to generate a file path for this page
    const slug = createFilePath({ node, getNode })

    // Find the file corresponding to this page
    const fileNode = getNode(node.parent)

    // Get the modified timestamp of the file
    const modifiedTimestamp = moment(fileNode.modifiedTime).valueOf()

    // Add a new field to the SitePage node with the updated timestamp
    createNodeField({
      node,
      name: 'updated',
      value: modifiedTimestamp,
    })
  }
}

    Lo que hace este código es:

    1. Iterar sobre cada nodo en tu sitio, buscando nodos SitePage.
    2. Utilizar la función createFilePath para generar una ruta de archivo para cada página basándonos en los datos de su node y su nodo file padre.
    3. Encontrar el archivo correspondiente a cada página obteniendo el nodo parent del nodo SitePage.
    4. Obtener el timestamp de modificación del archivo utilizando el campo modifiedTime de los datos del archivo.
    5. Añadir un nuevo campo llamado updated a cada nodo SitePage, utilizando la función createNodeField proporcionada por Gatsby. Este campo contendrá el timestamp de modificación del archivo correspondiente.

    Una vez que tienes este campo updated agregado a tus nodos SitePage, puedes consultarlo en tu archivo gatsby-config.js de esta manera:

    module.exports = {
  siteMetadata: {
    // ...
  },
  plugins: [
    {
      resolve: 'gatsby-plugin-sitemap',
      options: {
        query: `
          {
            allSitePage {
              nodes {
                path
                field {
                  updated
                }
              }
            }
          }
        `,
        // ...
      },
    },
    // ...
  ],
}

    Ten en cuenta que estamos usando field.updated en lugar de context.updated, ya que agregamos el campo updated usando createNodeField en lugar de createPage.

    Con este campo updated agregado a tus nodos SitePage, ¡deberías poder generar un mapa del sitio con los valores lastmod que buscas!

Comments are closed.