importing medium articles into gatsby

Question

I am trying to integrate my medium feed into gatsby and only want to select a few articles - not have the most recent ones. I was able to get the three most recent articles using this code:

index.config

 mediumRssFeed:
    "https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fmedium.com%2Ffeed%2F%40maxgraze",
  shownArticles: 3,

Articles.js

const Articles = () => {
  const MAX_ARTICLES = shownArticles

  const { isIntroDone, darkMode } = useContext(Context).state
  const [articles, setArticles] = useState()
  const articlesControls = useAnimation()

  // Load and display articles after the splashScreen sequence is done
  useEffect(() => {
    const loadArticles = async () => {
      if (isIntroDone) {
        await articlesControls.start({
          opacity: 1,
          y: 0,
          transition: { delay: 1 },
        })
        fetch(mediumRssFeed, { headers: { Accept: "application/json" } })
          .then(res => res.json())
          // Feed also contains comments, therefore we filter for articles only
          .then(data => data.items.filter(item => item.categories.length > 0))
          .then(newArticles => newArticles.slice(0, MAX_ARTICLES))
          .then(articles => setArticles(articles))
          .catch(error => console.log(error))
      }
    }
    loadArticles()
  }, [isIntroDone, articlesControls, MAX_ARTICLES])

But I was hoping to query specific articles using gatsby-source-medium. However, it only returns 4 (and not even the most recent ones at that).

Is there a way to get all my articles via gatsby-source-medium? Otherwise, is there a way to "hard code" the articles I want? I'm not sure how to filter using the rss feed api. Thanks for yoru help!

Answer 1

As you suggested, there's a more native way using gatsby-source-medium but the documentation lacks good examples.

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-source-medium`,
    options: {
      username: `username/publication`,
    },
  },
]

Update:

It seems to be a known bug with Medium source and there's nothing we can do on our project. For further details: gatsbyjs/gatsby#22491

A query like the following one will gather all posts from the user within the preview image:

query {
  allMediumPost(sort: { fields: [createdAt], order: DESC }) {
    edges {
      node {
        id
        title
        virtuals {
          subtitle
          previewImage {
            imageId
          }
        }
        author {
          name
        }
      }
    }
  }
}