content: import React from 'react'
  import { Link } from 'react-router-dom'
  import {
    gql,
    graphql
  } from 'react-apollo'
  
  const BookList = ({ data: { loading, error, books } }) => {
    if (loading) {
      return <p>Loading...</p>
    }
  
    if (error) {
      return <div className="error">{ error.message }</div>
    }
  
    return (
      <div className="container">
        <ul className="books">
          {
            books.map(book => {
              return (<div key={book.id} className="box">
                <Link to={`/books/${book.id}`}>{book.title}</Link>
              </div>)
            })
          }
        </ul>
      </div>
    )
  }
  
  const booksQuery = gql`
    query booksQuery {
      books {
        id
        title
      }
    }
  `
  
  export default graphql(booksQuery)(BookList)
  