AutoMate/frontend/pages/instruments.js

import { Query } from 'react-apollo'
import Instrument, { INSTRUMENT_QUERY } from '../components/Instrument'
import InstrumentList from '../components/InstrumentList'

const InstrumentsPage = props =>
  props.query && props.query.id ? (
    <Query query={INSTRUMENT_QUERY} variables={{ id: props.query.id }}>
      {({ data, loading, error }) => {
        console.log(data, loading, error)
        if (loading) return <p>Loading instrument...</p>
        if (error) return <p>Error loading instrument: {error.message}</p>
        const { instrument } = data
        return <Instrument instrument={instrument} />
      }}
    </Query>
  ) : (
    <InstrumentList />
  )

InstrumentsPage.getInitialProps = ({ query }) => {
  return { query }
}

export default InstrumentsPage