index.js

import React, { useContext } from 'react';
import Episodes from './Episodes';
import { episodesQuery } from './EpisodesQuery';
import { Query } from "react-apollo";
import SiteConfigContext from '../../context/SiteConfigContext';
import { Loading } from 'apm-titan';
import PropTypes from 'prop-types';

const EpisodesWithData = (props) => {
  const context = useContext(SiteConfigContext);
  const pageNum = props.id ? props.id : 1;
  const GET_EPISODES = episodesQuery(context.slug, pageNum);
  return <Query query={GET_EPISODES}>
    {( { loading, error, data } ) => {
      if(loading) {
        return <Loading />;
      }
      if(error) {
        return <div>Error</div>;
      }
      return <Episodes data={data} />

    }}
    </Query>
};

EpisodesWithData.propTypes = {
  id: PropTypes.string
};

export default EpisodesWithData;