Zenn
📶

Gatsby.jsでRSSを取得する

2023/04/21に公開
Gatsby.js
GraphQL
RSS
tech

RSSフィードとは

RSSフィードは、ブログやニュースサイトがコンテンツを配信するために使用する、サイトのタイトル、記事のタイトル、要約、URL、更新日時などの情報を含んだXMLベースのフォーマットです。

購読者はRSSリーダー（rssやrss-parserなど）と呼ばれるアプリケーションやサービスを利用して、新しい記事や更新情報を閲覧・利用することができます。

zennやnote、はてなブログなどはRSSで記事を取得することができます。

Gatsby.jsでRSSを取得する

今回は、Gatsby.jsでRSSを取得します。

Gatsby.jsプラグインコミュニティがgatsby-source-rss-feedを提供しているので今回はこれを使用します。
内部的にはrss-parserが使用されています。
https://www.gatsbyjs.com/plugins/gatsby-source-rss-feed/

はじめる

インストール＆設定

まずはじめに、gatsby-source-rss-feedをインストールしていきます。

npm install --save gatsby-source-rss-feed

or

yarn add gatsby-source-rss-feed

次に、gatsby-config.jsでプラグインを追加します。
urlには取得するRSSのサイトを記述します。
RSSが作成されているサイトであれば、https://{FQDN}/rssで取れると思います。devtoolsなどを使用して検索したりすれば探し出せるかと思います。

gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: "gatsby-source-rss-feed",
      options: {
        url: "https://hogeBlog.com/rss", // 取得するRSSのサイトのURL
        name: "HogeBlog", // 任意の名前を設定
      },
    },
  ],
};

取得

設定が完了したら、GraphQLクエリで取得したいRSSにアクセスできるようになります。
以下は全件取得のqueryの例です。
GraphQLでは値をフィールドで指定して取得することができるので、今回はid,title,linkのみを取得します。
フィールドがわからない場合は、Gatsby.jsで開発していればhttp://localhost:8000/___graphqlでGraphiQL（IDE）を立ち上げることができるのでそこから確認すると良いと思います。
allFeedHogeBlogはgatsby-config.jsのnameで設定した値を入れます。

export const query = graphql`
  query {
    allFeedHogeBlog {
      edges {
        node {
          id
          title
	  link
        }
      }
    }
  }
`
index.tsx
import { graphql } from "gatsby"
const PageComponent = ({ data }) => {
  const HogeBlogData = data.allFeedHogeBlog.edges;
  
  return (
    <div>
      <h1>ブログ一覧</h1>
      <ul>
        {posts.map(({ node }) => (
          <li key={node.id}>
            <a href={node.link} target="_blank" rel="noopener noreferrer">
              {node.title}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}

コンテンツを一つだけ取得

上記のqueryは全件取得のqueryになります。
コンテンツを一つだけ取得したい場合は、以下のようにallを外したqueryを使用することで一つだけのコンテンツを取得することができます。

feedHogeBlog {
  title
  link
  content
}

複数のqueryを使用する

トップページでは複数のコンテンツ（例えば、ニュースとブログなど）を取得したい場合があると思います。
GraphQLでは一つのqueryで取得することができます。
以下では、先ほど取得したRSSに加えてnewsのコンテンツを取得しています。
また、RSSの方はlimitを追加して、3件のみ取得するようにしました。

export const query = graphql`
  query {
    allFeedHogeBlog(limit: 3) {
      edges {
        node {
          id
          title
	  link
        }
      }
    }
    news {
      edges {
        node {
	  id
	  title
	  content
	}
      }
    }
  }
`

コンポーネントで取得する

上記の取得方法はpage queryと呼ばれるもので、src/pages/のみで使用できるものになります。
コンポーネントで取得する場合は、useStaticQueryを使用して取得することができます。

src/component/blog.tsx
import { useStaticQuery, graphql } from "gatsby"

export default function Blog() {
  const data = useStaticQuery(graphql`
    query {
      allFeedHogeBlog {
        edges {
          node {
            id
            title
	    link
          }
        }
      }
    }
  `)
  
  // 以下にjsxの記載
}

おわり

以上で、Gatsby.jsを使用してRSSを取得することができたかと思います。
Gatsby.jsはGraphQLを使用しますが、取得するだけではあるのでそこまで難しく考える必要はないかと思います。
今回、gatsby-source-rss-feedを使用して、設定とGraphQLのqueryを書くだけでとても簡単に取得することができました。

Gatsby.jsの公式プラグインコミュニティからかなり多くのプラグインが提供されているみたいなので便利に活用できると良いと思います！
https://www.gatsbyjs.com/plugins

Discussion