DEV Community

loading...
Cover image for Easily add your DEV posts to any Gatsby site

Easily add your DEV posts to any Gatsby site

basilebong profile image Basile Bong ・3 min read

Last week I created a Gatsby source plugin called gatsby-source-mydev. This plugin is an out-of-the-box integration between your Gatsby site and your DEV account by using the DEV beta API endpoints.

At the moment it only retrieves all articles, but this source plugin will evolve and grow depending on the DEV API.

I will show you step by step how to use this source plugin within your Gatsby site.

GitHub logo basilebong / gatsby-source-mydev

Add your dev.to posts to your gatsby site!

Add your dev.to posts to your gatsby site!

Install

npm i gatsby-source-mydev
Enter fullscreen mode Exit fullscreen mode

How to use

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-mydev`,
      options: {
        apiKey: `myApiKey15535186`,
      },
    },
  ],
}
Enter fullscreen mode Exit fullscreen mode

Find more information on how to generate a dev.to API key here

Note: It is recommended to use a .env file to store the API key.

How to query

query MyQuery {
  allMyDev {
    nodes {
      article {
        slug
        body_markdown
        canonical_url
        cover_image
        comments_count
        description
        id
        page_views_count
        path
        public_reactions_count
        positive_reactions_count
        published
        published_at
        published_timestamp
        tag_list
        title
        type_of
        url
        user {
          github_username
          name
          profile_image
          twitter_username
          profile_image_90
          username
          website_url
        }
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode



Create an API key

  1. Go to https://dev.to/settings/account
  2. Navigate to the section DEV Community API Keys
  3. Add a project name and generate your API Key

Generate a DEV API Key

Configure your Gatsby site

Create a new Gatsby site:

gatsby new mysite
cd ./mysite
Enter fullscreen mode Exit fullscreen mode

Install all dependencies:

npm i
Enter fullscreen mode Exit fullscreen mode

Install dotenv and gatsby-source-mydev:

npm i -S dotenv gatsby-source-mydev
Enter fullscreen mode Exit fullscreen mode

Create a .env file at the root of your project:

touch .env
Enter fullscreen mode Exit fullscreen mode

Edit .env and add the following line.
Replace MYAPIKEYXXXXX with your API key.

DEV_API_KEY=MYAPIKEYXXXXX
Enter fullscreen mode Exit fullscreen mode

Edit gatsby-config.js:

// In your gatsby-config.js
require('dotenv').config();

module.exports = {
  plugins: [
    // ...
    {
      resolve: `gatsby-source-mydev`,
      options: {
        apiKey: process.env.DEV_API_KEY,
      },
    },
  ],
}
Enter fullscreen mode Exit fullscreen mode

Run your Gatsby site and go to http://localhost:8000/___graphql.

npm start
Enter fullscreen mode Exit fullscreen mode

In the GraphQL explorer you will see myDev and allMyDev.

Note: Your .env file should always be in .gitignore then it contains confidetial information that should not be comitted.

Create a page for each article

Create a template file:

touch src/templates/blog.js
Enter fullscreen mode Exit fullscreen mode

Install react-markdown:

npm i -S react-markdown
Enter fullscreen mode Exit fullscreen mode

Edit src/templates/blog.js:

import React from "react"
import ReactMarkdown from "react-markdown"

import Layout from "../components/layout"
import SEO from "../components/seo"

export default function Template({
  pageContext, // this prop will be injected by the GraphQL query below.
}) {
  const { article } = pageContext // data holds your post data
  return (
    <Layout>
        <SEO title={article.title} />
        <div className="blog-post-container">
            <div className="blog-post">
                <h1>{article.title}</h1>
                <h2>{article.published_at}</h2>
                <ReactMarkdown>{article.body_markdown}</ReactMarkdown>
            </div>
        </div>
    </Layout>
  )
}
Enter fullscreen mode Exit fullscreen mode

Edit gatsby-node.js:

/**
 * Implement Gatsby's Node APIs in this file.
 *
 * See: https://www.gatsbyjs.com/docs/node-apis/
 */

// You can delete this file if you're not using it

exports.createPages = async ({ actions, graphql, reporter }) => {
    const { createPage } = actions
    const blogPostTemplate = require.resolve(`./src/templates/blog.js`)
    const result = await graphql(`
        query {
            allMyDev {
            nodes {
                article {
                body_markdown
                canonical_url
                comments_count
                cover_image
                description
                id
                page_views_count
                path
                positive_reactions_count
                public_reactions_count
                published
                published_at
                published_timestamp
                slug
                tag_list
                title
                type_of
                url
                user {
                    github_username
                    name
                    profile_image
                    profile_image_90
                    twitter_username
                    username
                    website_url
                }
                }
            }
            }
      }
    `)
    // Handle errors
    if (result.errors) {
      reporter.panicOnBuild(`Error while running GraphQL query.`)
      return
    }
    result.data.allMyDev.nodes.forEach(({ article }) => {
      createPage({
        path: `blog/${article.slug}`,
        component: blogPostTemplate,
        context: {
            article: article
        },
      })
    })
}
Enter fullscreen mode Exit fullscreen mode

Good job, you did it! Now when you go to http://localhost:8000/blog/article-slug you will see the content of your DEV article.

Note: Replace article-slug by the slug of an article. The easiest way to find an article's slug is to go to your dev.to article and to copy paste the end of the url: https://dev.to/basilebong/THIS-IS-YOUR-SLUG

I will leave the creation of a blog page list to you.


Do you need help or do you have an idea for a new feature? Open an issue here.

If you like my posts follow me on dev.to and twitter!

Discussion

pic
Editor guide
Collapse
georgedoescode profile image
George Francis

Nice! I was just wondering about this last night :)