Skip to main content
View plugin on GitHub
See starters using this

Gatsby icon Simplecast icon

gatsby-source-simplecast

A Gatsby plugin to load podcast episodes from the Simplecast API.

Installation

$ npm i gatsby-source-simplecast

OR

$ yarn add gatsby-source-simplecast

Usage

In your gatsby-config.js file, load in the plugin along with the parameters of which podcast episodes to load:

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-simplecast',
      options: {
        token: 'abcdefghijklmnopqrstuvwxyz1234567890',
        podcastId: 'abc123de-456f-gh78-90ij-klmn1234opqr',
      },
    },
  ],
};

In your page, construct a query to get the data you need from the API.

import React from 'react';
import { graphql } from 'gatsby';
import Layout from 'components/Layout';

// Data from the pageQuery below is available as props to your page component!
const PodcastPage = ({
  data: {
    allSimplecastPodcastEpisode: { edges: episodes },
  },
}) => {
  return (
    <Layout>
      <h1>My Podcast Episodes</h1>
      <ul>
        {episodes.map(({ node }) => (
          <li key={node.id}>
            <article>
              <h2>
                Episode {node.number}: {node.title}
              </h2>
              <p>Published {node.publishedAt}</p>
              <hr />
              <p>{node.description}</p>
              <a href={`/podcasts/${node.slug}`}>Listen</a>
              <a href={node.enclosureUrl}>Download</a>
            </article>
          </li>
        ))}
      </ul>
    </Layout>
  );
};

export const pageQuery = graphql`
  query PodcastPageQuery {
    allSimplecastPodcastEpisode {
      edges {
        node {
          id
          slug
          enclosureUrl
          number
          publishedAt(formatString: "MMMM D, Y")
          title
          description
        }
      }
    }
  }
`;

export default PodcastPage;

Options API

Option Type Description Default
token string (required) Simplecast API key. See the Simplecast API documentation for details.
podcastId string (required) The ID of the podcast you want to fetch. The podcast ID can be found in the URL from your Simplecast dashboard under podcast episode settings.
fetchLimit number The maximum number of episodes retrieved. 99