ottijp blog

Gatsby.jsのRSSフィードへのリンクは<a>を使う

2019-09-29 Tags: Gatsby

Gatsby.jsのプラグインgatsby-plugin-feedを使って生成したRSSフィードrss.xmlに対するリンクに<Link>を使うと404になってしまいました.

プラグインの設定は次のような感じです.

gatsby-plugin-feed.js
`gatsby-plugin-feed`,
{
  resolve: `gatsby-plugin-feed`,
  options: {
    feeds: [
      {
        serialize: ({ query: { site, allBlogPost } }) => {
          return allBlogPost.nodes.map(node => {
            return Object.assign({}, node.frontmatter, {
              title: node.title,
              description: node.parent.excerpt,
              date: node.date,
              url: site.siteMetadata.siteUrl + node.slug,
              guid: site.siteMetadata.siteUrl + node.slug,
              custom_elements: [{ "content:encoded": node.parent.html }],
            })
          })
        },
        query: `
          {
            site {
              siteMetadata {
                siteUrl
              }
            }
            allBlogPost (
              sort: { fields: date, order: DESC }
              limit: 100
            ) {
              nodes {
                date(formatString: "YYYY-MM-DDTHH:mm:ss+09:00")
                title
                slug
                parent {
                  ... on MarkdownRemark {
                    excerpt
                    html
                  }
                  ... on Asciidoc {
                    excerpt
                    html
                  }
                }
              }
            }
          }
        `,
        output: '/rss.xml',
        title: siteName,
      },
    ],
  },
},

これを,次のような感じでリンクを張っても,404になってしまいました.

layout.js
<Link
style={{
  boxShadow: `none`,
  textDecoration: `none`,
  display: 'flex',
  alignItems: 'flex-end',
}}
to={'/rss.xml'}
>
<IoLogoRss size="2em" color="inherit" />
</Link>

そこで次のように<a>タグに変えるとちゃんとアクセスできるようになりました.

layout.js
<a
style={{
  boxShadow: `none`,
  textDecoration: `none`,
  display: 'flex',
  alignItems: 'flex-end',
}}
href={'/rss.xml'}
>
<IoLogoRss size="2em" color="inherit" />
</a>

rss.xmlを生成するタイミングが違うから,<Link>でアクセス可能なルートに入ってないのかな?ちょっと原因はわかってないですが,回避策ということで.


ottijp
Satoshi SAKAO (@ottijp)

都内でアプリケーションエンジニアをしています

...