Sick Fits | {item.title}

import React, { Component } from 'react'; import gql from 'graphql-tag'; import { Query } from 'react-apollo'; import Error from './ErrorMessage'; import styled from 'styled-components'; import Head from 'next/head'; 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 SINGLE_ITEM_QUERY = gql` query SINGLE_ITEM_QUERY($id: ID!) { item(where: { id: $id }) { id title description largeImage } } `; class SingleItem extends Component { render() { return ( {({ error, loading, data }) => { if (error) return ; if (loading) return

Loading...

; if (!data.item) return

No Item Found for {this.props.id}

; const item = data.item; return ( Sick Fits | {item.title}

{item.title}

Viewing {item.title}

{item.description}

); }} ); } } export default SingleItem; export { SINGLE_ITEM_QUERY };