项目作者: earthddx

项目描述 :
Add YouTube URLs, play and save them to your playlist
高级语言: JavaScript
项目地址: git://github.com/earthddx/MusicShare.git
创建时间: 2020-03-17T02:23:57Z
项目社区:https://github.com/earthddx/MusicShare

开源协议:

下载


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.

How to add or remove data from the queue

client.js (ApolloClient)

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.

SongList.js

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.

QueuedSongList.js

We use the same onCompleted callback as a second argument of the same mutation.

Initial loading of the application

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).