useSWR in article page

Author: bruce

package.json

@@ -45,7 +45,7 @@
     "devDependencies": {
         "duplicate-package-checker-webpack-plugin": "^3.0.0",
         "express": "^4.17.1",
-        "globby": "^11.0.3",
+        "globby": "^11.0.4",
         "prettier": "^2.3.1",
         "webpack-ant-icon-loader": "^1.0.8"
     }

pages/blogs/[id].jsx

@@ -11,12 +11,19 @@ import { singleBlog, listRelated } from '../../actions/blog'
 import { mergeStyles } from '../../helper/mergeStyles'
 import DisqusThread from '../../components/DisqusThread'
 import { singleCategory } from '../../actions/category'
-import { useSWR } from 'swr'
+import useSWR from 'swr'
 
-const SingleBlog = ({ blog }) => {
+const SingleBlog = ({ initialBlog, id }) => {
     const [related, setRelated] = useState([])
     const [voices, setVoices] = useState([])
     const [selectedVoice, setSelectedVoice] = useState('')
+    const { data: blog } = useSWR(
+        [`${process.env.NEXT_PUBLIC_API}/blog/`, id],
+        (url, id) => fetch(url, { id }).then((r = r.json())),
+        {
+            initialData: initialBlog,
+        }
+    )
 
     const loadRelated = () => {
         listRelated({ blog }).then((data) => {
@@ -286,14 +293,21 @@ export async function getStaticPaths() {
     }
 }
 
-export async function getStaticProps({ params }) {
-    return singleBlog(params.id).then((data) => {
-        if (data.error) {
-            console.log(data.error)
-        } else {
-            return { props: { blog: data }, revalidate: 1 }
-        }
+function initBlog(id) {
+    return new Promise((resolve, reject) => {
+        singleBlog(id).then((data) => {
+            if (data.error) {
+                reject(data.error)
+            } else {
+                resolve(data)
+            }
+        })
     })
 }
 
+export async function getStaticProps({ params }) {
+    const initialBlog = await initBlog(params.id)
+    return { props: { initialBlog, id: params.id } }
+}
+
 export default SingleBlog

yarn.lock

@@ -1207,10 +1207,10 @@ glob-to-regexp@^0.4.1:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
   integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
 
-globby@^11.0.3:
-  version "11.0.3"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.3.tgz#9b1f0cb523e171dd1ad8c7b2a9fb4b644b9593cb"
-  integrity sha512-ffdmosjA807y7+lA1NM0jELARVmYul/715xiILEjo3hBLPTcirgQNnXECn5g3mtR8TOLCVbkfua1Hpen25/Xcg==
+globby@^11.0.4:
+  version "11.0.4"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.4.tgz#2cbaff77c2f2a62e71e9b2813a67b97a3a3001a5"
+  integrity sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==
   dependencies:
     array-union "^2.1.0"
     dir-glob "^3.0.1"