Skip to content

🎬 Source from The Movie Database (TMDb) in Gatsby


Notifications You must be signed in to change notification settings


Repository files navigation


Source from The Movie Database (TMDb) API (v3) in Gatsby. You can leverage any endpoint from the official documentation and pull the data directly into Gatsby's GraphQL data layer. Customize the plugin to your needs by providing customized endpoints -- read more about that in the advanced configuration section.

You can see a live preview at (Source Code).

Create your own website with gatsby-starter-tmdb.

gatsby-source-tmdb is released under the MIT license. Current npm package version. Downloads per month on npm. Total downloads on npm. Website Follow @lekoarts_de


npm install gatsby-source-tmdb


You'll need an API Key and Session ID from TMDb.

  1. Create your API key
  2. Generate a Session ID

Recommendation: Save both values inside an .env file as environment variables. Read more about env vars in Gatsby.

You can find all information on the API endpoints in the official TMDb v3 documentation.


Add the plugin to your gatsby-config.js


module.exports = {
  plugins: [
      resolve: "gatsby-source-tmdb",
      options: {
        apiKey: process.env.API_KEY,
        sessionID: process.env.SESSION_ID,

The plugin is not requesting all available endpoints by default but only a selected list of endpoints. It always requests the /account & /configuration endpoint. Please see the plugin's README for more detailed information, including options & advanced customization.


  • moviedb-promise was used for v1 of this plugin and has been really helpful/inspirational when creating v2. Thanks!

Support Me

Thanks for using this project! I'm always interested in seeing what people do with my projects, so don't hesitate to tag me on Twitter and share the project with me.

Please star this project, share it on Social Media or consider supporting me on Patreon or GitHub Sponsor!