clean up community page types

Author: Allicolyer

packages/gatsby-theme/src/components/community/TutorialListing.tsx

@@ -7,31 +7,24 @@ import UpvoteMutation from './UpvoteMutation';
 import BookmarkMutation from './BookmarkMutation';
 import ProgressBanner from './ProgressBanner';
 import { getTutorialbyGatsbyID } from '../../utils/queries';
+import { GetTutorialbyGatsbyIdQuery, Mdx } from '../../graphqlTypes';
 
 type TutorialListingProps = {
-  tutorial: Tutorial;
-};
-
-type Tutorial = {
-  id: string;
-  fileAbsolutePath: string;
-  frontmatter: FrontMatter;
-};
-
-type FrontMatter = {
-  id: string;
-  tutorialTitle: string;
-  description: string;
+  tutorial: Mdx;
 };
 
 const TutorialListing: React.FunctionComponent<TutorialListingProps> = ({
   tutorial,
 }) => {
-  const gatsbyID = tutorial.frontmatter.id;
-  let tutorialPath = getTutorialOverviewSlug(tutorial.fileAbsolutePath);
+  const gatsbyID = tutorial!.frontmatter!.id;
+  let tutorialPath = getTutorialOverviewSlug(tutorial!.fileAbsolutePath);
   return (
-    <Query query={getTutorialbyGatsbyID} variables={{ gatsbyID: gatsbyID }}>
+    <Query<GetTutorialbyGatsbyIdQuery>
+      query={getTutorialbyGatsbyID}
+      variables={{ gatsbyID: gatsbyID }}
+    >
       {({ data }) => {
+        const gatsbyTutorial = data!.getTutorialbyGatsbyID;
         return (
           <Card
             width={[1]}
@@ -43,20 +36,19 @@ const TutorialListing: React.FunctionComponent<TutorialListingProps> = ({
           >
             <Flex alignItems="center" justifyContent="center">
               <Box width={1 / 12}>
-                {data.getTutorialbyGatsbyID && (
+                {gatsbyTutorial && (
                   <div>
-                    <UpvoteMutation tutorial={data.getTutorialbyGatsbyID} />
-                    <BookmarkMutation tutorial={data.getTutorialbyGatsbyID} />
-                    <ProgressBanner tutorial={data.getTutorialbyGatsbyID} />
+                    <UpvoteMutation tutorial={gatsbyTutorial} />
+                    <BookmarkMutation tutorial={gatsbyTutorial} />
+                    <ProgressBanner tutorial={gatsbyTutorial} />
                   </div>
                 )}
               </Box>
-
               <Box width={11 / 12}>
                 <Link to={tutorialPath}>
-                  <Heading>{tutorial.frontmatter.tutorialTitle}</Heading>
+                  <Heading>{tutorial!.frontmatter!.tutorialTitle}</Heading>
                 </Link>
-                <Text>{tutorial.frontmatter.description}</Text>
+                <Text>{tutorial!.frontmatter!.description}</Text>
               </Box>
             </Flex>
           </Card>

packages/gatsby-theme/src/components/templates/Tutorial.tsx

@@ -22,18 +22,18 @@ const TutorialLayout: React.FunctionComponent<TutorialLayoutProps> = ({
   }
 
   //title of the chapter
-  const { pageTitle } = optionalChaining(() => data.mdx.frontmatter);
+  const { pageTitle } = optionalChaining(() => data!.mdx!.frontmatter);
   //title of the tutorial
   const tutorialTitle = optionalChaining(
-    () => data.tutorialTitle.frontmatter.tutorialTitle,
+    () => data!.tutorialTitle!.frontmatter!.tutorialTitle,
   );
   //gatsbyID to fetch user information about tutorial
-  const gatsbyID = optionalChaining(() => data.tutorialTitle.frontmatter.id);
+  const gatsbyID = optionalChaining(() => data!.tutorialTitle!.frontmatter!.id);
   //all chapters in this tutorial
   const chapters = optionalChaining(() =>
-    data.pageTitles.edges.map(a => {
+    data!.pageTitles!.edges!.map(a => {
       return {
-        chapterTitle: optionalChaining(() => a.node.frontmatter.pageTitle),
+        chapterTitle: optionalChaining(() => a!.node!.frontmatter!.pageTitle),
         chapterPath: getTutorialSlug(
           optionalChaining(() => a.node.fileAbsolutePath),
         ),
@@ -42,7 +42,6 @@ const TutorialLayout: React.FunctionComponent<TutorialLayoutProps> = ({
   );
 
   const { location } = props;
-
   //all titles of chapters in this tutorial
   const chapterTitles = chapters.map(chapter => chapter.chapterTitle);
   //the number of this current chapter