import React from 'react'; import { useQuery } from '@apollo/react-hooks'; import gql from 'graphql-tag'; import DetailPage from './DetailPage'; import Loading from './Loading'; function DetailPageContainer(props) { const id = props.match.params.id; const { loading, error, data } = useQuery( gql` { instapost(query: { _id: "${id}" }) { _id description imageUrl } } ` ); return ( <div className="App"> {loading && <Loading />} {error && <div>{`encountered an error: ${error}`}</div>} {data && <DetailPage {...data} {...props} />} </div> ); } export default DetailPageContainer;