feat(graphql): integrate graphql - tasks-list page

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

Author: azinit

examples/graphql/package.json

@@ -58,6 +58,7 @@
     "@graphql-codegen/typescript-react-apollo": "^2.0.7",
     "@types/classnames": "^2.2.10",
     "@types/react-router": "^5.1.8",
-    "@types/react-router-dom": "^5.1.5"
+    "@types/react-router-dom": "^5.1.5",
+    "bootstrap": "^4.5.2"
   }
 }

examples/graphql/src/app/index.scss

@@ -1,3 +1,6 @@
+// FIXME: specify imported modules (need only some utils-classes)
+@import '~bootstrap/dist/css/bootstrap.css';
+
 // vars
 .app {
   --clr-foreground: #fff;
@@ -11,9 +14,13 @@ body,
 .app {
   height: 100%;
   position: relative;
+  background-color: #f0f2f5;
 }
 
 .app {
+  ul {
+    padding-left: unset;
+  }
   li {
     list-style: none;
   }
@@ -23,7 +30,7 @@ body,
   display: flex;
   flex-direction: column;
   &-content {
-    margin: auto 10%;
+    margin: 10px 10%;
     flex-grow: 1;
   }
 
@@ -33,11 +40,21 @@ body,
 }
 
 // common class-styles
+// NOTE: Используем подход стилизации по классам, т.к. приложение представляет собой прототип
 .app {
   .text-white {
     color: white;
   }
   .text-muted {
     color: gray;
   }
+  .loading--overlay {
+    padding-top: 10px;
+    width: 100%;
+    height: 100%;
+    min-height: 72px;
+    position: absolute;
+    z-index: 999;
+    background-color: rgba(255, 255, 255, 0.8);
+  }
 }

examples/graphql/src/pages/tasks-list/index.tsx

@@ -1,46 +1,47 @@
-import React, { useEffect } from 'react'
-import { Spin, Alert } from "antd";
-import { useFetch } from "shared/hooks";
+import React from 'react'
+import { Spin, Alert, Button } from "antd";
 import { TaskItem } from "shared/components";
-import { useGetTodosListQuery } from "./query.gen";
-
-type Foo = import("types").Album;
+import { useTodosQuery } from "./query.gen";
 
 const TasksList = () => {
-    const { data, error, loading } = useFetch<Task[]>("todos");
-    const { data: query } = useGetTodosListQuery();
-
-    useEffect(() => {
-        if (query) {
-            console.table(query.todos?.data?.map((todo) => ({
-                id: todo?.id,
-                title: todo?.title,
-                user: todo?.user?.name,
-            })));
-            const todo = query.todos?.data?.[0];
-            console.log(todo);
-        }
-    }, [query]);
+    const { data, error, loading, refetch } = useTodosQuery({
+        // Чтобы при рефетчинге менялся loading статус
+        notifyOnNetworkStatusChange: true,
+    });
+    const query = data?.todos?.data;
 
     return (
-        <div className="page page-tasks-list">
+        <div className="page tasks-list">
             <div className="page-content">
+                <div className="tasks-list__toolbar text-center">
+                    <Button
+                        className="btn-refetch"
+                        onClick={() => refetch()}
+                        disabled={loading}
+                        title="Refresh list of tasks"
+                    >
+                        Refresh
+                    </Button>
+                </div>
                 {error && (
                     <Alert
                         type="error"
                         message={error}
                         showIcon
                     />
                 )}
-                {loading && <Spin />}
-                <ul>
-                    {data?.map((taskProps) => (
-                        <li><TaskItem {...taskProps} /></li>
-                    ))}
-                    {data?.length === 0 && (
-                        <li>There are not tasks found</li>
-                    )}
-                </ul>
+                <div className="tasks-list__content position-relative pt-1">
+                    {loading && <Spin className="loading--overlay" />}
+                    <ul>
+                        {query?.map((task) => (
+                            <li><TaskItem {...task} /></li>
+                        ))}
+                        {/* FIXME: yet (!query && !loading)  */}
+                        {query?.length === 0 && (
+                            <li>There are not tasks found</li>
+                        )}
+                    </ul>
+                </div>
             </div>
         </div>
     )

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

@@ -1,21 +1,22 @@
 /** @generated THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */
-import * as Types from '../../types';
+import * as Types from '../../models';
 
 import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
-export type GetTodosListQueryVariables = Types.Exact<{ [key: string]: never; }>;
+export type TodosQueryVariables = Types.Exact<{ [key: string]: never; }>;
 
 
-export type GetTodosListQuery = { 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 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 user?: Types.Maybe<{ readonly id?: Types.Maybe<string>, readonly name?: Types.Maybe<string> }> }>>> }> };
 
 
-export const GetTodosListDocument = gql`
-    query getTodosList {
+export const TodosDocument = gql`
+    query Todos {
   todos {
     data {
       id
       title
       user {
+        id
         name
       }
     }
@@ -24,26 +25,26 @@ export const GetTodosListDocument = gql`
     `;
 
 /**
- * __useGetTodosListQuery__
+ * __useTodosQuery__
  *
- * To run a query within a React component, call `useGetTodosListQuery` and pass it any options that fit your needs.
- * When your component renders, `useGetTodosListQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * To run a query within a React component, call `useTodosQuery` and pass it any options that fit your needs.
+ * When your component renders, `useTodosQuery` returns an object from Apollo Client that contains loading, error, and data properties
  * you can use to render your UI.
  *
  * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
  *
  * @example
- * const { data, loading, error } = useGetTodosListQuery({
+ * const { data, loading, error } = useTodosQuery({
  *   variables: {
  *   },
  * });
  */
-export function useGetTodosListQuery(baseOptions?: Apollo.QueryHookOptions<GetTodosListQuery, GetTodosListQueryVariables>) {
-        return Apollo.useQuery<GetTodosListQuery, GetTodosListQueryVariables>(GetTodosListDocument, baseOptions);
+export function useTodosQuery(baseOptions?: Apollo.QueryHookOptions<TodosQuery, TodosQueryVariables>) {
+        return Apollo.useQuery<TodosQuery, TodosQueryVariables>(TodosDocument, baseOptions);
       }
-export function useGetTodosListLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetTodosListQuery, GetTodosListQueryVariables>) {
-          return Apollo.useLazyQuery<GetTodosListQuery, GetTodosListQueryVariables>(GetTodosListDocument, baseOptions);
+export function useTodosLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<TodosQuery, TodosQueryVariables>) {
+          return Apollo.useLazyQuery<TodosQuery, TodosQueryVariables>(TodosDocument, baseOptions);
         }
-export type GetTodosListQueryHookResult = ReturnType<typeof useGetTodosListQuery>;
-export type GetTodosListLazyQueryHookResult = ReturnType<typeof useGetTodosListLazyQuery>;
-export type GetTodosListQueryResult = Apollo.QueryResult<GetTodosListQuery, GetTodosListQueryVariables>;
+export type TodosQueryHookResult = ReturnType<typeof useTodosQuery>;
+export type TodosLazyQueryHookResult = ReturnType<typeof useTodosLazyQuery>;
+export type TodosQueryResult = Apollo.QueryResult<TodosQuery, TodosQueryVariables>;

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

@@ -1,9 +1,10 @@
-query getTodosList {
+query Todos {
   todos {
     data {
       id
       title
       user {
+        id
         name
       }
     }

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

@@ -5,12 +5,12 @@ import { UserOutlined } from "@ant-design/icons";
 import { useFetch } from "shared/hooks";
 import "./index.scss";
 
-type Props = Task;
+type Props = import("models").Todo;
 
 // TODO: as feature
 const TaskItem = (props: Props) => {
-    const { completed, title, userId, id } = props;
-    const { data: author } = useFetch<User>(`users/${userId}`);
+    const { completed, title, user, id } = props;
+    const { data: author } = useFetch<User>(`users/${user?.id}`);
 
     return (
         <Card className={cn("task-item", { completed })}>

examples/graphql/yarn.lock

@@ -3780,6 +3780,11 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
+bootstrap@^4.5.2:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.5.2.tgz#a85c4eda59155f0d71186b6e6ad9b875813779ab"
+  integrity sha512-vlGn0bcySYl/iV+BGA544JkkZP5LB3jsmkeKLFQakCOwCM3AOk7VkldBz4jrzSe+Z0Ezn99NVXa1o45cQY4R6A==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"