Skip to content
example of gatsby-source-spotify
Branch: master
Clone or download
Latest commit e8c67e4 Mar 4, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Album Cover Art Mar 4, 2019
.env.example
.gitignore
.nvmrc nvmrc for netlify Mar 4, 2019
.prettierrc Initial commit from gatsby: (https://github.com/pretzelhands/gatsby-s… Mar 4, 2019
LICENSE gatsby source spoptify example Mar 4, 2019
README.md
gatsby-browser.js
gatsby-config.js Album Cover Art Mar 4, 2019
gatsby-node.js Initial commit from gatsby: (https://github.com/pretzelhands/gatsby-s… Mar 4, 2019
gatsby-ssr.js
package-lock.json Album Cover Art Mar 4, 2019
package.json

README.md

Example of gatsby-source-spotify

Installation

cp .env.example .env.development
# fill in the  SPOTIFY_CLIENT_ID=
#              SPOTIFY_CLIENT_SECRET=
#              SPOTIFY_REFRESH_TOKEN=
npm i
npm run develop

Using Graphiql http://localhost:8000/___graphql should give a better understanding of how schemas are structured.

Query Examples

To fetch one playlist

query SpotifyPlaylistAlbumCover {
  playlist: spotifyPlaylist(name: {regex: "/Album Cover/"}) {
    spotifyId
    name
    spotifyId
    images {
      url
      width
      height
    }
    tracks {
      href
      total
    }
  }
}

Or to fetch all Spotify playlists:

query SpotifyPlaylists {
  playlist: allSpotifyPlaylist(
    # filter: { spotifyId: {eq: "1nVxTfwvJcK4Huoz1BtHar"}}
    # filter: { name: {regex: "/Album Cover/"}}
    limit: 100) {
    edges {
      node {
        spotifyId
        name
        # href
        # image {
        #   localFile {
        #     childImageSharp {
        #       fluid(maxWidth: 400) {
        #         src
        #       }
        #     }
        #   }
        # }
        # images {
        #   url
        #   height
        #   width
        # }
        # tracks{
        #   href
        #   total
        # }

      }
    }
  }
}

for image graphql fragments check gatsby-image docs. https://www.gatsbyjs.org/packages/gatsby-image/#fragments

License

See the LICENSE file for more details.

You can’t perform that action at this time.