aishwaryapb / browsyfi

Spotify featured playlists and tracks browser using Apollo Client and GraphQL

Home Page:https://browsyfi.netlify.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Netlify Status

This is a simple React application that allows an user to browse the latest featured song playlists from all around the world and view all the tracks under each of them. It also provides audio preview for few of the song tracks.

Check out the app - browsyfi

And here is the GraphQL back-end code for this project.

Key takeaways for React Developers

  • Configure Apollo Client
  • Use Apollo React Hooks and GraphQL tag to query the data from a GraphQL server
  • Use Apollo's In-memory cache for local state management
  • Apply middleware to Apollo client
  • Use Context and Reducer hooks by React

Is Apollo's in-memory cache useful here?

Yes. The GraphQL back-end for this project fetches data using Spotify API. The song tracks data is not paginated hence, it can be quite time consuming to fetch every time the user clicks on an item in the playlist. Because of apollo client's in-memory cache, a significant number of network requests can be avoided without the user seeing any difference at all while switching between various playlists.

About

Spotify featured playlists and tracks browser using Apollo Client and GraphQL

https://browsyfi.netlify.app/

License:MIT License


Languages

Language:JavaScript 63.6%Language:CSS 24.4%Language:HTML 12.0%