- read

Listing Medium stories on a Gatsby site

Arnór Ragnarsson 31

So this is the first story in my “building my portfolio” series.
As previously mentioned in my story aar.is | Documenting my learnings” the aim of this series is to document the things that I do for my portfolio website, mainly for the fun of it but also in the hope that it will benefit others as well.
I decided to document this process using Medium.com, but I also want to have this documentation on my portfolio website. So I’m going to fetch the titles and links of my stories and display a list of links to my Medium stories on my site. This is the story were I show how I did it!

What to use?

So, there are many ways to do this, in my case using Gatsby.js there are multiple Gatsby plugins that are capable of fetching from Medium.com. The first thing that popped up on Google when trying to find out what to use was a plugin called gatsby-source-medium. Well this is it I thought, I just install this plugin, follow the instructions and viola, job done!
Oh how I was wrong.
Well this is an official Gatsby plugin and in their documentation it says that “only the most recent 10 posts are returned”, which is fine with me for now. However after installing it and some code magic I only got the recent 3 posts returned. No matter how many users I tried it on I always just got 3 . Knowing that I am about to write more than 3 stories for this project I felt that this was not going to work.

gatsby-source-rss-feed to the rescue.

After some digging I found another Gatsby plugin that was worth trying. gatsby-source-rss-feed was that plugin. That plugin worked perfectly so I think it’s time to describe how it works.

First: Let’s install dependencies.

Okey, not dependencies (plural), you only need to install one dependency, “gatsby-source-rss-feed”. So in your command line tool add the following command.

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

The gatsby-config file

Once the dependency has been installed all you need to do is to put this small code snippet to the gatsby-config.js file inside the plugins array.

plugins: [
{
resolve: `gatsby-source-rss-feed`,
options: {
url: `https://medium.com/feed/@username`,
name: `QueryName`
}
},
...

This plugin takes two essential options which are the url to your Medium account XML feed which you can find if you put /feed/ between medium.com and your username, and the name you want to have on your GraphQl query. In my case for the name I just went for AarBlog.

GraphQL work.

After installing the dependency and adding the snippet to gatsby-config file it’s time to start the program and check out the graphql playground via http://localhost:8000/___graphql.
In the “Explorer” (far left) you will find the “allFeedQueryName” (my case allFeedAarBlog) query, and that is what we are going to use to create this list.
So let’s dig into the “allFeedQueryName” query. Open up “edges” and then “node”. Inside “node” is a long list of things that you can query. I’m just going to use the “title” (name of medium story) and “link” (link to story) but I also query the “id” to use as an ID for every list element that will be created when I map through the query.
So my query is going to look like this:

allFeedAarBlog {
edges {
node {
id
title
link
}
}
}

Halfway there, let’s display this list.

Alright, now it’s time to display the list on the Gatsby site.
The first thing that I’m going to do is to create a new file in the “pages” folder and call it “stories” because it want my list do be displayed on the url aar.is/stories. Import React then create and export the React function “Stories” like so:

import React from 'react';const Stories = () => {
return(
<>
<h1>Stories</h1>
</>
)
};
export default Stories;

Add the GraphQL query.

After checking if everything works it’t time to add the query.
First we have to import the GraphQL Gatsby plugin:

import React from 'react';
import { graphql } from 'gatsby';
...

Then it’s time to add the query to the file:

import React from 'react';
import { graphql } from 'gatsby';
const Stories = () => {
return(
<>
<h1>Stories</h1>
</>
)
};
export const query = graphql`
{
allFeedAarBlog {
edges {
node {
id
title
link
}
}
}
}
`;
export default Stories;

That’s it, next up is to map through the list and display it.

Mapping and displaying.

So the query is ready, now it’s time to bring all of it to the frontend.
First we need to map through the query and decide how it’s going to be displayed.
For the purpose of my project the only thing that I am going to do is display the name of the story and add a link to that particular Medium story.
Now, I’m going to use an unordered list so now only thing left to do is to map through the query to create and display list elements including the titles with anchor elements wrapped around them with the link like this:

const Stories = (props) => {
return(
<>
<h1>Stories</h1>
<ul>
{props.data.allFeedAarBlog.edges.map(story => (
<li key={story.node.id}>
<a href={story.node.link} target="_blank">
{story.node.title}
</a>
</li>

))};
</ul>
</>
)
};

This is it!

So we are taking the query in as a prop and then mapping through it to get a list of stories titles with links to it. It’s working well in my case but please comment if you happen to stumble upon any errors.
But basically this is how I implemented a list of my Medium stories on my portfolio website. I hope this story was in any kind useful to you.

AAR