Started working on pagination.

examples/realworld/ext/ArticleList.js

@@ -8,7 +8,6 @@ import smileyImageUrl from './smiley.jpg'
 
 const ArticleList = (props) => {
   const articles = props.articles
-  // TODO: Should I have pagination here, probably I should?
   return articles ? (
     <div>
       { articles.map(article => <Article article={article} key={article.id} />) }

examples/realworld/ext/MainPage.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Link } from 'react-router-dom'
 import _ from 'lodash'
 
@@ -15,7 +15,21 @@ const MainPage = () => {
   const { data: me } = useAuth()
 
   const { data: followedArticles } = useQuery(getFollowedArticles)
-  const { data: allArticles } = useQuery(getAllArticles)
+
+  const allArticlesPageSize = 1
+  // TODO: Make the page idx persistent in the URL as query param.
+  const [allArticlesPageIdx, setAllArticlesPageIdx] = useState(0)
+  const { data: allArticlesData } = useQuery(
+    getAllArticles,
+    {
+      skip: allArticlesPageIdx * allArticlesPageSize,
+      take: allArticlesPageSize
+    }
+  )
+  const allArticles = allArticlesData?.articles
+  const allArticlesCount = allArticlesData?.count
+  const allArticlesPageCount = Math.trunc(allArticlesCount / allArticlesPageSize)
+  console.log(allArticles, allArticlesCount, allArticlesPageCount)
 
   return (
     <div>
@@ -33,6 +47,24 @@ const MainPage = () => {
       <div>
         <h1> Global Feed </h1>
         <ArticleList articles={allArticles || []} />
+        { allArticlesPageCount > 0 && (
+          <div>
+            { allArticlesPageIdx > 0 && (
+              <>
+                <button> 1 </button>
+                <button> &lt; </button>
+              </>
+            ) }
+            { /* TODO: Make the current page number an input which user can change. */ }
+            { allArticlesPageIdx + 1 }
+            { allArticlesPageIdx < allArticlesPageCount - 1 && (
+              <>
+                <button> &gt; </button>
+                <button> { allArticlesPageCount } </button>
+              </>
+            )}
+          </div>
+        ) }
       </div>
 
     </div>

examples/realworld/ext/article/queries.js

@@ -29,10 +29,10 @@ const articleSetFavoritedFields = (article, user) => {
   delete article.favoritedBy
 }
 
-const getArticles = async ({ where }, context) => {
+const getArticles = async (queryArgs, context) => {
   // TODO: Do some error handling?
   const articles = await context.entities.Article.findMany({
-    where,
+    ...queryArgs,
     include: articleInclude
   })
 
@@ -40,18 +40,22 @@ const getArticles = async ({ where }, context) => {
     articleSetFavoritedFields(article, context.user)
   }
 
+  // TODO: This does not work well because it returns count for the query that contains
+  //   skip and take which is not useful!
   return articles
 }
 
 export const getArticlesByUser = async ({ username }, context) => {
-  return await getArticles({ where: { user: { username } } }, context)
+  const articles = await getArticles({ where: { user: { username } } }, context)
+  return articles
 }
 
 export const getFavoritedArticles = async (args, context) => {
   if (!context.user) { throw new HttpError(403) }
-  return await getArticles({
+  const articles = await getArticles({
     where: { favoritedBy: { some: { username: context.user.username } } },
   }, context)
+  return articles
 }
 
 export const getFollowedArticles = async (_args, context) => {
@@ -62,11 +66,14 @@ export const getFollowedArticles = async (_args, context) => {
     include: { following: { select: { id: true } } }
   })).following.map(({ id }) => id)
 
-  return await getArticles({ where: { user: { id: { in: followedUsersIds } } } }, context)
+  const articles = await getArticles({ where: { user: { id: { in: followedUsersIds } } } }, context)
+  return articles
 }
 
-export const getAllArticles = async (_args, context) => {
+export const getAllArticles = async ({ skip, take }, context) => {
-  return await getArticles({}, context)
+  const articles = await getArticles({ skip, take }, context)
+  const count = await context.entities.Article.count()
+  return { articles, count }
 }
 
 export const getArticle = async ({ slug }, context) => {