Feat: Connect and show posts in IndexPage

Mainly follow this 2 examples: https://github.com/vercel/next.js/tree/canary/examples/with-apollo https://github.com/vercel/next.js/tree/canary/examples/cms-wordpress
Kamigami55 · Oct 11, 2021 · 5b16e32 · 5b16e32
1 parent be0fc62
commit 5b16e32
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 26 deletions.
diff --git a/src/graphql/allPostsQuery.js b/src/graphql/allPostsQuery.js
@@ -0,0 +1,47 @@
+import { gql } from '@apollo/client'
+
+import discardPTag from '../utils/discardPTag'
+
+export const ALL_POSTS_QUERY = gql`
+  query allPosts($first: Int!) {
+    posts(where: { orderby: { field: DATE, order: DESC } }, first: $first) {
+      edges {
+        node {
+          databaseId
+          title
+          uri
+          date
+          excerpt
+          featuredImage {
+            node {
+              sourceUrl
+              altText
+            }
+          }
+        }
+      }
+    }
+  }
+`
+
+export const allPostsQueryVars = {
+  first: 10,
+}
+
+export const transformAllPostsData = (data) => {
+  return (
+    data?.posts?.edges
+      ?.map((edge) => edge?.node)
+      ?.map((post) => ({
+        id: post?.databaseId || '',
+        title: post?.title || '',
+        uri: post?.uri || '',
+        date: post?.date || '',
+        excerpt: discardPTag(post?.excerpt) || '',
+        featuredImage: {
+          sourceUrl: post?.featuredImage?.node?.sourceUrl || '',
+          altText: post?.featuredImage?.node?.altText || '',
+        },
+      })) || []
+  )
+}
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -1,8 +1,20 @@
+import { useMemo } from 'react'
 import Head from 'next/head'
 import Image from 'next/image'
+import Link from 'next/link'
+import { useQuery } from '@apollo/client'
+
 import styles from '../styles/Home.module.css'
 
+import { initializeApollo, addApolloState } from '../lib/apolloClient'
+import { allPostsQueryVars, ALL_POSTS_QUERY, transformAllPostsData } from '../graphql/allPostsQuery'
+
 export default function Home() {
+  const { data } = useQuery(ALL_POSTS_QUERY, {
+    variables: allPostsQueryVars,
+  })
+  const allPosts = useMemo(() => transformAllPostsData(data), [data]) || []
+
   return (
     <div className={styles.container}>
       <Head>
@@ -14,33 +26,15 @@ export default function Home() {
       <main className={styles.main}>
         <h1 className={styles.title}>就。很。Pro。blog</h1>
 
-        <p className={styles.description}>
-          Get started by editing <code className={styles.code}>pages/index.js</code>
-        </p>
-
         <div className={styles.grid}>
-          <a href="https://nextjs.org/docs" className={styles.card}>
-            <h2>Documentation &rarr;</h2>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
-
-          <a href="https://nextjs.org/learn" className={styles.card}>
-            <h2>Learn &rarr;</h2>
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
-          </a>
-
-          <a href="https://github.com/vercel/next.js/tree/master/examples" className={styles.card}>
-            <h2>Examples &rarr;</h2>
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
-          </a>
-
-          <a
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-          >
-            <h2>Deploy &rarr;</h2>
-            <p>Instantly deploy your Next.js site to a public URL with Vercel.</p>
-          </a>
+          {allPosts?.map((post) => (
+            <Link key={post.id} href={post.uri} passHref>
+              <a className={styles.card}>
+                <h2>{post.title}</h2>
+                <p>{post.excerpt}</p>
+              </a>
+            </Link>
+          ))}
         </div>
       </main>
 
@@ -59,3 +53,17 @@ export default function Home() {
     </div>
   )
 }
+
+export async function getStaticProps() {
+  const apolloClient = initializeApollo()
+
+  await apolloClient.query({
+    query: ALL_POSTS_QUERY,
+    variables: allPostsQueryVars,
+  })
+
+  return addApolloState(apolloClient, {
+    props: {},
+    revalidate: 1,
+  })
+}
diff --git a/src/styles/Home.module.css b/src/styles/Home.module.css
@@ -100,12 +100,24 @@
 .card h2 {
   margin: 0 0 1rem 0;
   font-size: 1.5rem;
+
+  display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+	text-overflow: ellipsis;
+  overflow: hidden;
 }
 
 .card p {
   margin: 0;
   font-size: 1.25rem;
   line-height: 1.5;
+
+  display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+	text-overflow: ellipsis;
+  overflow: hidden;
 }
 
 .logo {

diff --git a/src/utils/discardPTag.js b/src/utils/discardPTag.js
@@ -0,0 +1,9 @@
+/**
+ * Discard starting and trailing <p> from a string
+ * "<p>slice</p>" -> "slice"
+ * @param {string} source
+ * @returns string
+ */
+export default function discardPTag(source) {
+  return source?.slice(3, -4)
+}