Skip to content
Fetch your top tracks, artists and a list of playlists from Spotify to use it on your Gatsby website
Branch: master
Clone or download
Pull request Compare This branch is 4 commits ahead, 1 commit behind leolabs:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples/fetch-playlists-semantic-ui
src
.gitignore
.nvmrc
.prettierrc
.travis.yml
README.md
package.json
tsconfig.json
tslint.json
yarn.lock

README.md

gatsby-source-spotify

npm Build Status

This source plugin for Gatsby fetches personal statistics and playlists from Spotify. You can use this to display a list of your favorite artists and tracks, or your public playlists.

gatsby-source-spotify is compatible with gatsby-image. Images are always accessible using the image key of a node. Downloaded images are cached locally to improve build times.

Configuration

To use this plugin, you have to provide a client id, a client secret, and a personal refresh token from Spotify.

  1. To do this, first create a new Spotify App.

  2. After you created it, click the "Edit Settings" button on the application dashboard, add http://localhost:5071/spotify to the "Redirect URIs" section and hit save.

  3. You can then run gatsby-source-spotify's integrated tool to log in using your Spotify account and to get your refresh token.

$ npx gatsby-source-spotify token <clientId> <clientToken>
  1. Put those credentials into your gatsby-config.js and you're good to go 🎉
{
  resolve: `gatsby-source-spotify`,
  options: {
    clientId: `<CLIENT_ID>`,
    clientSecret: `<CLIENT_SECRET>`,
    refreshToken: `<REFRESH_TOKEN>`,

    fetchPlaylists: true, // optional. Set to false to disable fetching of your playlists
    fetchRecent: true, // optional. Set to false to disable fetching of your recently played tracks
    timeRanges: ['short_term', 'medium_term', 'long_term'], // optional. Set time ranges to be fetched
  },
},

Time Ranges

According to Spotify, the time ranges are specified as follows:

  • short_term: Data from the last four weeks
  • medium_term: Data from the last six months
  • long_term: All data since the account's creation

Querying Data

For your top artists and tracks, I'd recommend filtering by one time_range and sorting by order. This ensures that you get the correct results.

Example for your top artists with images and genres:

{
  allSpotifyTopArtist(
    filter: { time_range: { eq: "medium_term" } }
    sort: { fields: order }
  ) {
    edges {
      node {
        name
        genres
        image {
          localFile {
            childImageSharp {
              fluid(maxWidth: 400) {
                ...GatsbyImageSharpFluid_withWebp
              }
            }
          }
        }
      }
    }
  }
}

Contributing

If you're interested in contributing, please feel free to open a pull request.

You can’t perform that action at this time.