Update /drafts to postConnection

Author: MetaCorp

backend/src/query.ts

@@ -22,6 +22,7 @@ const Query = prismaObjectType({
     })
     t.field('drafts', {
       type: 'PostConnection',
+      args: t.prismaType.postsConnection.args,
       resolve: async (_, args, ctx: GraphQLServerContext) => {
         const user = await ctx.user
         if (!user) throw Error('Not auth.')

frontend/src/components/post/Drafts.tsx

@@ -3,13 +3,25 @@ import { useQuery } from 'react-apollo-hooks'
 import useReactRouter from 'use-react-router'
 
 import gql from 'graphql-tag'
+import get from 'lodash.get'
 
 import PostType from './../../types/Post'
 
 import PostList from './PostList'
 
 interface FeedQueryResponse {
-  drafts: [PostType]
+  drafts: {
+    pageInfo: {
+      hasNextPage: boolean
+      endCursor: string
+    }
+    edges: {
+      node: PostType
+    }[]
+    aggregate: {
+      count: number
+    }
+  }
 }
 
 const Drafts: React.FC = () => {
@@ -19,6 +31,31 @@ const Drafts: React.FC = () => {
 
   console.log('draftsQuery: ', draftsQuery)
 
+  const handleLoadMore = () => {
+    if (!draftsQuery || !draftsQuery.data || !draftsQuery.data.drafts) return
+    draftsQuery.fetchMore({
+      variables: {
+        after: draftsQuery.data.drafts.pageInfo.endCursor,
+      },
+      updateQuery: (previousResult, { fetchMoreResult }) => {
+        if (!fetchMoreResult) {
+          return previousResult
+        }
+        return {
+          drafts: {
+            __typename: 'PostConnection',
+            aggregate: fetchMoreResult.drafts.aggregate,
+            pageInfo: fetchMoreResult.drafts.pageInfo,
+            edges: [
+              ...previousResult.drafts.edges,
+              ...fetchMoreResult.drafts.edges,
+            ],
+          },
+        }
+      },
+    })
+  }
+
   return (
     <div>
       <button
@@ -29,21 +66,48 @@ const Drafts: React.FC = () => {
       >
         logout
       </button>
-      {draftsQuery.data && draftsQuery.data.drafts && (
-        <PostList posts={draftsQuery.data.drafts} />
+      {draftsQuery.data &&
+        // @ts-ignore
+        draftsQuery.data.drafts && (
+          <PostList posts={draftsQuery.data.drafts.edges.map((e) => e.node)} />
+        )}
+      {get(draftsQuery, 'data.drafts.pageInfo.hasNextPage') && (
+        <button onClick={handleLoadMore}>loadMore</button>
       )}
     </div>
   )
 }
 
 const DRAFTS_QUERY = gql`
-  query Drafts {
-    drafts {
-      id
-      title
-      author {
-        id
-        name
+  query Drafts(
+    $after: String
+    $orderBy: PostOrderByInput
+    $where: PostWhereInput
+    $skip: Int
+  ) {
+    drafts(
+      after: $after
+      orderBy: $orderBy
+      where: $where
+      first: 5
+      skip: $skip
+    ) {
+      pageInfo {
+        hasNextPage
+        endCursor
+      }
+      edges {
+        node {
+          id
+          title
+          author {
+            id
+            name
+          }
+        }
+      }
+      aggregate {
+        count
       }
     }
   }

frontend/src/components/post/Feed.tsx

@@ -3,13 +3,13 @@ import { useQuery } from 'react-apollo-hooks'
 import useReactRouter from 'use-react-router'
 
 import gql from 'graphql-tag'
+import get from 'lodash.get'
 
 import PostType from './../../types/Post'
 
 import PostList from './PostList'
 
 interface FeedQueryResponse {
-  // data: {
   feed: {
     pageInfo: {
       hasNextPage: boolean
@@ -22,8 +22,6 @@ interface FeedQueryResponse {
       count: number
     }
   }
-  // }
-  // fetchMore: () => void
 }
 
 const Feed: React.FC = () => {
@@ -72,7 +70,9 @@ const Feed: React.FC = () => {
       {feedQuery.data && feedQuery.data.feed && (
         <PostList posts={feedQuery.data.feed.edges.map((e) => e.node)} />
       )}
-      <button onClick={handleLoadMore}>loadMore</button>
+      {get(feedQuery, 'data.feed.pageInfo.hasNextPage') && (
+        <button onClick={handleLoadMore}>loadMore</button>
+      )}
     </div>
   )
 }