GQL-component

import React from 'react'
import { PropTypes } from 'prop-types'
import { Query } from 'react-apollo'
import gql from 'graphql-tag'

const Speaker = ({match}) => {
  Speaker.Proptypes = {
    match: PropTypes.shape({
      params: PropTypes.shape({
        id: PropTypes.String
      })
    })
  }
  const GET_SPEAKER_QUERY = gql`
  query($id: ID){
    speaker(where: {id: $id}) {
      id
      name
    }
  }
  `
  const variables = {'id': match.params.id }
  return (
    <Query query={GET_SPEAKER_QUERY} variables={variables}>
      {({loading, error, data}) => {
        if (loading) return <p> loading... </p>
        if (error) return <p> error...</p>
        return (
          <p>{data.speaker}</p>
        )
      }}
    </Query>
  )
}

export default Speaker