Use collection handle for urls

src/lib/hooks/use-layout-data.tsx

@@ -7,7 +7,7 @@ import { ProductPreviewType } from "types/global"
 import { CalculatedVariant } from "types/medusa"
 
 type LayoutCollection = {
-  id: string
+  handle: string
   title: string
 }
 
@@ -30,7 +30,7 @@ const fetchCollectionData = async (): Promise<LayoutCollection[]> => {
   } while (collections.length < count)
 
   return collections.map((c) => ({
-    id: c.id,
+    handle: c.handle,
     title: c.title,
   }))
 }

src/modules/collections/templates/index.tsx

@@ -3,7 +3,7 @@ import getNumberOfSkeletons from "@lib/util/get-number-of-skeletons"
 import repeat from "@lib/util/repeat"
 import ProductPreview from "@modules/products/components/product-preview"
 import SkeletonProductPreview from "@modules/skeletons/components/skeleton-product-preview"
-import { fetchCollectionProducts } from "@pages/collections/[id]"
+import { fetchCollectionProducts } from "@pages/collections/[handle]"
 import { useCart } from "medusa-react"
 import React, { useEffect } from "react"
 import { useInView } from "react-intersection-observer"

src/modules/layout/components/dropdown-menu/index.tsx

@@ -74,7 +74,7 @@ const DropdownMenu = () => {
                                   return (
                                     <div key={collection.id} className="pb-3">
                                       <Link
-                                        href={`/collections/${collection.id}`}
+                                        href={`/collections/${collection.handle}`}
                                       >
                                         <a onClick={() => setOpen(false)}>
                                           {collection.title}

src/modules/layout/components/footer-nav/index.tsx

@@ -24,7 +24,7 @@ const FooterNav = () => {
             >
               {collections?.map((c) => (
                 <li key={c.id}>
-                  <Link href={`/collections/${c.id}`}>
+                  <Link href={`/collections/${c.handle}`}>
                     <a>{c.title}</a>
                   </Link>
                 </li>

src/modules/mobile-menu/components/main-menu/index.tsx

@@ -78,7 +78,7 @@ const MainMenu = () => {
               <>
                 {collections.map((collection) => (
                   <li key={collection.id} className="bg-gray-50 p-4">
-                    <Link href={`/collections/${collection.id}`}>
+                    <Link href={`/collections/${collection.handle}`}>
                       <a>
                         <button
                           className="flex items-center justify-between w-full"

src/modules/products/components/product-actions/index.tsx

@@ -26,7 +26,7 @@ const ProductActions: React.FC<ProductActionsProps> = ({ product }) => {
   return (
     <div className="flex flex-col gap-y-2">
       {product.collection && (
-        <Link href={`/collections/${product.collection.id}`}>
+        <Link href={`/collections/${product.collection.handle}`}>
           <a className="text-small-regular text-gray-700">
             {product.collection.title}
           </a>

src/modules/search/components/hit/index.tsx

@@ -23,8 +23,8 @@ const Hit = ({ hit }: HitProps) => {
       <Thumbnail thumbnail={hit.thumbnail} size="full" />
       <div className="flex flex-col justify-between">
         <div className="flex flex-col">
-          {hit.collection_id && (
-            <Link href={`/collections/${hit.collection_id}`}>
+          {hit.collection_handle && (
+            <Link href={`/collections/${hit.collection_handle}`}>
               <a className="text-small-regular text-gray-500">
                 {hit.collection_handle}
               </a>

src/pages/collections/[id].tsx → src/pages/collections/[handle].tsx

@@ -13,7 +13,7 @@ import { dehydrate, QueryClient, useQuery } from "@tanstack/react-query"
 import { NextPageWithLayout, PrefetchedPageProps } from "../../types/global"
 
 interface Params extends ParsedUrlQuery {
-  id: string
+  handle: string
 }
 
 const fetchCollection = async (id: string) => {
@@ -23,6 +23,18 @@ const fetchCollection = async (id: string) => {
   }))
 }
 
+const fetchCollectionByHandle = async (handle: string) => {
+  return await medusaClient.collections.list({
+    handle: [handle],
+  }).then(({ collections }) => {
+    return {
+      id: collections[0].id,
+      title: collections[0].title,
+    }
+  }
+  )
+}
+
 export const fetchCollectionProducts = async ({
   pageParam = 0,
   id,
@@ -49,11 +61,11 @@ const CollectionPage: NextPageWithLayout<PrefetchedPageProps> = ({
   notFound,
 }) => {
   const { query, isFallback, replace } = useRouter()
-  const id = typeof query.id === "string" ? query.id : ""
+  const handle = typeof query.handle === "string" ? query.handle : ""
 
   const { data, isError, isSuccess, isLoading } = useQuery(
-    ["get_collection", id],
-    () => fetchCollection(id)
+    ["get_collection_by_handle", handle],
+    () => fetchCollection(handle)
   )
 
   if (notFound) {
@@ -84,36 +96,37 @@ const CollectionPage: NextPageWithLayout<PrefetchedPageProps> = ({
   return <></>
 }
 
+const getCollectionHandles = async (): Promise<string[]> => {
+  const data = await medusaClient.collections
+    .list({ limit: 100 })
+    .then(({ collections }) => {
+      return collections.map(({ handle }) => handle)
+    })
+  return data
+}
+
 CollectionPage.getLayout = (page: ReactElement) => {
   return <Layout>{page}</Layout>
 }
 
 export const getStaticPaths: GetStaticPaths<Params> = async () => {
-  const ids = await getCollectionIds()
+  const handles = await getCollectionHandles()
 
   return {
-    paths: ids.map((id) => ({ params: { id } })),
+    paths: handles.map((handle) => ({ params: { handle } })),
     fallback: true,
   }
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
   const queryClient = new QueryClient()
-  const id = context.params?.id as string
-
-  await queryClient.prefetchQuery(["get_collection", id], () =>
-    fetchCollection(id)
-  )
+  const handle = context.params?.handle as string
 
-  await queryClient.prefetchInfiniteQuery(
-    ["get_collection_products", id],
-    ({ pageParam }) => fetchCollectionProducts({ pageParam, id }),
-    {
-      getNextPageParam: (lastPage) => lastPage.nextPage,
-    }
+  await queryClient.prefetchQuery(["get_collection_by_handle", handle], () =>
+    fetchCollectionByHandle(handle)
   )
 
-  const queryData = await queryClient.getQueryData([`get_collection`, id])
+  const queryData: { id: string, title: string } | undefined = await queryClient.getQueryData([`get_collection_by_handle`, handle])
 
   if (!queryData) {
     return {
@@ -123,6 +136,16 @@ export const getStaticProps: GetStaticProps = async (context) => {
     }
   }
 
+  const id = queryData.id
+
+  await queryClient.prefetchInfiniteQuery(
+    ["get_collection_products", id],
+    ({ pageParam }) => fetchCollectionProducts({ pageParam, id }),
+    {
+      getNextPageParam: (lastPage) => lastPage.nextPage,
+    }
+  )
+
   return {
     props: {
       // Work around see – https://github.com/TanStack/query/issues/1458#issuecomment-747716357