WIP

frontend/pages/vendors/[slug]/index.js

@@ -1,32 +1,41 @@
-import directus from '~/lib/directus'
+// import directus from '~/lib/directus'
+export const getStaticPaths = async () => {
+  const url = new URL(`${process.env.NEXT_PUBLIC_DIRECTUS_API_URL}/items/vendors`)
+  url.searchParams.append('fields[]', 'slug')
+  url.searchParams.append('limit', -1)
+  const res = await fetch(url.toString())
 
-export const getServerSideProps = async ({ params }) => {
-  const { slug } = params
+  const { data: vendors } = await res.json()
+
+  return {
+    paths: vendors.map((v) => ({ params: { slug: v.slug } })),
+    fallback: false, // false or "blocking"
+  }
+}
+
+export const getStaticProps = async ({ params: { slug } }) => {
+  const url = new URL(`${process.env.NEXT_PUBLIC_DIRECTUS_API_URL}/items/vendors`)
+  url.searchParams.append('fields[]', '*')
+  url.searchParams.append('fields[]', 'categories.categories_id.slug')
+  url.searchParams.append('fields[]', 'categories.categories_id.name')
+  url.searchParams.append('fields[]', 'categories.categories_id.parent_id')
+  url.searchParams.append('fields[]', 'categories.categories_id.subcategories.slug')
+  url.searchParams.append('fields[]', 'categories.categories_id.subcategories.name')
+  url.searchParams.append('limit', 1)
+  url.searchParams.append('filter', JSON.stringify({ slug: { _eq: slug } }))
+
+  const res = await fetch(url.toString())
 
   const {
     data: [vendor],
-  } = await directus.items('vendors').readByQuery({
-    fields: [
-      //
-      '*',
-      'categories.categories_id.slug',
-      'categories.categories_id.name',
-      'categories.categories_id.parent_id',
-      'categories.categories_id.subcategories.slug',
-      'categories.categories_id.subcategories.name',
-    ],
-    limit: 1,
-    filter: { slug: { _eq: slug } },
-  })
+  } = await res.json()
 
-  if (!vendor) return { notFound: true }
-
-  return { props: { vendor } }
+  return { props: vendor }
 }
 
-export default function VendorPage({ vendor }) {
+export default function VendorPage(vendor) {
   return (
-    <div>
+    <>
       <h1>{vendor.name}</h1>
       <p>{vendor.description}</p>
 
@@ -78,11 +87,11 @@ export default function VendorPage({ vendor }) {
           <h2>Categories</h2>
           <ul>
             {vendor.categories.map((cat) => (
-              <li key={cat.id}>{cat.categories_id.name}</li>
+              <li key={cat.categories_id.slug}>{cat.categories_id.name}</li>
             ))}
           </ul>
         </>
       )}
-    </div>
+    </>
   )
 }