{item.title}

import { Query } from 'react-apollo'; import PropTypes from 'prop-types'; import styled from 'styled-components'; import Head from 'next/head'; import Link from 'next/link'; import gql from 'graphql-tag'; import Error from './ErrorMessage'; import AddToCart from './AddToCart'; const SINGLE_ITEM_QUERY = gql` query SINGLE_ITEM_QUERY($id: ID!) { items(where: { id: $id }) { id title description largeImage image } } `; const SingleItemStyles = styled.div` max-width: 1200px; margin: 2rem auto; box-shadow: ${props => props.theme.bs}; display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; min-height: 800px; img { width: 100%; height: 100%; object-fit: contain; } .details { margin: 3rem; font-size: 2rem; } `; const SingleItem = props => ( {({ data, loading, error }) => { if (loading) return

Loading...

; if (error) return ; const [item] = data.items; return ( {item.title}

{item.title}

Viewing {item.title}

{item.description}

Edit ✏️

); }} ); SingleItem.propTypes = { id: PropTypes.string.isRequired, }; export default SingleItem; export { SINGLE_ITEM_QUERY };