remake fetch call for Sanity data using time-based revalidation

https://www.npmjs.com/package/next-sanity#time-based-revalidation
bozzhik · Apr 20, 2024 · 3253f8e · 3253f8e
1 parent fff934c
commit 3253f8e
Showing 1 changed file with 27 additions and 22 deletions.
diff --git a/src/components/App/index/Projects.tsx b/src/components/App/index/Projects.tsx
@@ -1,4 +1,4 @@
-import {unstable_noStore as noStore} from 'next/cache'
+// import {unstable_noStore as noStore} from 'next/cache'
 import {client, urlForImage} from '@/lib/sanity'
 
 import Link from 'next/link'
@@ -15,21 +15,24 @@ interface Project {
   in_development: boolean
 }
 
-const getData = async (): Promise<Project[]> => {
-  noStore()
-
-  const query = `
-    *[_type == 'project'] {
+async function getData(): Promise<Project[]> {
+  const data = await client.fetch<Project>(
+    `*[_type == 'project'] {
         name,
         link,
         id,
         description,
         image,
         in_development,
-    }`
-
-  const data: Project[] = await client.fetch(query)
-  return data
+    }`,
+    {},
+    {
+      next: {
+        revalidate: 30,
+      },
+    },
+  )
+  return Array.isArray(data) ? data : []
 }
 
 const Projects = async () => {
@@ -43,18 +46,20 @@ const Projects = async () => {
     <section data-section="projects-index" className="mt-8">
       <Text type="heading">my projects</Text>
 
-      {projects.map((slide, index) => (
-        <article className="space-y-5 mt-5" key={index}>
-          <div className="s-32">
-            <Image quality={100} priority={true} className="object-cover w-full h-full" src={urlForImage(slide.image).url()} width={100} height={100} alt={slide.name} />
-          </div>
-
-          <div>
-            <Text type="heading">{slide.name}</Text>
-            <Text>{slide.description}</Text>
-          </div>
-        </article>
-      ))}
+      <div className="grid grid-cols-4">
+        {projects.map((slide, index) => (
+          <article className="space-y-5 mt-5 border-2 border-purple-400 p-2" key={index}>
+            <div className="s-32">
+              <Image quality={100} priority={true} className="object-cover w-full h-full" src={urlForImage(slide.image).url()} width={100} height={100} alt={slide.name} />
+            </div>
+
+            <div>
+              <Text type="heading">{slide.name}</Text>
+              <Text>{slide.description}</Text>
+            </div>
+          </article>
+        ))}
+      </div>
     </section>
   )
 }