SongDetail page & load data from apollo

client/components/SongDetail.js

@@ -1,13 +1,33 @@
 import React, { Component } from 'react';
+import { graphql } from 'react-apollo';
+import { Link } from 'react-router';
+
+import query from '../queries/fetchSong';
 
 class SongDetail extends Component {
  render() {
+ const { loading, song } = this.props.data;
+
+ if (loading || !song) {
+ return <div>Loading...</div>;
+ }
+
  return (
  <div>
- <h3>Song Detail</h3>
+ <Link to="/">Back</Link>
+
+ <h3>{song.title}</h3>
  </div>
  );
  }
 }
 
-export default SongDetail;
+export default graphql(query, {
+ options: props => {
+ return {
+ variables: {
+ id: props.params.id,
+ },
+ };
+ },
+})(SongDetail);

client/components/SongList.js

@@ -22,7 +22,7 @@ class SongList extends Component {
  return this.props.data.songs.map(({ id, title }) => {
  return (
  <li key={id} className="collection-item">
- {title}
+ <Link to={`/songs/${id}`}>{title}</Link>
 
  <i
  className="material-icons"