DEV Community

loading...
Cover image for Add a DEV.to blog feed to your Gatsby site in 5 mins.

Add a DEV.to blog feed to your Gatsby site in 5 mins.

justinjunodev profile image Justin Juno ・5 min read

While building my new site (still in progress), I came across a fantastic plugin by Aivan Monceller, called Gatsby-Source-Dev. This plugin is used to fetch all of a user's articles from Dev.to's API.

In this example, we will use to it to display a feed of recent posts on our Gatsby site. Each post in our blog feed will contain a title, date, description and a url that will link/ open the article on Dev.to in a new window.

Note: There are additional options for cover images, tags, positive reaction and comment counts, and more that you can explore in GraphiQL if you'd like to extend this tutorial further.

Here is a preview of what we will be building:


Let's get started.

Open your terminal and create a new Gatsby project. I named mine my-devto-blog, but feel free to choose a different name.

# terminal
gatsby new my-devto-blog
Enter fullscreen mode Exit fullscreen mode

Now that we've created our project, let's cd into the project directory and install the gatsby-source-dev plugin.

# terminal
cd my-devto-blog
npm i gatsby-source-dev
Enter fullscreen mode Exit fullscreen mode

For the plugin to work, we will need to add it to our gatsby-config.js file. This file located in the root of our project directory and is used to define and configure our site's meta-data and plugins. Add the following object to your site's plugins array.

// gatsby-config.js
{
  resolve: "gatsby-source-dev",
  options: {
    username: 'dabit3'
  }
}
Enter fullscreen mode Exit fullscreen mode

In the username string, replace dabit3 with your Dev.to username. I would use my own, but I don't have a lot of posts or nearly as good of content as my friend Nader. Side note, if you are interested in learning more about AWS Amplify or GraphQL, be sure to check him out.

Return to your terminal and develop your Gatsby site.

# terminal
gatsby develop
Enter fullscreen mode Exit fullscreen mode

In your code editor, navigate to your projects src directory. Create a new folder called hooks. Here we are going to create a new file (hook) for our gathering our posts called usePosts.js.

I'm going to assume that if you are using Gatsby, you have a basic understanding of GraphQL and React, so I'm not going to dive into details here, but I will still provide a general explanation of what is happening here.

We are importing GraphQL and writing a static query that is going look for and grab our ten most recent posts. Each post is going to have an id, url, title, description, and a formatted date (as described above). Next, we will return that information by mapping over our data and creating a post object for each node.

// src/hooks/usePosts.js
import { graphql, useStaticQuery } from 'gatsby'

const usePosts = () => {
    const data = useStaticQuery(graphql`
    query {
      allDevArticles(limit: 10) {
        edges {
          node {
            article {
              id
              url
              title
              published_at(formatString: "MM-DD-YYYY")
              description
            }
          }
        }
      }
    }
  `)
    return data.allDevArticles.edges.map(post => ({
        id: post.node.article.id,
        url: post.node.article.url,
        title: "post.node.article.title,"
        date: post.node.article.published_at,
        desc: post.node.article.description,
    }))
}

export default usePosts
Enter fullscreen mode Exit fullscreen mode

FYI: If you see quotation marks around post.node.article.title,, remove them. This line should be formatted like the others. Not sure what is going on here . . . moving on. 🤷‍♂️


In all honesty, we didn't have to create a separate hook for gathering our posts. We could have easily written the query directly in our posts component (next step), but there are benefits to this approach.

The first is that it separates our logic. The second is that we can return a destructed object that will make the implementation of our hook easier and more readable. Kudos to Jason Lengstorf for sharing this approach in his Gatsby course on Frontend Masters.

Next, let's create a posts component in our src/components/ directory and add the following code.

// src/components/posts.js
import React from 'react'
import PropTypes from 'prop-types'
import usePosts from '../hooks/usePosts'

// Individual Post
const Post = ({ title, date, url, desc }) => (
    <article>
        <a href={url} target="_blank" rel="noopener noreferrer">
            <h2>{title}</h2>
        </a>
        <p>
            <small>Posted on: {date}</small>
        </p>
        <p>{desc}</p>
    <hr />
    </article>
)

Post.propTypes = {
    title: PropTypes.string.isRequired,
    date: PropTypes.string.isRequired,
    url: PropTypes.string.isRequired,
    desc: PropTypes.string.isRequired,
}

// All Posts
const Posts = () => {
    const posts = usePosts()

    return (
        <div>
        <p><strong>My Recent Posts:</strong></p>            
        {posts.map(post => (
                <Post
                    key={post.id}
                    title={post.title}
                    date={post.date}
                    url={post.url}
                    desc={post.desc}
                />
            ))}
        </div>
    )
}

export default Posts
Enter fullscreen mode Exit fullscreen mode

Depending on your experience with React and JavaScript, the code above may look intimidating but it is fairly straight forward.

In the Posts component (function), we are initializing the usePosts hook we just created and storing that data in a constant (variable) named posts. Then in our return, we are mapping over this posts data and creating a Post component for each post. Since each Post will need a key title date url and desc, we will pass them as props. You should recognize these values from our usePosts hook.

Then in the Post component (function), we accept these props and create a simple HTML markup for the post. We've also outlined our propTypes below to make sure that we are receiving the correct data types from our props. This isn't required but is good practice and can help prevent bugs, especially in larger applications.

To display our new blog feed on our home page, we will need to add the Posts component to our index page. Navigate to the src/pages directory and import your Posts component and add it to the page.

For the purposes of this tutorial, I removed all of the other markup that was included on the index page from the initial install and am only showing our Posts.

// src/pages/index.js
import React from "react"
import Layout from "../components/layout"
import SEO from "../components/seo"
import Posts from "../components/posts"

const IndexPage = () => (
  <Layout>
    <SEO title="Home" />
    <Posts />
  </Layout>
)

export default IndexPage
Enter fullscreen mode Exit fullscreen mode

If you followed the steps correctly, you should be able to navigate to your localhost and see your blog feed. If you are seeing errors, return to your terminal and end the current session ctrl-c and re-run the gatsby develop command again. If errors persist, feel free to reference this project on Code Sandbox or GitHub.


Thanks for reading!

I sincerely appreciate you taking the time to read this article. If you found it helpful, please give it some love or share it with your friends. If there are additional topics you'd like me to cover in the future, let me know in the comments.

✌️♥️💻


Cover Photo by Nik Shuliahin on Unsplash

Discussion (1)

pic
Editor guide
Collapse
rajeshroyal profile image
Rajesh Royal

useful information 👍