Best way to create dynamic pages from third party content (Medium)

[Kaisaurus]

Description

I want a website to show medium blog posts and have individual pages for each post.
Is this possible with Gatsby without having to do a re-build every time there is a new post?
If its possible, what would be the approach to this? (I am a bit of a gatsby noob so a detail to the approach would be greatly appreciated)

Environment

Gatsby version: 1.9.213
Node.js version: 8.9.4

At the moment I am getting all medium post with this code:

async function getMediumFeed(username = '@kaigotoh') {
  const mediumUrl = `https://medium.com/feed/${username}`
  const resp = await fetch(
    `https://api.rss2json.com/v1/api.json?rss_url=${mediumUrl}`
  )
  return await resp.json()
}

and calling the function like this

const mediumContent = getMediumFeed()
    .then(data => console.log(data))

[KyleAMathews]

If you want data to be part of the "static" build then you have to rebuild every time there's a change.

If you fetch the data in the client, then you don't have to rebuild since the data is fetched every time a user visits your page.

The first option means data will load much faster but you have to rebuild. The second option means you don't have to rebuild but it means every time someone visits, the design will jump as the medium posts will take a while to show up.

There's a source plugin for Medium https://www.gatsbyjs.org/packages/gatsby-source-medium/

[Kaisaurus]

Thank you for the reply, this helped me stop looking in the wrong direction for too long.

I guess ideally I want something like a web hook, but to keep it simple for now I am loading the posts from medium every time the page loads.

For anyone also looking to do this, here is code for a simple react component doing this using the
getMediumFeed function posted earlier:

export class MediumPageTemplate extends Component {
  state = {
    posts: []
  }
  componentDidMount(posts) {
    getMediumFeed()
      .then(data => this.setState({ posts: data.items }))
      .catch(error => console.log(`error :${error}`))
  }
  renderPost(post, index) {
    const { title, pubDate, link, content, description } = post
    return (
      <section className="section" key={index}>
        <div className="container content">
          <div className="columns">
            <div className="column is-10 is-offset-1">
              <h1 className="title is-size-2 has-text-weight-bold is-bold-light">
                {title}
              </h1>
              <HTMLContent content={description} />
            </div>
          </div>
        </div>
      </section>
    )
  }

  render() {
    const { title } = this.props
    const { posts } = this.state

    return (
      <div className="section">
        <h2 className="title is-size-3 has-text-weight-bold is-bold-light">
          {title}
        </h2>
        {posts.map((post, index) => this.renderPost(post, index))}
      </div>
    )
  }
}

[huanggm]

@Kaisaurus @KyleAMathews Sorry to disturbing you! I am just have the same problem these days.
If we fetched data from client, it seems that we don't need gatsby. It's a pure react app.

I am a newbie in gatsby and react. I am not sure about what I say.