Listing Medium stories on a Gatsby site

What to use?

gatsby-source-rss-feed to the rescue.

First: Let’s install dependencies.

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

The gatsby-config file

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

GraphQL work.

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

Halfway there, let’s display this list.

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

Add the GraphQL query.

import React from 'react';
import { graphql } from 'gatsby';
...
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;

Mapping and displaying.

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!

--

--

--

Web Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Pushing beyond the requirement — GSoC Week 9

React Authentication in Depth Part 2

Custom Toast in React Native | Cross-Platform support | Open for customisations

Combine React Views with External Models

images/contacts_ui.png

The JavaScript Front-End Options

Chapter 10 Keeping Your Promises

Components of React in 1 minute

Avoid Synchronous Code in Your Application

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Arnór Ragnarsson

Arnór Ragnarsson

Web Developer

More from Medium

How do I build my first homepage with GitHub Pages and Gatsby

https://licanhua.github.io

Add Points (and Popups for them) to a Mapbox GL JS map in React

It’s now a necessity to have your own online Portfolio.

Building a Hive Blog Front-End Website with NextJS

hive_next.png