feat(graphql): integrate graphql - author fetching, completed field

https://github.com/martis-git/learn-frontend/issues/279

Author: azinit

examples/graphql/src/pages/task-details/query.gen.ts

@@ -8,17 +8,21 @@ export type TodoQueryVariables = Types.Exact<{
 }>;
 
 
-export type TodoQuery = { readonly todo?: Types.Maybe<{ readonly id?: Types.Maybe<string>, readonly title?: Types.Maybe<string>, readonly user?: Types.Maybe<{ readonly id?: Types.Maybe<string>, readonly name?: Types.Maybe<string> }> }> };
+export type TodoQuery = { readonly todo?: Types.Maybe<{ readonly id?: Types.Maybe<string>, readonly title?: Types.Maybe<string>, readonly completed?: Types.Maybe<boolean>, readonly user?: Types.Maybe<{ readonly username?: Types.Maybe<string>, readonly email?: Types.Maybe<string>, readonly company?: Types.Maybe<{ readonly name?: Types.Maybe<string> }> }> }> };
 
 
 export const TodoDocument = gql`
     query Todo($id: ID!) {
   todo(id: $id) {
     id
     title
+    completed
     user {
-      id
-      name
+      username
+      email
+      company {
+        name
+      }
     }
   }
 }

examples/graphql/src/pages/task-details/query.gql

@@ -2,9 +2,13 @@ query Todo($id: ID!) {
   todo(id: $id) {
     id
     title
+    completed
     user {
-      id
-      name
+      username
+      email
+      company {
+        name
+      }
     }
   }
-}
+}

examples/graphql/src/pages/tasks-list/query.gen.ts

@@ -6,7 +6,7 @@ import * as Apollo from '@apollo/client';
 export type TodosQueryVariables = Types.Exact<{ [key: string]: never; }>;
 
 
-export type TodosQuery = { readonly todos?: Types.Maybe<{ readonly data?: Types.Maybe<ReadonlyArray<Types.Maybe<{ readonly id?: Types.Maybe<string>, readonly title?: Types.Maybe<string>, readonly user?: Types.Maybe<{ readonly id?: Types.Maybe<string>, readonly name?: Types.Maybe<string> }> }>>> }> };
+export type TodosQuery = { readonly todos?: Types.Maybe<{ readonly data?: Types.Maybe<ReadonlyArray<Types.Maybe<{ readonly id?: Types.Maybe<string>, readonly title?: Types.Maybe<string>, readonly completed?: Types.Maybe<boolean>, readonly user?: Types.Maybe<{ readonly username?: Types.Maybe<string> }> }>>> }> };
 
 
 export const TodosDocument = gql`
@@ -15,9 +15,9 @@ export const TodosDocument = gql`
     data {
       id
       title
+      completed
       user {
-        id
-        name
+        username
       }
     }
   }

examples/graphql/src/pages/tasks-list/query.gql

@@ -3,9 +3,9 @@ query Todos {
     data {
       id
       title
+      completed
       user {
-        id
-        name
+        username
       }
     }
   }

examples/graphql/src/shared/components/task-card/index.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import cn from "classnames";
 import { Card, Steps, Typography, Divider } from "antd";
 import { UserOutlined, HomeOutlined } from "@ant-design/icons";
-import { useFetch } from "shared/hooks";
 import "./index.scss";
 
 type Props = import("models").Todo;
@@ -20,7 +19,6 @@ const getTaskStatus = (completed: boolean) => {
 // TODO: as feature
 const TaskCard = (props: Props) => {
     const { completed, title, user } = props;
-    const { data: author } = useFetch<import("models").User>(`users/${user?.id}`);
 
     return (
         <Card
@@ -34,9 +32,9 @@ const TaskCard = (props: Props) => {
                 <div className="task-card__author">
                     <Typography.Title level={5}>Author</Typography.Title>
                     <span className="task-card__author" >
-                        <UserOutlined style={ICON_STYLE} /> {author?.username} {`<${author?.email}>`}
+                        <UserOutlined style={ICON_STYLE} /> {user?.username} {`<${user?.email}>`}
                         <br />
-                        <HomeOutlined style={ICON_STYLE} /> {author?.company.name}
+                        <HomeOutlined style={ICON_STYLE} /> {user?.company.name}
                     </span>
                 </div>
                 <Divider />

examples/graphql/src/shared/components/task-item/index.scss

@@ -20,4 +20,9 @@
             color: rgba(cornflowerblue, 0.8);
         }
     }
+
+    &__author {
+        display: flex;
+        align-items: center;
+    }
 }

examples/graphql/src/shared/components/task-item/index.tsx

@@ -2,22 +2,20 @@ import React from 'react'
 import cn from "classnames";
 import { Card } from "antd";
 import { UserOutlined } from "@ant-design/icons";
-import { useFetch } from "shared/hooks";
 import "./index.scss";
 
 type Props = import("models").Todo;
 
 // TODO: as feature
 const TaskItem = (props: Props) => {
     const { completed, title, user, id } = props;
-    const { data: author } = useFetch<import("models").User>(`users/${user?.id}`);
 
     return (
         <Card className={cn("task-item", { completed })}>
             <a className="task-item__title" href={`/${id}`}>{title}</a>
             <span className="task-item__author" >
                 <UserOutlined />
-                {author?.username}
+                {user?.username}
             </span>
         </Card>
     )