Add YouTube URLs, play and save them to your playlist
App created with GraphQL(Hasura GraphiQL), Apollo and React. Accepts youtube.com urls.
Song queue is saved to local storage and being retrieved after page refresh.
Styling is done by using Material-UI
Deployed at https://confident-bhabha-15737c.netlify.com/
GraphQL data: https://apollo-react-music.herokuapp.com/console/data/schema/public/tables/songs/browse
Please be aware that queries, mutations, subsciptions and data could be modified on the graphql endpoint and its not secured.
Inresolvers: Mutation
object with a property addOrRemoveFromQueue
3 paramateres are specified, where the first one isn’t important in this case, second one is all the arguments and the last one is cache
. It gives access to work directly with cache.
We can take what is in there currently queue:[]
and add songs. First, we read the queury of all the previous songs,
then we check to see if we indeed have the queue and if the item is already in there queue.some(song=>song.id === input.id)
, we want to remove it, otherwise add it […queue, input]
.
To update cache , we write back the changes cache.writeQuery({…})
and upon success the queue is returned.
To save queued song in to local storage:
…onCompleted: data=>{localstorage.setItem(‘queue’, data.addOrRemoveFromQueue)}
The data is coming from addOrRemoveFromQueue
mutation and corresponds to ‘queue’
key. In order to write the data that results in an array to local storage, we have to convert it in to a string instead JSON.stringify(data.addOrRemoveFromQueue)
since local storage only accepts strings.
We use the same onCompleted
callback as a second argument of the same mutation.
In client.js
file we check for the existing queue and assign it as a value to queue
key and parse it back to an array. That allows the app to load the queue after page refresh (as long as its not deleted from the local storage manually).