From 516f8256a4f72c7a01752d9aa4e035276fb08b51 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Wed, 15 Dec 2021 17:08:00 +0100
Subject: chore: add pagination (load more) to blog page

---
 src/pages/blog/index.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

(limited to 'src/pages/blog/index.tsx')

diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index 7057982..083ad97 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -10,10 +10,9 @@ import { NextPageWithLayout } from '@ts/types/app';
 import { BlogPageProps } from '@ts/types/blog';
 import { loadTranslation } from '@utils/helpers/i18n';
 import PostsList from '@components/PostsList/PostsList';
+import { SWRConfig } from 'swr';
 
-const Blog: NextPageWithLayout<BlogPageProps> = ({ data }) => {
-  const { posts, pageInfo } = data;
-
+const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
   return (
     <>
       <Head>
@@ -21,7 +20,9 @@ const Blog: NextPageWithLayout<BlogPageProps> = ({ data }) => {
         <meta name="description" content={seo.blog.description} />
       </Head>
       <h1>{t`Blog`}</h1>
-      <PostsList posts={posts} titleLevel={2} />
+      <SWRConfig value={{ fallback }}>
+        <PostsList titleLevel={2} />
+      </SWRConfig>
     </>
   );
 };
@@ -35,11 +36,13 @@ export const getStaticProps: GetStaticProps = async (context) => {
     context.locale!,
     process.env.NODE_ENV === 'production'
   );
-  const data = await getPublishedPosts(config.postsPerPage);
+  const data = await getPublishedPosts({ first: config.postsPerPage });
 
   return {
     props: {
-      data,
+      fallback: {
+        '/api/posts': data,
+      },
       translation,
     },
   };
-- 
cgit v1.2.3

