Merge pull request #38 from howtographql/add-query-types

rohit-ravikoti · web-flow · commit d8ff2e6bb541 · 2019-06-28T11:27:32.000-07:00
Add query types
diff --git a/packages/gatsby-theme/src/components/community/BookmarkMutation.tsx b/packages/gatsby-theme/src/components/community/BookmarkMutation.tsx
@@ -3,12 +3,12 @@ import { Mutation } from 'react-apollo';
 import { loginUser } from '../../utils/auth';
 import { BookmarkButton } from '../shared/buttons';
 import { BookmarkTutorial } from '../../utils/queries';
+import { BookmarkTutorialMutation } from '../../graphqlTypes';
 import { optionalChaining } from '../../utils/helpers';
-
 import { handleMutationResponse, ApiErrors } from '../../utils/errorHandling';
 
 const BookmarkMutation = ({ tutorial }) => (
-  <Mutation
+  <Mutation<BookmarkTutorialMutation>
     mutation={BookmarkTutorial}
     variables={{
       id: tutorial.id,
diff --git a/packages/gatsby-theme/src/components/community/TutorialListing.tsx b/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>
diff --git a/packages/gatsby-theme/src/components/community/UpvoteMutation.tsx b/packages/gatsby-theme/src/components/community/UpvoteMutation.tsx
@@ -6,9 +6,13 @@ import { VoteButton } from '../shared/buttons';
 import { Heading, Flex } from '../shared/base';
 import { optionalChaining } from '../../utils/helpers';
 import { UpvoteTutorial } from '../../utils/queries';
+import { UpvoteTutorialMutation } from '../../graphqlTypes';
 
 const UpvoteMutation = ({ tutorial }) => (
-  <Mutation mutation={UpvoteTutorial} variables={{ id: tutorial.id }}>
+  <Mutation<UpvoteTutorialMutation>
+    mutation={UpvoteTutorial}
+    variables={{ id: tutorial.id }}
+  >
     {upvote => {
       let active = optionalChaining(() => tutorial.viewerUserTutorial.upvoted);
       let upvotes = optionalChaining(() => tutorial.upvotes);
diff --git a/packages/gatsby-theme/src/components/courses/CourseCard.tsx b/packages/gatsby-theme/src/components/courses/CourseCard.tsx
@@ -4,13 +4,14 @@ import { Query } from 'react-apollo';
 import ProgressBar from '../shared/ProgressBar';
 import { TutorialButton } from '../shared/buttons';
 import { getTutorialbyGatsbyID } from '../../utils/queries';
+import { GetTutorialbyGatsbyIdQuery, Maybe } from '../../graphqlTypes';
 import { getTutorialOverviewSlug } from '../../utils/getTutorialSlug';
 import { optionalChaining, percent } from '../../utils/helpers';
 
 type CourseCardProps = {
-  tutorialTitle: string;
-  fileAbsolutePath: string;
-  gatsbyID: string;
+  tutorialTitle: Maybe<string>;
+  fileAbsolutePath: Maybe<string>;
+  gatsbyID: Maybe<string>;
 };
 
 const CourseCard: React.FunctionComponent<CourseCardProps> = ({
@@ -27,19 +28,23 @@ const CourseCard: React.FunctionComponent<CourseCardProps> = ({
           src="https://i.ibb.co/TcKwmwR/Icons.png"
         />
         <h3>{tutorialTitle}</h3>
-        <Query query={getTutorialbyGatsbyID} variables={{ gatsbyID: gatsbyID }}>
+        <Query<GetTutorialbyGatsbyIdQuery>
+          query={getTutorialbyGatsbyID}
+          variables={{ gatsbyID: gatsbyID }}
+        >
           {({ data }) => {
             let buttonText = 'Start Tutorial';
             let percentage = 0;
             if (
               optionalChaining(
                 () =>
-                  data.getTutorialbyGatsbyID.viewerUserTutorial.currentChapter,
+                  data!.getTutorialbyGatsbyID!.viewerUserTutorial!
+                    .currentChapter,
               )
             ) {
               percentage = percent(
-                data.getTutorialbyGatsbyID.numberofChapters,
-                data.getTutorialbyGatsbyID.viewerUserTutorial.currentChapter,
+                data!.getTutorialbyGatsbyID!.numberofChapters,
+                data!.getTutorialbyGatsbyID!.viewerUserTutorial!.currentChapter,
               );
               buttonText = 'Continue Tutorial';
               if (percentage === 100) {
diff --git a/packages/gatsby-theme/src/components/courses/CourseSection.tsx b/packages/gatsby-theme/src/components/courses/CourseSection.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Heading, Text, Flex, Box } from '../shared/base';
 import CourseCard from './CourseCard';
+import { Mdx } from '../../graphqlTypes';
 
 type CourseSectionProps = {
   heading: string;
@@ -9,47 +10,33 @@ type CourseSectionProps = {
 };
 
 type QueryData = {
-  node: Node;
-};
-
-type Node = {
-  id: string;
-  fileAbsolutePath: string;
-  frontmatter: Frontmatter;
-};
-
-type Frontmatter = {
-  id: string;
-  tutorialTitle: string;
-  description: string;
+  node: Mdx;
 };
 
 const CourseSection: React.FunctionComponent<CourseSectionProps> = ({
   heading,
   body,
   data,
-}) => {
-  return (
-    <Flex m={[1, 1, 1]}>
-      <Box width={[0.2, 0.2, 0.2]}>
-        <Heading> {heading} </Heading>
-        <Text>{body}</Text>
-      </Box>
-      <Box width={[0.8, 0.8, 0.8]}>
-        <Flex alignItems="top" justifyContent="center" flexWrap="wrap">
-          {data.map(tutorial => (
-            <Box width={[1, 0.8, 0.4]} key={tutorial.node.id}>
-              <CourseCard
-                gatsbyID={tutorial.node.frontmatter.id}
-                tutorialTitle={tutorial.node.frontmatter.tutorialTitle}
-                fileAbsolutePath={tutorial.node.fileAbsolutePath}
-              />
-            </Box>
-          ))}
-        </Flex>
-      </Box>
-    </Flex>
-  );
-};
+}) => (
+  <Flex m={[1, 1, 1]}>
+    <Box width={[0.2, 0.2, 0.2]}>
+      <Heading> {heading} </Heading>
+      <Text>{body}</Text>
+    </Box>
+    <Box width={[0.8, 0.8, 0.8]}>
+      <Flex alignItems="top" justifyContent="center" flexWrap="wrap">
+        {data.map(tutorial => (
+          <Box width={[1, 0.8, 0.4]} key={tutorial!.node!.id}>
+            <CourseCard
+              gatsbyID={tutorial!.node!.frontmatter!.id}
+              tutorialTitle={tutorial!.node!.frontmatter!.tutorialTitle}
+              fileAbsolutePath={tutorial!.node!.fileAbsolutePath}
+            />
+          </Box>
+        ))}
+      </Flex>
+    </Box>
+  </Flex>
+);
 
 export default CourseSection;
diff --git a/packages/gatsby-theme/src/components/templates/Tutorial.tsx b/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
@@ -87,7 +86,7 @@ const TutorialLayout: React.FunctionComponent<TutorialLayoutProps> = ({
       <a href={nextChapterPath}>
         <ChapterMutation
           gatsbyID={gatsbyID}
-          currentChapter={currentChapterIndex + 1}
+          chapter={currentChapterIndex + 1}
         />
       </a>
     </Layout>
diff --git a/packages/gatsby-theme/src/components/templates/TutorialOverview.tsx b/packages/gatsby-theme/src/components/templates/TutorialOverview.tsx
@@ -15,12 +15,12 @@ interface PageTemplateProps {
 }
 
 const PageTemplate: React.FunctionComponent<PageTemplateProps> = ({ data }) => {
-  let gatsbyID = optionalChaining(() => data.overview.frontmatter.id);
+  let gatsbyID = optionalChaining(() => data!.overview!.frontmatter!.id);
 
   // This is so that the start button can link to the user's current path
   // TO DO find a better way to pass in the which chapter the user is currently on
   const chapterPaths = optionalChaining(() =>
-    data.allMdx.edges.map(a =>
+    data!.allMdx!.edges.map(a =>
       getTutorialSlug(optionalChaining(() => a.node.fileAbsolutePath)),
     ),
   );
@@ -29,11 +29,11 @@ const PageTemplate: React.FunctionComponent<PageTemplateProps> = ({ data }) => {
     <Layout>
       <Content>
         <Flex>
-          <Box width={3 / 4} aligncontent="center">
+          <Box width={3 / 4}>
             <TutorialHeader
               width={1 / 2}
-              title={data!.overview!.frontmatter!.tutorialTitle}
-              description={data!.overview!.frontmatter!.description}
+              title={data!.overview!.frontmatter!.tutorialTitle || 'blank'}
+              description={data!.overview!.frontmatter!.description || 'blank'}
               tags={['React', 'Apollo', 'Javascript']}
             />
           </Box>
diff --git a/packages/gatsby-theme/src/components/tutorial/AuthorsProgressBox.tsx b/packages/gatsby-theme/src/components/tutorial/AuthorsProgressBox.tsx
@@ -3,6 +3,7 @@ import AuthorList from './AuthorList';
 import { authors } from '../../utils/sampleData';
 import ProgressBar from '../shared/ProgressBar';
 import { getTutorialbyGatsbyID } from '../../utils/queries';
+import { GetTutorialbyGatsbyIdQuery } from '../../graphqlTypes';
 import { Query } from 'react-apollo';
 import {
   GithubButton,
@@ -13,20 +14,23 @@ import { Flex, Box } from '../shared/base';
 import { optionalChaining, percent } from '../../utils/helpers';
 
 const AuthorsProgressBox = ({ gatsbyID, chapterPaths }) => (
-  <Query query={getTutorialbyGatsbyID} variables={{ gatsbyID: gatsbyID }}>
+  <Query<GetTutorialbyGatsbyIdQuery>
+    query={getTutorialbyGatsbyID}
+    variables={{ gatsbyID: gatsbyID }}
+  >
     {({ data }) => {
       let buttonText = 'Start Tutorial';
       let percentage = 0;
       let currentChapter =
         optionalChaining(
-          () => data.getTutorialbyGatsbyID.viewerUserTutorial.currentChapter,
+          () => data!.getTutorialbyGatsbyID!.viewerUserTutorial!.currentChapter,
         ) || 0;
       //This link you to the next chapter you have not done
       let currentChapterPath = chapterPaths[0];
       if (currentChapter) {
         percentage = percent(
-          data.getTutorialbyGatsbyID.numberofChapters,
-          data.getTutorialbyGatsbyID.viewerUserTutorial.currentChapter,
+          data!.getTutorialbyGatsbyID!.numberofChapters,
+          data!.getTutorialbyGatsbyID!.viewerUserTutorial!.currentChapter,
         );
         buttonText = 'Continue Tutorial';
 
diff --git a/packages/gatsby-theme/src/components/tutorial/ChapterMutation.tsx b/packages/gatsby-theme/src/components/tutorial/ChapterMutation.tsx
@@ -1,24 +1,22 @@
 import * as React from 'react';
 import { upsertCurrentChapter } from '../../utils/queries';
+import {
+  UpsertCurrentChapterMutation,
+  UpsertCurrentChapterMutationVariables,
+} from '../../graphqlTypes';
 import { Mutation } from 'react-apollo';
 import { loginUser } from '../../utils/auth';
 import { handleMutationResponse, ApiErrors } from '../../utils/errorHandling';
 import { Button } from '../shared/base';
 
-type ChapterMutationProps = {
-  gatsbyID: any;
-  currentChapter: any;
-};
-
-const ChapterMutation: React.FunctionComponent<ChapterMutationProps> = ({
-  gatsbyID,
-  currentChapter,
-}) => (
-  <Mutation
+const ChapterMutation: React.FunctionComponent<
+  UpsertCurrentChapterMutationVariables
+> = ({ gatsbyID, chapter }) => (
+  <Mutation<UpsertCurrentChapterMutation>
     mutation={upsertCurrentChapter}
     variables={{
       gatsbyID: gatsbyID,
-      chapter: currentChapter,
+      chapter: chapter,
     }}
   >
     {currentChapter => {
diff --git a/packages/gatsby-theme/src/components/tutorial/TutorialSidebar.tsx b/packages/gatsby-theme/src/components/tutorial/TutorialSidebar.tsx
@@ -6,7 +6,11 @@ import { SpectrumButton } from '../shared/buttons';
 
 type SidebarProps = {
   tutorialTitle: string;
-  chapters: string[];
+  chapters: Chapter[];
+};
+type Chapter = {
+  chapterTitle: string;
+  chapterPath: string;
 };
 
 export const Sidebar: React.FunctionComponent<SidebarProps> = ({
@@ -22,8 +26,8 @@ export const Sidebar: React.FunctionComponent<SidebarProps> = ({
       </Card>
       <ul>
         {chapters.map(chapter => (
-          <li key={chapter.chapterTitle}>
-            <a href={chapter.chapterPath}>{chapter.chapterTitle}</a>
+          <li key={chapter!.chapterTitle}>
+            <a href={chapter!.chapterPath}>{chapter!.chapterTitle}</a>
           </li>
         ))}
       </ul>
diff --git a/packages/gatsby-theme/src/graphqlTypes.ts b/packages/gatsby-theme/src/graphqlTypes.ts
diff --git a/packages/gatsby-theme/src/pages/community.tsx b/packages/gatsby-theme/src/pages/community.tsx
diff --git a/packages/gatsby-theme/src/pages/courses.tsx b/packages/gatsby-theme/src/pages/courses.tsx
diff --git a/packages/gatsby-theme/src/pages/profile.tsx b/packages/gatsby-theme/src/pages/profile.tsx
