1import * as React from 'react';
 2import { useParams } from 'react-router-dom';
 3
 4import CircularProgress from '@material-ui/core/CircularProgress';
 5
 6import NotFoundPage from '../notfound/NotFoundPage';
 7
 8import Bug from './Bug';
 9import { useGetBugQuery } from './BugQuery.generated';
10
11const BugQuery: React.FC = () => {
12  const params = useParams<'id'>();
13  if (params.id === undefined) throw new Error('missing route parameters');
14
15  const { loading, error, data } = useGetBugQuery({
16    variables: { id: params.id },
17  });
18  if (loading) return <CircularProgress />;
19  if (!data?.repository?.bug) return <NotFoundPage />;
20  if (error) return <p>Error: {error}</p>;
21  return <Bug bug={data.repository.bug} />;
22};
23
24export default BugQuery;