feat(graphql): integrate graphql - task-details-page

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

Author: azinit

examples/graphql/src/pages/task-details/index.tsx

@@ -1,21 +1,22 @@
 import React from 'react'
 import { RouteComponentProps } from "react-router-dom";
-import {Alert, Spin  } from "antd";
+import { Alert, Spin } from "antd";
 import { TaskCard } from "shared/components";
-import { useFetch } from "shared/hooks";
+import { useTodoQuery } from "./query.gen";
 
 type Props = RouteComponentProps<{
     id: string;
 }>;
 
 const TaskDetails = (props: Props) => {
     const { id } = props.match.params;
-    const { data, loading, error } = useFetch<any>(`todos/${id}`);
+    const { data, loading, error } = useTodoQuery({ variables: { id } });
+    const { todo } = data || {};
 
     if (loading) return <Spin />;
     if (error) return <Alert message={error.message || String(error)} type="error" showIcon />;
-    if (data === null) return <>Not Found</>;
-    return <TaskCard {...data} />;
+    if (!todo) return <>Not Found</>;
+    return <TaskCard {...todo} />;
 }
 
 export default TaskDetails

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

@@ -0,0 +1,51 @@
+/** @generated THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */
+import * as Types from '../../models';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+export type TodoQueryVariables = Types.Exact<{
+  id: Types.Scalars['ID'];
+}>;
+
+
+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 const TodoDocument = gql`
+    query Todo($id: ID!) {
+  todo(id: $id) {
+    id
+    title
+    user {
+      id
+      name
+    }
+  }
+}
+    `;
+
+/**
+ * __useTodoQuery__
+ *
+ * To run a query within a React component, call `useTodoQuery` and pass it any options that fit your needs.
+ * When your component renders, `useTodoQuery` 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 } = useTodoQuery({
+ *   variables: {
+ *      id: // value for 'id'
+ *   },
+ * });
+ */
+export function useTodoQuery(baseOptions?: Apollo.QueryHookOptions<TodoQuery, TodoQueryVariables>) {
+        return Apollo.useQuery<TodoQuery, TodoQueryVariables>(TodoDocument, baseOptions);
+      }
+export function useTodoLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<TodoQuery, TodoQueryVariables>) {
+          return Apollo.useLazyQuery<TodoQuery, TodoQueryVariables>(TodoDocument, baseOptions);
+        }
+export type TodoQueryHookResult = ReturnType<typeof useTodoQuery>;
+export type TodoLazyQueryHookResult = ReturnType<typeof useTodoLazyQuery>;
+export type TodoQueryResult = Apollo.QueryResult<TodoQuery, TodoQueryVariables>;

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

@@ -0,0 +1,10 @@
+query Todo($id: ID!) {
+  todo(id: $id) {
+    id
+    title
+    user {
+      id
+      name
+    }
+  }
+}

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

@@ -9,6 +9,9 @@ type Props = import("models").Todo;
 
 const ICON_STYLE = { color: '#08c' };
 
+/**
+ * @remark Вынесено в отдельную функцию, т.к. в дальнейшем логика может стать сложнее
+ */
 const getTaskStatus = (completed: boolean) => {
     if (completed) return 1;
     return 0;