React Gatsby GraphQL筛选近两日文章生成Google News站点地图

你可以通过原生JS的Date对象动态计算2天前的UTC标准时间字符串，直接传入GraphQL查询的筛选条件即可，操作步骤如下：

步骤1：计算动态日期值 #

通过以下代码生成48小时前的ISO标准时间字符串，格式和你测试的固定日期格式完全匹配：

const twoDaysAgo = new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString();

步骤2：对应不同使用场景插入查询 #

场景1：在gatsby-config.js中配置gatsby-plugin-advanced-sitemap #

直接在配置文件顶部计算日期，插值到查询语句中即可：

// gatsby-config.js 开头先计算日期
const twoDaysAgo = new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString();

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-advanced-sitemap`,
      options: {
        additionalSitemaps: [
          {
            // 配置独立的Google News站点地图
            name: 'google-news',
            query: `
              {
                allArticle(sort: {order: DESC, fields: date}, filter: {date: {gte: "${twoDaysAgo}"}}) {
                  edges {
                    node {
                      date
                      excerpt
                      title
                      link
                      slug
                    }
                  }
                }
              }
            `,
            // 其余站点地图输出配置按你的原有需求填写即可
          }
        ]
      }
    }
  ]
}

场景2：在gatsby-node.js中通过GraphQL查询获取数据 #

可以将计算好的日期作为查询变量传入，写法更规范：

// gatsby-node.js
exports.createPages = async ({ graphql }) => {
  const twoDaysAgo = new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString();
  
  const newsArticleResult = await graphql(`
    query($twoDaysAgo: Date!) {
      allArticle(sort: {order: DESC, fields: date}, filter: {date: {gte: $twoDaysAgo}}) {
        edges {
          node {
            date
            excerpt
            title
            link
            slug
          }
        }
      }
    }
  `, { twoDaysAgo });

  // 后续处理查询结果、生成站点地图的逻辑
}

注意：Gatsby为静态站点生成器，该日期会在每次执行gatsby build时计算生成，如需保证站点地图始终包含近2天的内容，你需要设置定时构建任务，每1-2天重新构建部署一次站点即可。

内容的提问来源于stack exchange，提问作者Harshit Rastogi