Gatsby Content from RSS

In a previous post we looked at how to import content from Medium. Another potential source of content is an RSS feed. In this post we’ll see how RSS content can be imported into a Gatsby side.

🚀 TL;DR Show me the code. Look at the 30-rss-feed branch. This site is deployed here.

Setup

Install the gatsby-source-medium package. I added it to the list of dependencies in package.json.

In gatsby-config.js configure the package, specifying an URL and name for the RSS feed. In this case we’ll specify the RSS feed for DeSci Africa.

{
  resolve: `gatsby-source-rss-feed`,
  options: {
    url: `https://medium.com/feed/@desciafrica`,
    name: "RSS"
  }
}

GraphQL

With that setup you’ll find that there are a few new fields in the GraphQL schema:

• allFeedRss
• allFeedRssMeta
• feedRssMeta and
• feedRssMeta.

Construct a GraphQL query which uses one or more of these fields.

query RssQuery {
  allFeedRss {
    nodes {
      id
      title
      isoDate
    }
  }
}

That should yield results like this (abridged):

{
  "data": {
    "allFeedRss": {
      "nodes": [
        {
          "id": "69719a05-aa9b-5f27-8ae0-078ef042def1",
          "title": "Decentralized Science and The Future of Research Funding Part Two",
          "isoDate": "2024-02-05T08:54:52.000Z"
        },
        {
          "id": "5c7ec4f4-1654-50e3-a885-2cbc9f3a10df",
          "title": "Decentralized Science and The Future of Research Funding — Part One",
          "isoDate": "2024-01-15T13:37:15.000Z"
        },
        {
          "id": "9376cccf-9aa7-5640-9e14-26980da05aa2",
          "title": "Decentralized Science: The Future of Drug Discovery — Part Two",
          "isoDate": "2023-08-04T09:03:24.000Z"
        },
        {
          "id": "3ab152e7-7bde-59d4-9da7-b19e6edcac26",
          "title": "Decentralized Science: The Future of Drug Discovery — Part One",
          "isoDate": "2023-07-21T09:18:05.000Z"
        }
      ]
    }
  },
  "extensions": {}
}

List of Posts

To pull those data through to the site, modify src/templates/home.js, updating the GraphQL query and content that is rendered.

Conclusion

Implementing the above setup will enable you to pull data into your Gatsby site from one or more RSS feeds. The data available under the RSS GraphQL fields allows you to do fairly elaborate things with this content.

🚀 TL;DR Show me the code. Look at the 30-rss-feed branch. This site is deployed here.