feat: (#277) category pagination

examples/next/getting-started/src/pages/category/[categorySlug]/[paginationTerm]/[categoryCursor].tsx

@@ -0,0 +1,18 @@
+import { GetStaticPropsContext } from 'next';
+import Page from 'pages/category/[categorySlug]';
+import { getNextStaticProps } from '@wpengine/headless-next';
+
+export default Page;
+
+export async function getStaticProps(context: GetStaticPropsContext) {
+  return getNextStaticProps(context, {
+    Page,
+  });
+}
+
+export function getStaticPaths() {
+  return {
+    paths: [],
+    fallback: 'blocking',
+  };
+}

examples/next/getting-started/src/pages/category/[categorySlug].tsx → examples/next/getting-started/src/pages/category/[categorySlug]/index.tsx

@@ -1,12 +1,26 @@
 import { client, getNextStaticProps } from '@wpengine/headless-next';
 import Head from 'next/head';
-import { Header, Footer, Posts } from 'components';
+import { Header, Footer, Posts, Pagination } from 'components';
 import { GetStaticPropsContext } from 'next';
+import { useRouter } from 'next/router';
+
+const POSTS_PER_PAGE = 6;
 
 export default function Page() {
   const { useGeneralSettings, usePosts } = client();
+  const { query = {} } = useRouter();
+  const { categorySlug, paginationTerm, categoryCursor } = query;
   const generalSettings = useGeneralSettings();
-  const posts = usePosts();
+  const isBefore = paginationTerm === 'before';
+  const posts = usePosts({
+    after: !isBefore ? (categoryCursor as string) : undefined,
+    before: isBefore ? (categoryCursor as string) : undefined,
+    first: !isBefore ? POSTS_PER_PAGE : undefined,
+    last: isBefore ? POSTS_PER_PAGE : undefined,
+    where: {
+      categoryName: categorySlug as string,
+    },
+  });
 
   return (
     <>
@@ -21,7 +35,11 @@ export default function Page() {
 
       <main className="content content-index">
         <Posts posts={posts.nodes} />
-        {/* {posts?.pageInfo && <Pagination pageInfo={posts.pageInfo} />} */}
+
+        <Pagination
+          pageInfo={posts.pageInfo}
+          basePath={`/category/${categorySlug}`}
+        />
       </main>
 
       <Footer copyrightHolder={generalSettings.title} />

examples/next/getting-started/src/pages/posts/[postSlug].tsx

@@ -28,7 +28,6 @@ export default function Page() {
           {post && (
             <div dangerouslySetInnerHTML={{ __html: post.content() ?? '' }} />
           )}
-          <div>{ post.author.node.nicename }</div>
         </div>
       </main>
 

examples/next/getting-started/src/pages/posts/index.tsx

@@ -6,19 +6,19 @@ import { useRouter } from 'next/router';
 import React from 'react';
 import styles from 'scss/pages/home.module.scss';
 
+const POSTS_PER_PAGE = 6;
+
 export default function Page() {
-  const {
-    query = {},
-  } = useRouter();
+  const { query = {} } = useRouter();
   const { postSlug, postCursor } = query;
   const { usePosts, useGeneralSettings } = client();
   const generalSettings = useGeneralSettings();
   const isBefore = postSlug === 'before';
   const posts = usePosts({
     after: !isBefore ? (postCursor as string) : undefined,
     before: isBefore ? (postCursor as string) : undefined,
-    first: !isBefore ? 6 : undefined,
-    last: isBefore ? 6 : undefined,
+    first: !isBefore ? POSTS_PER_PAGE : undefined,
+    last: isBefore ? POSTS_PER_PAGE : undefined,
   });
 
   return (