fix(dashboard): Add Breadcrumb components (#10079)

**What**
- Adds Breadcrumb component to all routes that needs breadcrumbs.
- The Breadcrumb components use a combination of loader data and useQuery to ensure that the displayed value is kept up to date if the underlying data is changed via a mutation.
- Also fixes a couple of places where the breadcrumb was not setup correctly.

Resolves CMRC-688

.changeset/big-horses-sneeze.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/dashboard": patch
+---
+
+fix(dashboard): Ensure Breadcrumbs don't display stale data

packages/admin/dashboard/src/components/layout/shell/shell.tsx

@@ -2,7 +2,7 @@ import * as Dialog from "@radix-ui/react-dialog"
 
 import { SidebarLeft, TriangleRightMini, XMark } from "@medusajs/icons"
 import { IconButton, clx } from "@medusajs/ui"
-import { PropsWithChildren } from "react"
+import { PropsWithChildren, ReactNode } from "react"
 import { useTranslation } from "react-i18next"
 import { Link, Outlet, UIMatch, useMatches } from "react-router-dom"
 
@@ -45,18 +45,20 @@ const Gutter = ({ children }: PropsWithChildren) => {
 const Breadcrumbs = () => {
   const matches = useMatches() as unknown as UIMatch<
     unknown,
-    { crumb?: (data?: unknown) => string }
+    {
+      breadcrumb?: (match?: UIMatch) => string | ReactNode
+    }
   >[]
 
   const crumbs = matches
-    .filter((match) => Boolean(match.handle?.crumb))
+    .filter((match) => match.handle?.breadcrumb)
     .map((match) => {
       const handle = match.handle
 
-      let label: string | null = null
+      let label: string | ReactNode | undefined = undefined
 
       try {
-        label = handle.crumb!(match.data)
+        label = handle.breadcrumb?.(match)
       } catch (error) {
         // noop
       }
@@ -70,7 +72,7 @@ const Breadcrumbs = () => {
         path: match.pathname,
       }
     })
-    .filter(Boolean) as { label: string; path: string }[]
+    .filter(Boolean) as { label: string | ReactNode; path: string }[]
 
   return (
     <ol

packages/admin/dashboard/src/hooks/api/products.tsx

@@ -237,7 +237,12 @@ export const useProduct = (
   id: string,
   query?: Record<string, any>,
   options?: Omit<
-    UseQueryOptions<any, FetchError, any, QueryKey>,
+    UseQueryOptions<
+      HttpTypes.AdminProductResponse,
+      FetchError,
+      HttpTypes.AdminProductResponse,
+      QueryKey
+    >,
     "queryFn" | "queryKey"
   >
 ) => {
@@ -302,9 +307,13 @@ export const useUpdateProduct = (
 ) => {
   return useMutation({
     mutationFn: (payload) => sdk.admin.product.update(id, payload),
-    onSuccess: (data, variables, context) => {
+    onSuccess: async (data, variables, context) => {
-      queryClient.invalidateQueries({ queryKey: productsQueryKeys.lists() })
+      await queryClient.invalidateQueries({
-      queryClient.invalidateQueries({ queryKey: productsQueryKeys.detail(id) })
+        queryKey: productsQueryKeys.lists(),
+      })
+      await queryClient.invalidateQueries({
+        queryKey: productsQueryKeys.detail(id),
+      })
 
       options?.onSuccess?.(data, variables, context)
     },

packages/admin/dashboard/src/hooks/api/shipping-profiles.tsx

@@ -40,11 +40,14 @@ export const useCreateShippingProfile = (
 export const useShippingProfile = (
   id: string,
   query?: Record<string, any>,
-  options?: UseQueryOptions<
+  options?: Omit<
-    HttpTypes.AdminShippingProfileResponse,
+    UseQueryOptions<
-    FetchError,
+      HttpTypes.AdminShippingProfileResponse,
-    HttpTypes.AdminShippingProfileResponse,
+      FetchError,
-    QueryKey
+      HttpTypes.AdminShippingProfileResponse,
+      QueryKey
+    >,
+    "queryFn" | "queryKey"
   >
 ) => {
   const { data, ...rest } = useQuery({

packages/admin/dashboard/src/providers/providers.tsx

@@ -2,7 +2,6 @@ import { Toaster, TooltipProvider } from "@medusajs/ui"
 import { QueryClientProvider } from "@tanstack/react-query"
 import type { PropsWithChildren } from "react"
 import { HelmetProvider } from "react-helmet-async"
-
 import { I18n } from "../components/utilities/i18n"
 import {
   DashboardExtensionManager,

packages/admin/dashboard/src/providers/router-provider/route-map.tsx

@@ -1,5 +1,5 @@
-import { AdminProductCategoryResponse, HttpTypes } from "@medusajs/types"
+import { HttpTypes } from "@medusajs/types"
-import { Outlet, RouteObject } from "react-router-dom"
+import { Outlet, RouteObject, UIMatch } from "react-router-dom"
 
 import { t } from "i18next"
 import { ProtectedRoute } from "../../components/authentication/protected-route"
@@ -7,12 +7,7 @@ import { MainLayout } from "../../components/layout/main-layout"
 import { PublicLayout } from "../../components/layout/public-layout"
 import { SettingsLayout } from "../../components/layout/settings-layout"
 import { ErrorBoundary } from "../../components/utilities/error-boundary"
-import { getCountryByIso2 } from "../../lib/data/countries"
+import { TaxRegionDetailBreadcrumb } from "../../routes/tax-regions/tax-region-detail/breadcrumb"
-import {
-  getProvinceByIso2,
-  isProvinceInCountry,
-} from "../../lib/data/country-states"
-import { productLoader } from "../../routes/products/product-detail/loader"
 import { taxRegionLoader } from "../../routes/tax-regions/tax-region-detail/loader"
 import { RouteExtensions } from "./route-extensions"
 import { SettingsExtensions } from "./settings-extensions"
@@ -34,7 +29,7 @@ export const RouteMap: RouteObject[] = [
             path: "/products",
             errorElement: <ErrorBoundary />,
             handle: {
-              crumb: () => t("products.domain"),
+              breadcrumb: () => t("products.domain"),
             },
             children: [
               {
@@ -58,11 +53,20 @@ export const RouteMap: RouteObject[] = [
               {
                 path: ":id",
                 errorElement: <ErrorBoundary />,
-                Component: Outlet,
+                lazy: async () => {
-                loader: productLoader,
+                  const { Breadcrumb, loader } = await import(
-                handle: {
+                    "../../routes/products/product-detail"
-                  crumb: (data: HttpTypes.AdminProductResponse) =>
+                  )
-                    data.product.title,
+
+                  return {
+                    Component: Outlet,
+                    loader,
+                    handle: {
+                      breadcrumb: (
+                        match: UIMatch<HttpTypes.AdminProductResponse>
+                      ) => <Breadcrumb {...match} />,
+                    },
+                  }
                 },
                 children: [
                   {
@@ -134,13 +138,21 @@ export const RouteMap: RouteObject[] = [
                   },
                   {
                     path: "variants/:variant_id",
-                    lazy: () =>
+                    lazy: async () => {
-                      import(
+                      const { Component, Breadcrumb, loader } = await import(
                         "../../routes/product-variants/product-variant-detail"
-                      ),
+                      )
-                    handle: {
+
-                      crumb: (data: HttpTypes.AdminProductVariantResponse) =>
+                      return {
-                        data.variant.title,
+                        Component,
+                        loader,
+                        handle: {
+                          breadcrumb: (
+                            // eslint-disable-next-line max-len
+                            match: UIMatch<HttpTypes.AdminProductVariantResponse>
+                          ) => <Breadcrumb {...match} />,
+                        },
+                      }
                     },
                     children: [
                       {
@@ -172,7 +184,7 @@ export const RouteMap: RouteObject[] = [
             path: "/categories",
             errorElement: <ErrorBoundary />,
             handle: {
-              crumb: () => t("categories.domain"),
+              breadcrumb: () => t("categories.domain"),
             },
             children: [
               {
@@ -193,10 +205,20 @@ export const RouteMap: RouteObject[] = [
               },
               {
                 path: ":id",
-                lazy: () => import("../../routes/categories/category-detail"),
+                lazy: async () => {
-                handle: {
+                  const { Component, Breadcrumb, loader } = await import(
-                  crumb: (data: AdminProductCategoryResponse) =>
+                    "../../routes/categories/category-detail"
-                    data.product_category.name,
+                  )
+
+                  return {
+                    Component,
+                    loader,
+                    handle: {
+                      breadcrumb: (
+                        match: UIMatch<HttpTypes.AdminProductCategoryResponse>
+                      ) => <Breadcrumb {...match} />,
+                    },
+                  }
                 },
                 children: [
                   {
@@ -226,7 +248,7 @@ export const RouteMap: RouteObject[] = [
             path: "/orders",
             errorElement: <ErrorBoundary />,
             handle: {
-              crumb: () => t("orders.domain"),
+              breadcrumb: () => t("orders.domain"),
             },
             children: [
               {
@@ -235,7 +257,21 @@ export const RouteMap: RouteObject[] = [
               },
               {
                 path: ":id",
-                lazy: () => import("../../routes/orders/order-detail"),
+                lazy: async () => {
+                  const { Component, Breadcrumb, loader } = await import(
+                    "../../routes/orders/order-detail"
+                  )
+
+                  return {
+                    Component,
+                    loader,
+                    handle: {
+                      breadcrumb: (
+                        match: UIMatch<HttpTypes.AdminOrderResponse>
+                      ) => <Breadcrumb {...match} />,
+                    },
+                  }
+                },
                 children: [
                   {
                     path: "fulfillment",
@@ -289,7 +325,7 @@ export const RouteMap: RouteObject[] = [
             path: "/promotions",
             errorElement: <ErrorBoundary />,
             handle: {
-              crumb: () => t("promotions.domain"),
+              breadcrumb: () => t("promotions.domain"),
             },
             children: [
               {
@@ -302,10 +338,20 @@ export const RouteMap: RouteObject[] = [
               },
               {
                 path: ":id",
-                lazy: () => import("../../routes/promotions/promotion-detail"),
+                lazy: async () => {
-                handle: {
+                  const { Component, Breadcrumb, loader } = await import(
-                  // TODO: Re-add type when it's available again
+                    "../../routes/promotions/promotion-detail"
-                  crumb: (data: any) => data.promotion?.code,
+                  )
+
+                  return {
+                    Component,
+                    loader,
+                    handle: {
+                      breadcrumb: (
+                        match: UIMatch<HttpTypes.AdminPromotionResponse>
+                      ) => <Breadcrumb {...match} />,
+                    },
+                  }
                 },
                 children: [
                   {
@@ -330,7 +376,9 @@ export const RouteMap: RouteObject[] = [
           {
             path: "/campaigns",
             errorElement: <ErrorBoundary />,
-            handle: { crumb: () => t("campaigns.domain") },
+            handle: {
+              breadcrumb: () => t("campaigns.domain"),
+            },
             children: [
               {
                 path: "",
@@ -343,8 +391,21 @@ export const RouteMap: RouteObject[] = [
               },
               {
                 path: ":id",
-                lazy: () => import("../../routes/campaigns/campaign-detail"),
+                lazy: async () => {
-                handle: { crumb: (data: any) => data.campaign.name },
+                  const { Component, Breadcrumb, loader } = await import(
+                    "../../routes/campaigns/campaign-detail"
+                  )
+
+                  return {
+                    Component,
+                    loader,
+                    handle: {
+                      breadcrumb: (
+                        match: UIMatch<HttpTypes.AdminCampaignResponse>
+                      ) => <Breadcrumb {...match} />,
+                    },
+                  }
+                },
                 children: [
                   {
                     path: "edit",
@@ -373,7 +434,7 @@ export const RouteMap: RouteObject[] = [
             path: "/collections",
             errorElement: <ErrorBoundary />,
             handle: {
-              crumb: () => t("collections.domain"),
+              breadcrumb: () => t("collections.domain"),
             },
             children: [
               {
@@ -389,11 +450,20 @@ export const RouteMap: RouteObject[] = [
               },
               {
                 path: ":id",
-                lazy: () =>
+                lazy: async () => {
-                  import("../../routes/collections/collection-detail"),
+                  const { Component, Breadcrumb, loader } = await import(
-                handle: {
+                    "../../routes/collections/collection-detail"
-                  crumb: (data: { collection: HttpTypes.AdminCollection }) =>
+                  )
-                    data.collection.title,
+
+                  return {
+                    Component,
+                    loader,
+                    handle: {
+                      breadcrumb: (
+                        match: UIMatch<HttpTypes.AdminCollectionResponse>
+                      ) => <Breadcrumb {...match} />,
+                    },
+                  }
                 },
                 children: [
                   {
@@ -416,7 +486,7 @@ export const RouteMap: RouteObject[] = [
             path: "/price-lists",
             errorElement: <ErrorBoundary />,
             handle: {
-              crumb: () => t("priceLists.domain"),
+              breadcrumb: () => t("priceLists.domain"),
             },
             children: [
               {
@@ -432,11 +502,20 @@ export const RouteMap: RouteObject[] = [
               },
               {
                 path: ":id",
-                lazy: () =>
+                lazy: async () => {
-                  import("../../routes/price-lists/price-list-detail"),
+                  const { Component, Breadcrumb, loader } = await import(
-                handle: {
+                    "../../routes/price-lists/price-list-detail"
-                  crumb: (data: HttpTypes.AdminPriceListResponse) =>
+                  )
-                    data.price_list.title,
+
+                  return {
+                    Component,
+                    loader,
+                    handle: {
+                      breadcrumb: (
+                        match: UIMatch<HttpTypes.AdminPriceListResponse>
+                      ) => <Breadcrumb {...match} />,
+                    },
+                  }
                 },
                 children: [
                   {
@@ -469,7 +548,7 @@ export const RouteMap: RouteObject[] = [
             path: "/customers",
             errorElement: <ErrorBoundary />,
             handle: {
-              crumb: () => t("customers.domain"),
+              breadcrumb: () => t("customers.domain"),
             },
             children: [
               {
@@ -485,10 +564,20 @@ export const RouteMap: RouteObject[] = [
               },
               {
                 path: ":id",
-                lazy: () => import("../../routes/customers/customer-detail"),
+                lazy: async () => {
-                handle: {
+                  const { Component, Breadcrumb, loader } = await import(
-                  // Re-add type when it's available again
+                    "../../routes/customers/customer-detail"
-                  crumb: (data: any) => data.customer.email,
+                  )
+
+                  return {
+                    Component,
+                    loader,
+                    handle: {
+                      breadcrumb: (
+                        match: UIMatch<HttpTypes.AdminCustomerResponse>
+                      ) => <Breadcrumb {...match} />,
+                    },
+                  }
                 },
                 children: [
                   {
@@ -515,7 +604,7 @@ export const RouteMap: RouteObject[] = [
             path: "/customer-groups",
             errorElement: <ErrorBoundary />,
             handle: {
-              crumb: () => t("customerGroups.domain"),
+              breadcrumb: () => t("customerGroups.domain"),
             },
             children: [
               {
@@ -534,12 +623,20 @@ export const RouteMap: RouteObject[] = [
               },
               {
                 path: ":id",
-                lazy: () =>
+                lazy: async () => {
-                  import("../../routes/customer-groups/customer-group-detail"),
+                  const { Component, Breadcrumb, loader } = await import(
-                handle: {
+                    "../../routes/customer-groups/customer-group-detail"
-                  crumb: (data: {
+                  )
-                    customer_group: HttpTypes.AdminCustomerGroup
+
-                  }) => data.customer_group.name,
+                  return {
+                    Component,
+                    loader,
+                    handle: {
+                      breadcrumb: (
+                        match: UIMatch<HttpTypes.AdminCustomerGroupResponse>
+                      ) => <Breadcrumb {...match} />,
+                    },
+                  }
                 },
                 children: [
                   {
@@ -571,7 +668,7 @@ export const RouteMap: RouteObject[] = [
             path: "/reservations",
             errorElement: <ErrorBoundary />,
             handle: {
-              crumb: () => t("reservations.domain"),
+              breadcrumb: () => t("reservations.domain"),
             },
             children: [
               {
@@ -588,16 +685,20 @@ export const RouteMap: RouteObject[] = [
               },
               {
                 path: ":id",
-                lazy: () =>
+                lazy: async () => {
-                  import("../../routes/reservations/reservation-detail"),
+                  const { Component, Breadcrumb, loader } = await import(
-                handle: {
+                    "../../routes/reservations/reservation-detail"
-                  crumb: ({ reservation }: any) => {
+                  )
-                    return (
+
-                      reservation?.inventory_item?.title ??
+                  return {
-                      reservation?.inventory_item?.sku ??
+                    Component,
-                      reservation?.id
+                    loader,
-                    )
+                    handle: {
-                  },
+                      breadcrumb: (
+                        match: UIMatch<HttpTypes.AdminReservationResponse>
+                      ) => <Breadcrumb {...match} />,
+                    },
+                  }
                 },
                 children: [
                   {
@@ -620,7 +721,7 @@ export const RouteMap: RouteObject[] = [
             path: "/inventory",
             errorElement: <ErrorBoundary />,
             handle: {
-              crumb: () => t("inventory.domain"),
+              breadcrumb: () => t("inventory.domain"),
             },
             children: [
               {
@@ -636,10 +737,20 @@ export const RouteMap: RouteObject[] = [
               },
               {
                 path: ":id",
-                lazy: () => import("../../routes/inventory/inventory-detail"),
+                lazy: async () => {
-                handle: {
+                  const { Component, Breadcrumb, loader } = await import(
-                  crumb: (data: HttpTypes.AdminInventoryItemResponse) =>
+                    "../../routes/inventory/inventory-detail"
-                    data.inventory_item.title ?? data.inventory_item.sku,
+                  )
+
+                  return {
+                    Component,
+                    loader,
+                    handle: {
+                      breadcrumb: (
+                        match: UIMatch<HttpTypes.AdminInventoryItemResponse>
+                      ) => <Breadcrumb {...match} />,
+                    },
+                  }
                 },
                 children: [
                   {
@@ -691,7 +802,7 @@ export const RouteMap: RouteObject[] = [
       {
         path: "/settings",
         handle: {
-          crumb: () => t("app.nav.settings.header"),
+          breadcrumb: () => t("app.nav.settings.header"),
         },
         element: <SettingsLayout />,
         children: [
@@ -705,7 +816,7 @@ export const RouteMap: RouteObject[] = [
             errorElement: <ErrorBoundary />,
             lazy: () => import("../../routes/profile/profile-detail"),
             handle: {
-              crumb: () => t("profile.domain"),
+              breadcrumb: () => t("profile.domain"),
             },
             children: [
               {
@@ -719,7 +830,7 @@ export const RouteMap: RouteObject[] = [
             errorElement: <ErrorBoundary />,
             element: <Outlet />,
             handle: {
-              crumb: () => t("regions.domain"),
+              breadcrumb: () => t("regions.domain"),
             },
             children: [
               {
@@ -734,10 +845,20 @@ export const RouteMap: RouteObject[] = [
               },
               {
                 path: ":id",
-                lazy: () => import("../../routes/regions/region-detail"),
+                lazy: async () => {
-                handle: {
+                  const { Component, Breadcrumb, loader } = await import(
-                  crumb: (data: { region: HttpTypes.AdminRegion }) =>
+                    "../../routes/regions/region-detail"
-                    data.region.name,
+                  )
+
+                  return {
+                    Component,
+                    loader,
+                    handle: {
+                      breadcrumb: (
+                        match: UIMatch<HttpTypes.AdminRegionResponse>
+                      ) => <Breadcrumb {...match} />,
+                    },
+                  }
                 },
                 children: [
                   {
@@ -758,7 +879,7 @@ export const RouteMap: RouteObject[] = [
             errorElement: <ErrorBoundary />,
             lazy: () => import("../../routes/store/store-detail"),
             handle: {
-              crumb: () => t("store.domain"),
+              breadcrumb: () => t("store.domain"),
             },
             children: [
               {
@@ -780,7 +901,7 @@ export const RouteMap: RouteObject[] = [
             errorElement: <ErrorBoundary />,
             element: <Outlet />,
             handle: {
-              crumb: () => t("users.domain"),
+              breadcrumb: () => t("users.domain"),
             },
             children: [
               {
@@ -795,9 +916,20 @@ export const RouteMap: RouteObject[] = [
               },
               {
                 path: ":id",
-                lazy: () => import("../../routes/users/user-detail"),
+                lazy: async () => {
-                handle: {
+                  const { Component, Breadcrumb, loader } = await import(
-                  crumb: (data: HttpTypes.AdminUserResponse) => data.user.email,
+                    "../../routes/users/user-detail"
+                  )
+
+                  return {
+                    Component,
+                    loader,
+                    handle: {
+                      breadcrumb: (
+                        match: UIMatch<HttpTypes.AdminUserResponse>
+                      ) => <Breadcrumb {...match} />,
+                    },
+                  }
                 },
                 children: [
                   {
@@ -817,7 +949,7 @@ export const RouteMap: RouteObject[] = [
             errorElement: <ErrorBoundary />,
             element: <Outlet />,
             handle: {
-              crumb: () => t("salesChannels.domain"),
+              breadcrumb: () => t("salesChannels.domain"),
             },
             children: [
               {
@@ -836,11 +968,20 @@ export const RouteMap: RouteObject[] = [
               },
               {
                 path: ":id",
-                lazy: () =>
+                lazy: async () => {
-                  import("../../routes/sales-channels/sales-channel-detail"),
+                  const { Component, Breadcrumb, loader } = await import(
-                handle: {
+                    "../../routes/sales-channels/sales-channel-detail"
-                  crumb: (data: HttpTypes.AdminSalesChannelResponse) =>
+                  )
-                    data.sales_channel.name,
+
+                  return {
+                    Component,
+                    loader,
+                    handle: {
+                      breadcrumb: (
+                        match: UIMatch<HttpTypes.AdminSalesChannelResponse>
+                      ) => <Breadcrumb {...match} />,
+                    },
+                  }
                 },
                 children: [
                   {
@@ -871,7 +1012,7 @@ export const RouteMap: RouteObject[] = [
             errorElement: <ErrorBoundary />,
             element: <Outlet />,
             handle: {
-              crumb: () => t("locations.domain"),
+              breadcrumb: () => t("locations.domain"),
             },
             children: [
               {
@@ -886,7 +1027,7 @@ export const RouteMap: RouteObject[] = [
                 path: "shipping-profiles",
                 element: <Outlet />,
                 handle: {
-                  crumb: () => t("shippingProfile.domain"),
+                  breadcrumb: () => t("shippingProfile.domain"),
                 },
                 children: [
                   {
@@ -906,24 +1047,42 @@ export const RouteMap: RouteObject[] = [
                     ],
                   },
                   {
-                    path: ":id",
+                    path: ":shipping_profile_id",
-                    handle: {
+                    lazy: async () => {
-                      crumb: (data: HttpTypes.AdminShippingProfileResponse) =>
+                      const { Component, Breadcrumb, loader } = await import(
-                        data.shipping_profile.name,
-                    },
-                    lazy: () =>
-                      import(
                         "../../routes/shipping-profiles/shipping-profile-detail"
-                      ),
+                      )
+
+                      return {
+                        Component,
+                        loader,
+                        handle: {
+                          breadcrumb: (
+                            // eslint-disable-next-line max-len
+                            match: UIMatch<HttpTypes.AdminShippingProfileResponse>
+                          ) => <Breadcrumb {...match} />,
+                        },
+                      }
+                    },
                   },
                 ],
               },
               {
                 path: ":location_id",
-                lazy: () => import("../../routes/locations/location-detail"),
+                lazy: async () => {
-                handle: {
+                  const { Component, Breadcrumb, loader } = await import(
-                  crumb: (data: HttpTypes.AdminStockLocationResponse) =>
+                    "../../routes/locations/location-detail"
-                    data.stock_location.name,
+                  )
+
+                  return {
+                    Component,
+                    loader,
+                    handle: {
+                      breadcrumb: (
+                        match: UIMatch<HttpTypes.AdminStockLocationResponse>
+                      ) => <Breadcrumb {...match} />,
+                    },
+                  }
                 },
                 children: [
                   {
@@ -1013,7 +1172,7 @@ export const RouteMap: RouteObject[] = [
             errorElement: <ErrorBoundary />,
             element: <Outlet />,
             handle: {
-              crumb: () => t("productTags.domain"),
+              breadcrumb: () => t("productTags.domain"),
             },
             children: [
               {
@@ -1030,11 +1189,20 @@ export const RouteMap: RouteObject[] = [
               },
               {
                 path: ":id",
-                lazy: () =>
+                lazy: async () => {
-                  import("../../routes/product-tags/product-tag-detail"),
+                  const { Component, Breadcrumb, loader } = await import(
-                handle: {
+                    "../../routes/product-tags/product-tag-detail"
-                  crumb: (data: HttpTypes.AdminProductTagResponse) =>
+                  )
-                    data.product_tag.value,
+
+                  return {
+                    Component,
+                    loader,
+                    handle: {
+                      breadcrumb: (
+                        match: UIMatch<HttpTypes.AdminProductTagResponse>
+                      ) => <Breadcrumb {...match} />,
+                    },
+                  }
                 },
                 children: [
                   {
@@ -1051,7 +1219,7 @@ export const RouteMap: RouteObject[] = [
             errorElement: <ErrorBoundary />,
             element: <Outlet />,
             handle: {
-              crumb: () => t("workflowExecutions.domain"),
+              breadcrumb: () => t("workflowExecutions.domain"),
             },
             children: [
               {
@@ -1063,18 +1231,20 @@ export const RouteMap: RouteObject[] = [
               },
               {
                 path: ":id",
-                lazy: () =>
+                lazy: async () => {
-                  import(
+                  const { Component, Breadcrumb, loader } = await import(
                     "../../routes/workflow-executions/workflow-execution-detail"
-                  ),
+                  )
-                handle: {
-                  crumb: (data: { workflow: any }) => {
-                    if (!data) {
-                      return ""
-                    }
 
-                    return data.workflow.name
+                  return {
-                  },
+                    Component,
+                    loader,
+                    handle: {
+                      breadcrumb: (
+                        match: UIMatch<HttpTypes.AdminWorkflowExecutionResponse>
+                      ) => <Breadcrumb {...match} />,
+                    },
+                  }
                 },
               },
             ],
@@ -1084,7 +1254,7 @@ export const RouteMap: RouteObject[] = [
             errorElement: <ErrorBoundary />,
             element: <Outlet />,
             handle: {
-              crumb: () => t("productTypes.domain"),
+              breadcrumb: () => t("productTypes.domain"),
             },
             children: [
               {
@@ -1101,11 +1271,20 @@ export const RouteMap: RouteObject[] = [
               },
               {
                 path: ":id",
-                lazy: () =>
+                lazy: async () => {
-                  import("../../routes/product-types/product-type-detail"),
+                  const { Component, Breadcrumb, loader } = await import(
-                handle: {
+                    "../../routes/product-types/product-type-detail"
-                  crumb: (data: HttpTypes.AdminProductTypeResponse) =>
+                  )
-                    data.product_type.value,
+
+                  return {
+                    Component,
+                    loader,
+                    handle: {
+                      breadcrumb: (
+                        match: UIMatch<HttpTypes.AdminProductTypeResponse>
+                      ) => <Breadcrumb {...match} />,
+                    },
+                  }
                 },
                 children: [
                   {
@@ -1121,7 +1300,7 @@ export const RouteMap: RouteObject[] = [
             path: "publishable-api-keys",
             element: <Outlet />,
             handle: {
-              crumb: () => t("apiKeyManagement.domain.publishable"),
+              breadcrumb: () => t("apiKeyManagement.domain.publishable"),
             },
             children: [
               {
@@ -1148,14 +1327,20 @@ export const RouteMap: RouteObject[] = [
               },
               {
                 path: ":id",
-                lazy: () =>
+                lazy: async () => {
-                  import(
+                  const { Component, Breadcrumb, loader } = await import(
                     "../../routes/api-key-management/api-key-management-detail"
-                  ),
+                  )
-                handle: {
+
-                  crumb: (data: HttpTypes.AdminApiKeyResponse) => {
+                  return {
-                    return data.api_key.title
+                    Component,
-                  },
+                    loader,
+                    handle: {
+                      breadcrumb: (
+                        match: UIMatch<HttpTypes.AdminApiKeyResponse>
+                      ) => <Breadcrumb {...match} />,
+                    },
+                  }
                 },
                 children: [
                   {
@@ -1180,7 +1365,7 @@ export const RouteMap: RouteObject[] = [
             path: "secret-api-keys",
             element: <Outlet />,
             handle: {
-              crumb: () => t("apiKeyManagement.domain.secret"),
+              breadcrumb: () => t("apiKeyManagement.domain.secret"),
             },
             children: [
               {
@@ -1207,14 +1392,20 @@ export const RouteMap: RouteObject[] = [
               },
               {
                 path: ":id",
-                lazy: () =>
+                lazy: async () => {
-                  import(
+                  const { Component, Breadcrumb, loader } = await import(
                     "../../routes/api-key-management/api-key-management-detail"
-                  ),
+                  )
-                handle: {
+
-                  crumb: (data: HttpTypes.AdminApiKeyResponse) => {
+                  return {
-                    return data.api_key.title
+                    Component,
-                  },
+                    loader,
+                    handle: {
+                      breadcrumb: (
+                        match: UIMatch<HttpTypes.AdminApiKeyResponse>
+                      ) => <Breadcrumb {...match} />,
+                    },
+                  }
                 },
                 children: [
                   {
@@ -1232,7 +1423,7 @@ export const RouteMap: RouteObject[] = [
             path: "tax-regions",
             element: <Outlet />,
             handle: {
-              crumb: () => t("taxRegions.domain"),
+              breadcrumb: () => t("taxRegions.domain"),
             },
             children: [
               {
@@ -1251,19 +1442,22 @@ export const RouteMap: RouteObject[] = [
                 Component: Outlet,
                 loader: taxRegionLoader,
                 handle: {
-                  crumb: (data: HttpTypes.AdminTaxRegionResponse) => {
+                  breadcrumb: (
-                    return (
+                    match: UIMatch<HttpTypes.AdminTaxRegionResponse>
-                      getCountryByIso2(data.tax_region.country_code)
+                  ) => <TaxRegionDetailBreadcrumb {...match} />,
-                        ?.display_name ||
-                      data.tax_region.country_code?.toUpperCase()
-                    )
-                  },
                 },
                 children: [
                   {
                     path: "",
-                    lazy: () =>
+                    lazy: async () => {
-                      import("../../routes/tax-regions/tax-region-detail"),
+                      const { Component } = await import(
+                        "../../routes/tax-regions/tax-region-detail"
+                      )
+
+                      return {
+                        Component,
+                      }
+                    },
                     children: [
                       {
                         path: "provinces/create",
@@ -1304,26 +1498,20 @@ export const RouteMap: RouteObject[] = [
                   },
                   {
                     path: "provinces/:province_id",
-                    lazy: () =>
+                    lazy: async () => {
-                      import(
+                      const { Component, Breadcrumb, loader } = await import(
                         "../../routes/tax-regions/tax-region-province-detail"
-                      ),
+                      )
-                    handle: {
-                      crumb: (data: HttpTypes.AdminTaxRegionResponse) => {
-                        const countryCode =
-                          data.tax_region.country_code?.toUpperCase()
-                        const provinceCode =
-                          data.tax_region.province_code?.toUpperCase()
 
-                        const isValid = isProvinceInCountry(
+                      return {
-                          countryCode,
+                        Component,
-                          provinceCode
+                        loader,
-                        )
+                        handle: {
-
+                          breadcrumb: (
-                        return isValid
+                            match: UIMatch<HttpTypes.AdminTaxRegionResponse>
-                          ? getProvinceByIso2(provinceCode)
+                          ) => <Breadcrumb {...match} />,
-                          : provinceCode
+                        },
-                      },
+                      }
                     },
                     children: [
                       {
@@ -1364,7 +1552,7 @@ export const RouteMap: RouteObject[] = [
             path: "return-reasons",
             element: <Outlet />,
             handle: {
-              crumb: () => t("returnReasons.domain"),
+              breadcrumb: () => t("returnReasons.domain"),
             },
             children: [
               {

packages/admin/dashboard/src/routes/api-key-management/api-key-management-detail/breadcrumb.tsx

@@ -0,0 +1,24 @@
+import { HttpTypes } from "@medusajs/types"
+import { UIMatch } from "react-router-dom"
+
+import { useApiKey } from "../../../hooks/api"
+
+type ApiKeyManagementDetailBreadcrumbProps =
+  UIMatch<HttpTypes.AdminApiKeyResponse>
+
+export const ApiKeyManagementDetailBreadcrumb = (
+  props: ApiKeyManagementDetailBreadcrumbProps
+) => {
+  const { id } = props.params || {}
+
+  const { api_key } = useApiKey(id!, {
+    initialData: props.data,
+    enabled: Boolean(id),
+  })
+
+  if (!api_key) {
+    return null
+  }
+
+  return <span>{api_key.title}</span>
+}

packages/admin/dashboard/src/routes/api-key-management/api-key-management-detail/index.ts

@@ -1,2 +1,3 @@
 export { ApiKeyManagementDetail as Component } from "./api-key-management-detail"
+export { ApiKeyManagementDetailBreadcrumb as Breadcrumb } from "./breadcrumb"
 export { apiKeyLoader as loader } from "./loader"

packages/admin/dashboard/src/routes/api-key-management/api-key-management-detail/loader.ts

@@ -1,6 +1,5 @@
 import { LoaderFunctionArgs } from "react-router-dom"
 
-import { HttpTypes } from "@medusajs/types"
 import { apiKeysQueryKeys } from "../../../hooks/api/api-keys"
 import { sdk } from "../../../lib/client"
 import { queryClient } from "../../../lib/query-client"
@@ -14,8 +13,5 @@ export const apiKeyLoader = async ({ params }: LoaderFunctionArgs) => {
   const id = params.id
   const query = apiKeyDetailQuery(id!)
 
-  return (
+  return queryClient.ensureQueryData(query)
-    queryClient.getQueryData<HttpTypes.AdminApiKeyResponse>(query.queryKey) ??
-    (await queryClient.fetchQuery(query))
-  )
 }

packages/admin/dashboard/src/routes/campaigns/campaign-detail/breadcrumb.tsx

@@ -0,0 +1,29 @@
+import { HttpTypes } from "@medusajs/types"
+import { UIMatch } from "react-router-dom"
+import { useCampaign } from "../../../hooks/api"
+import { CAMPAIGN_DETAIL_FIELDS } from "./constants"
+
+type CampaignDetailBreadcrumbProps = UIMatch<HttpTypes.AdminCampaignResponse>
+
+export const CampaignDetailBreadcrumb = (
+  props: CampaignDetailBreadcrumbProps
+) => {
+  const { id } = props.params || {}
+
+  const { campaign } = useCampaign(
+    id!,
+    {
+      fields: CAMPAIGN_DETAIL_FIELDS,
+    },
+    {
+      initialData: props.data,
+      enabled: Boolean(id),
+    }
+  )
+
+  if (!campaign) {
+    return null
+  }
+
+  return <span>{campaign.name}</span>
+}

packages/admin/dashboard/src/routes/campaigns/campaign-detail/campaign-detail.tsx

@@ -11,6 +11,7 @@ import { TwoColumnPageSkeleton } from "../../../components/common/skeleton"
 import { TwoColumnPage } from "../../../components/layout/pages"
 import { useDashboardExtension } from "../../../extensions"
 import { CampaignConfigurationSection } from "./components/campaign-configuration-section"
+import { CAMPAIGN_DETAIL_FIELDS } from "./constants"
 
 export const CampaignDetail = () => {
   const initialData = useLoaderData() as Awaited<
@@ -20,7 +21,7 @@ export const CampaignDetail = () => {
   const { id } = useParams()
   const { campaign, isLoading, isError, error } = useCampaign(
     id!,
-    { fields: "+promotions.id" },
+    { fields: CAMPAIGN_DETAIL_FIELDS },
     { initialData }
   )
 

packages/admin/dashboard/src/routes/campaigns/campaign-detail/constants.ts

@@ -0,0 +1 @@
+export const CAMPAIGN_DETAIL_FIELDS = "+promotions.id"

packages/admin/dashboard/src/routes/campaigns/campaign-detail/index.ts

@@ -1,2 +1,3 @@
+export { CampaignDetailBreadcrumb as Breadcrumb } from "./breadcrumb"
 export { CampaignDetail as Component } from "./campaign-detail"
 export { campaignLoader as loader } from "./loader"

packages/admin/dashboard/src/routes/campaigns/campaign-detail/loader.ts

@@ -1,15 +1,15 @@
-import { AdminCampaignResponse } from "@medusajs/types"
 import { LoaderFunctionArgs } from "react-router-dom"
 
 import { campaignsQueryKeys } from "../../../hooks/api/campaigns"
 import { sdk } from "../../../lib/client"
 import { queryClient } from "../../../lib/query-client"
+import { CAMPAIGN_DETAIL_FIELDS } from "./constants"
 
 const campaignDetailQuery = (id: string) => ({
   queryKey: campaignsQueryKeys.detail(id),
   queryFn: async () =>
     sdk.admin.campaign.retrieve(id, {
-      fields: "+promotions.id",
+      fields: CAMPAIGN_DETAIL_FIELDS,
     }),
 })
 
@@ -17,8 +17,5 @@ export const campaignLoader = async ({ params }: LoaderFunctionArgs) => {
   const id = params.id
   const query = campaignDetailQuery(id!)
 
-  return (
+  return queryClient.ensureQueryData(query)
-    queryClient.getQueryData<AdminCampaignResponse>(query.queryKey) ??
-    (await queryClient.fetchQuery(query))
-  )
 }

packages/admin/dashboard/src/routes/categories/category-detail/breadcrumb.tsx

@@ -0,0 +1,29 @@
+import { HttpTypes } from "@medusajs/types"
+import { UIMatch } from "react-router-dom"
+import { useProductCategory } from "../../../hooks/api"
+
+type CategoryDetailBreadcrumbProps =
+  UIMatch<HttpTypes.AdminProductCategoryResponse>
+
+export const CategoryDetailBreadcrumb = (
+  props: CategoryDetailBreadcrumbProps
+) => {
+  const { id } = props.params || {}
+
+  const { product_category } = useProductCategory(
+    id!,
+    {
+      fields: "name",
+    },
+    {
+      initialData: props.data,
+      enabled: Boolean(id),
+    }
+  )
+
+  if (!product_category) {
+    return null
+  }
+
+  return <span>{product_category.name}</span>
+}

packages/admin/dashboard/src/routes/categories/category-detail/index.ts

@@ -1,2 +1,3 @@
+export { CategoryDetailBreadcrumb as Breadcrumb } from "./breadcrumb"
 export { CategoryDetail as Component } from "./category-detail"
 export { categoryLoader as loader } from "./loader"

packages/admin/dashboard/src/routes/categories/category-detail/loader.ts

@@ -1,4 +1,3 @@
-import { AdminProductCategoryResponse } from "@medusajs/types"
 import { LoaderFunctionArgs } from "react-router-dom"
 
 import { categoriesQueryKeys } from "../../../hooks/api/categories"
@@ -14,8 +13,5 @@ export const categoryLoader = async ({ params }: LoaderFunctionArgs) => {
   const id = params.id
   const query = categoryDetailQuery(id!)
 
-  return (
+  return queryClient.ensureQueryData(query)
-    queryClient.getQueryData<AdminProductCategoryResponse>(query.queryKey) ??
-    (await queryClient.fetchQuery(query))
-  )
 }

packages/admin/dashboard/src/routes/collections/collection-detail/breadcrumb.tsx

@@ -0,0 +1,23 @@
+import { HttpTypes } from "@medusajs/types"
+import { UIMatch } from "react-router-dom"
+import { useCollection } from "../../../hooks/api"
+
+type CollectionDetailBreadcrumbProps =
+  UIMatch<HttpTypes.AdminCollectionResponse>
+
+export const CollectionDetailBreadcrumb = (
+  props: CollectionDetailBreadcrumbProps
+) => {
+  const { id } = props.params || {}
+
+  const { collection } = useCollection(id!, {
+    initialData: props.data,
+    enabled: Boolean(id),
+  })
+
+  if (!collection) {
+    return null
+  }
+
+  return <span>{collection.title}</span>
+}

packages/admin/dashboard/src/routes/collections/collection-detail/index.ts

@@ -1,2 +1,3 @@
+export { CollectionDetailBreadcrumb as Breadcrumb } from "./breadcrumb"
 export { CollectionDetail as Component } from "./collection-detail"
 export { collectionLoader as loader } from "./loader"

packages/admin/dashboard/src/routes/collections/collection-detail/loader.ts

@@ -1,4 +1,3 @@
-import { HttpTypes } from "@medusajs/types"
 import { LoaderFunctionArgs } from "react-router-dom"
 
 import { collectionsQueryKeys } from "../../../hooks/api/collections"
@@ -14,9 +13,5 @@ export const collectionLoader = async ({ params }: LoaderFunctionArgs) => {
   const id = params.id
   const query = collectionDetailQuery(id!)
 
-  return (
+  return queryClient.ensureQueryData(query)
-    queryClient.getQueryData<{ collection: HttpTypes.AdminCollection }>(
-      query.queryKey
-    ) ?? (await queryClient.fetchQuery(query))
-  )
 }

packages/admin/dashboard/src/routes/customer-groups/customer-group-detail/breadcrumb.tsx

@@ -0,0 +1,31 @@
+import { HttpTypes } from "@medusajs/types"
+import { UIMatch } from "react-router-dom"
+
+import { useCustomerGroup } from "../../../hooks/api"
+import { CUSTOMER_GROUP_DETAIL_FIELDS } from "./constants"
+
+type CustomerGroupDetailBreadcrumbProps =
+  UIMatch<HttpTypes.AdminCustomerGroupResponse>
+
+export const CustomerGroupDetailBreadcrumb = (
+  props: CustomerGroupDetailBreadcrumbProps
+) => {
+  const { id } = props.params || {}
+
+  const { customer_group } = useCustomerGroup(
+    id!,
+    {
+      fields: CUSTOMER_GROUP_DETAIL_FIELDS,
+    },
+    {
+      initialData: props.data,
+      enabled: Boolean(id),
+    }
+  )
+
+  if (!customer_group) {
+    return null
+  }
+
+  return <span>{customer_group.name}</span>
+}

packages/admin/dashboard/src/routes/customer-groups/customer-group-detail/constants.ts

@@ -0,0 +1 @@
+export const CUSTOMER_GROUP_DETAIL_FIELDS = "+customers.id"

packages/admin/dashboard/src/routes/customer-groups/customer-group-detail/customer-group-detail.tsx

@@ -8,6 +8,7 @@ import { customerGroupLoader } from "./loader"
 
 import { SingleColumnPageSkeleton } from "../../../components/common/skeleton"
 import { useDashboardExtension } from "../../../extensions"
+import { CUSTOMER_GROUP_DETAIL_FIELDS } from "./constants"
 
 export const CustomerGroupDetail = () => {
   const initialData = useLoaderData() as Awaited<
@@ -18,7 +19,7 @@ export const CustomerGroupDetail = () => {
   const { customer_group, isLoading, isError, error } = useCustomerGroup(
     id!,
     {
-      fields: "+customers.id",
+      fields: CUSTOMER_GROUP_DETAIL_FIELDS,
     },
     { initialData }
   )

packages/admin/dashboard/src/routes/customer-groups/customer-group-detail/index.ts

@@ -1,2 +1,3 @@
+export { CustomerGroupDetailBreadcrumb as Breadcrumb } from "./breadcrumb"
 export { CustomerGroupDetail as Component } from "./customer-group-detail"
 export { customerGroupLoader as loader } from "./loader"

packages/admin/dashboard/src/routes/customer-groups/customer-group-detail/loader.ts

@@ -1,14 +1,14 @@
-import { HttpTypes } from "@medusajs/types"
 import { LoaderFunctionArgs } from "react-router-dom"
 import { productsQueryKeys } from "../../../hooks/api/products"
 import { sdk } from "../../../lib/client"
 import { queryClient } from "../../../lib/query-client"
+import { CUSTOMER_GROUP_DETAIL_FIELDS } from "./constants"
 
 const customerGroupDetailQuery = (id: string) => ({
   queryKey: productsQueryKeys.detail(id),
   queryFn: async () =>
     sdk.admin.customerGroup.retrieve(id, {
-      fields: "+customers.id",
+      fields: CUSTOMER_GROUP_DETAIL_FIELDS,
     }),
 })
 
@@ -16,9 +16,5 @@ export const customerGroupLoader = async ({ params }: LoaderFunctionArgs) => {
   const id = params.id
   const query = customerGroupDetailQuery(id!)
 
-  return (
+  return queryClient.ensureQueryData(query)
-    queryClient.getQueryData<{
-      customer_group: HttpTypes.AdminCustomerGroup
-    }>(query.queryKey) ?? (await queryClient.fetchQuery(query))
-  )
 }

packages/admin/dashboard/src/routes/customers/customer-detail/breadcrumb.tsx

@@ -0,0 +1,29 @@
+import { HttpTypes } from "@medusajs/types"
+import { UIMatch } from "react-router-dom"
+
+import { useCustomer } from "../../../hooks/api"
+
+type CustomerDetailBreadcrumbProps = UIMatch<HttpTypes.AdminCustomerResponse>
+
+export const CustomerDetailBreadcrumb = (
+  props: CustomerDetailBreadcrumbProps
+) => {
+  const { id } = props.params || {}
+
+  const { customer } = useCustomer(id!, undefined, {
+    initialData: props.data,
+    enabled: Boolean(id),
+  })
+
+  if (!customer) {
+    return null
+  }
+
+  const name = [customer.first_name, customer.last_name]
+    .filter(Boolean)
+    .join(" ")
+
+  const display = name || customer.email
+
+  return <span>{display}</span>
+}

packages/admin/dashboard/src/routes/customers/customer-detail/index.ts

@@ -1,2 +1,3 @@
+export { CustomerDetailBreadcrumb as Breadcrumb } from "./breadcrumb"
 export { CustomerDetail as Component } from "./customer-detail"
 export { customerLoader as loader } from "./loader"

packages/admin/dashboard/src/routes/customers/customer-detail/loader.ts

@@ -2,7 +2,6 @@ import { LoaderFunctionArgs } from "react-router-dom"
 import { productsQueryKeys } from "../../../hooks/api/products"
 import { sdk } from "../../../lib/client"
 import { queryClient } from "../../../lib/query-client"
-import { HttpTypes } from "@medusajs/types"
 
 const customerDetailQuery = (id: string) => ({
   queryKey: productsQueryKeys.detail(id),
@@ -13,9 +12,5 @@ export const customerLoader = async ({ params }: LoaderFunctionArgs) => {
   const id = params.id
   const query = customerDetailQuery(id!)
 
-  return (
+  return queryClient.ensureQueryData(query)
-    queryClient.getQueryData<{ customer: HttpTypes.AdminCustomer }>(
-      query.queryKey
-    ) ?? (await queryClient.fetchQuery(query))
-  )
 }

packages/admin/dashboard/src/routes/inventory/inventory-detail/breadcrumb.tsx

@@ -0,0 +1,31 @@
+import { HttpTypes } from "@medusajs/types"
+import { UIMatch } from "react-router-dom"
+
+import { useInventoryItem } from "../../../hooks/api"
+import { INVENTORY_DETAIL_FIELDS } from "./constants"
+
+type InventoryDetailBreadcrumbProps =
+  UIMatch<HttpTypes.AdminInventoryItemResponse>
+
+export const InventoryDetailBreadcrumb = (
+  props: InventoryDetailBreadcrumbProps
+) => {
+  const { id } = props.params || {}
+
+  const { inventory_item } = useInventoryItem(
+    id!,
+    {
+      fields: INVENTORY_DETAIL_FIELDS,
+    },
+    {
+      initialData: props.data,
+      enabled: Boolean(id),
+    }
+  )
+
+  if (!inventory_item) {
+    return null
+  }
+
+  return <span>{inventory_item.title ?? inventory_item.sku ?? id}</span>
+}

packages/admin/dashboard/src/routes/inventory/inventory-detail/constants.ts

@@ -0,0 +1,2 @@
+export const INVENTORY_DETAIL_FIELDS =
+  "*variants,*variants.product,*variants.options"

packages/admin/dashboard/src/routes/inventory/inventory-detail/index.ts

@@ -1,2 +1,3 @@
+export { InventoryDetailBreadcrumb as Breadcrumb } from "./breadcrumb"
 export { InventoryDetail as Component } from "./inventory-detail"
 export { inventoryItemLoader as loader } from "./loader"

packages/admin/dashboard/src/routes/inventory/inventory-detail/inventory-detail.tsx

@@ -11,6 +11,7 @@ import { InventoryItemVariantsSection } from "./components/inventory-item-varian
 import { inventoryItemLoader } from "./loader"
 
 import { useDashboardExtension } from "../../../extensions"
+import { INVENTORY_DETAIL_FIELDS } from "./constants"
 
 export const InventoryDetail = () => {
   const { id } = useParams()
@@ -27,7 +28,7 @@ export const InventoryDetail = () => {
   } = useInventoryItem(
     id!,
     {
-      fields: "*variants,*variants.product,*variants.options",
+      fields: INVENTORY_DETAIL_FIELDS,
     },
     {
       initialData,

packages/admin/dashboard/src/routes/inventory/inventory-detail/loader.ts

@@ -1,15 +1,15 @@
 import { LoaderFunctionArgs } from "react-router-dom"
-import { HttpTypes } from "@medusajs/types"
 
 import { inventoryItemsQueryKeys } from "../../../hooks/api/inventory"
 import { sdk } from "../../../lib/client"
 import { queryClient } from "../../../lib/query-client"
+import { INVENTORY_DETAIL_FIELDS } from "./constants"
 
 const inventoryDetailQuery = (id: string) => ({
   queryKey: inventoryItemsQueryKeys.detail(id),
   queryFn: async () =>
     sdk.admin.inventoryItem.retrieve(id, {
-      fields: "*variants,*variants.product,*variants.options",
+      fields: INVENTORY_DETAIL_FIELDS,
     }),
 })
 
@@ -17,9 +17,5 @@ export const inventoryItemLoader = async ({ params }: LoaderFunctionArgs) => {
   const id = params.id
   const query = inventoryDetailQuery(id!)
 
-  return (
+  return queryClient.ensureQueryData(query)
-    queryClient.getQueryData<HttpTypes.AdminInventoryItemResponse>(
-      query.queryKey
-    ) ?? (await queryClient.fetchQuery(query))
-  )
 }

packages/admin/dashboard/src/routes/locations/location-detail/breadcrumb.tsx

@@ -0,0 +1,31 @@
+import { HttpTypes } from "@medusajs/types"
+import { UIMatch } from "react-router-dom"
+
+import { useStockLocation } from "../../../hooks/api/stock-locations"
+import { LOCATION_DETAILS_FIELD } from "./constants"
+
+type LocationDetailBreadcrumbProps =
+  UIMatch<HttpTypes.AdminStockLocationResponse>
+
+export const LocationDetailBreadcrumb = (
+  props: LocationDetailBreadcrumbProps
+) => {
+  const { location_id } = props.params || {}
+
+  const { stock_location } = useStockLocation(
+    location_id!,
+    {
+      fields: LOCATION_DETAILS_FIELD,
+    },
+    {
+      initialData: props.data,
+      enabled: Boolean(location_id),
+    }
+  )
+
+  if (!stock_location) {
+    return null
+  }
+
+  return <span>{stock_location.name}</span>
+}

packages/admin/dashboard/src/routes/locations/location-detail/constants.ts

@@ -1,2 +1,2 @@
-export const detailsFields =
+export const LOCATION_DETAILS_FIELD =
   "name,*sales_channels,*address,fulfillment_sets.type,fulfillment_sets.name,*fulfillment_sets.service_zones.geo_zones,*fulfillment_sets.service_zones,*fulfillment_sets.service_zones.shipping_options,*fulfillment_sets.service_zones.shipping_options.rules,*fulfillment_sets.service_zones.shipping_options.shipping_profile,*fulfillment_providers"

packages/admin/dashboard/src/routes/locations/location-detail/index.ts

@@ -1,2 +1,3 @@
+export { LocationDetailBreadcrumb as Breadcrumb } from "./breadcrumb"
 export { locationLoader as loader } from "./loader"
 export { LocationDetail as Component } from "./location-detail"

packages/admin/dashboard/src/routes/locations/location-detail/loader.ts

@@ -1,38 +1,23 @@
-import { HttpTypes } from "@medusajs/types"
+import { LoaderFunctionArgs } from "react-router-dom"
-import { LoaderFunctionArgs, redirect } from "react-router-dom"
 
-import { FetchError } from "@medusajs/js-sdk"
 import { stockLocationsQueryKeys } from "../../../hooks/api/stock-locations"
 import { sdk } from "../../../lib/client"
 import { queryClient } from "../../../lib/query-client"
-import { detailsFields } from "./const"
+import { LOCATION_DETAILS_FIELD } from "./constants"
 
 const locationQuery = (id: string) => ({
   queryKey: stockLocationsQueryKeys.detail(id, {
-    fields: detailsFields,
+    fields: LOCATION_DETAILS_FIELD,
   }),
-  queryFn: async () => {
+  queryFn: async () =>
-    return await sdk.admin.stockLocation
+    sdk.admin.stockLocation.retrieve(id, {
-      .retrieve(id, {
+      fields: LOCATION_DETAILS_FIELD,
-        fields: detailsFields,
+    }),
-      })
-      .catch((error: FetchError) => {
-        if (error.status === 401) {
-          throw redirect("/login")
-        }
-
-        throw error
-      })
-  },
 })
 
 export const locationLoader = async ({ params }: LoaderFunctionArgs) => {
   const id = params.location_id
   const query = locationQuery(id!)
 
-  return (
+  return queryClient.ensureQueryData(query)
-    queryClient.getQueryData<{ stock_location: HttpTypes.AdminStockLocation }>(
-      query.queryKey
-    ) ?? (await queryClient.fetchQuery(query))
-  )
 }

packages/admin/dashboard/src/routes/locations/location-detail/location-detail.tsx

@@ -9,7 +9,7 @@ import { TwoColumnPageSkeleton } from "../../../components/common/skeleton"
 import { TwoColumnPage } from "../../../components/layout/pages"
 import { useDashboardExtension } from "../../../extensions"
 import LocationsFulfillmentProvidersSection from "./components/location-fulfillment-providers-section/location-fulfillment-providers-section"
-import { detailsFields } from "./const"
+import { LOCATION_DETAILS_FIELD } from "./constants"
 
 export const LocationDetail = () => {
   const initialData = useLoaderData() as Awaited<
@@ -22,7 +22,11 @@ export const LocationDetail = () => {
     isPending: isLoading,
     isError,
     error,
-  } = useStockLocation(location_id!, { fields: detailsFields }, { initialData })
+  } = useStockLocation(
+    location_id!,
+    { fields: LOCATION_DETAILS_FIELD },
+    { initialData }
+  )
 
   const { getWidgets } = useDashboardExtension()
 

packages/admin/dashboard/src/routes/orders/order-detail/breadcrumb.tsx

@@ -0,0 +1,27 @@
+import { HttpTypes } from "@medusajs/types"
+import { UIMatch } from "react-router-dom"
+import { useOrder } from "../../../hooks/api"
+import { DEFAULT_FIELDS } from "./constants"
+
+type OrderDetailBreadcrumbProps = UIMatch<HttpTypes.AdminOrderResponse>
+
+export const OrderDetailBreadcrumb = (props: OrderDetailBreadcrumbProps) => {
+  const { id } = props.params || {}
+
+  const { order } = useOrder(
+    id!,
+    {
+      fields: DEFAULT_FIELDS,
+    },
+    {
+      initialData: props.data,
+      enabled: Boolean(id),
+    }
+  )
+
+  if (!order) {
+    return null
+  }
+
+  return <span>#{order.display_id}</span>
+}

packages/admin/dashboard/src/routes/orders/order-detail/index.ts

@@ -1,2 +1,3 @@
+export { OrderDetailBreadcrumb as Breadcrumb } from "./breadcrumb"
 export { orderLoader as loader } from "./loader"
 export { OrderDetail as Component } from "./order-detail"

packages/admin/dashboard/src/routes/orders/order-detail/loader.ts

@@ -1,6 +1,5 @@
 import { LoaderFunctionArgs } from "react-router-dom"
 
-import { HttpTypes } from "@medusajs/types"
 import { ordersQueryKeys } from "../../../hooks/api/orders"
 import { sdk } from "../../../lib/client"
 import { queryClient } from "../../../lib/query-client"
@@ -18,8 +17,5 @@ export const orderLoader = async ({ params }: LoaderFunctionArgs) => {
   const id = params.id
   const query = orderDetailQuery(id!)
 
-  return (
+  return queryClient.ensureQueryData(query)
-    queryClient.getQueryData<HttpTypes.AdminOrderResponse>(query.queryKey) ??
-    (await queryClient.fetchQuery(query))
-  )
 }

packages/admin/dashboard/src/routes/price-lists/price-list-detail/breadcrumb.tsx

@@ -0,0 +1,23 @@
+import { HttpTypes } from "@medusajs/types"
+import { UIMatch } from "react-router-dom"
+
+import { usePriceList } from "../../../hooks/api"
+
+type PriceListDetailBreadcrumbProps = UIMatch<HttpTypes.AdminPriceListResponse>
+
+export const PriceListDetailBreadcrumb = (
+  props: PriceListDetailBreadcrumbProps
+) => {
+  const { id } = props.params || {}
+
+  const { price_list } = usePriceList(id!, undefined, {
+    initialData: props.data,
+    enabled: Boolean(id),
+  })
+
+  if (!price_list) {
+    return null
+  }
+
+  return <span>{price_list.title}</span>
+}

packages/admin/dashboard/src/routes/price-lists/price-list-detail/index.ts

@@ -1,2 +1,3 @@
+export { PriceListDetailBreadcrumb as Breadcrumb } from "./breadcrumb"
 export { pricingLoader as loader } from "./loader"
 export { PriceListDetails as Component } from "./price-list-detail"

packages/admin/dashboard/src/routes/price-lists/price-list-detail/loader.ts

@@ -1,4 +1,3 @@
-import { HttpTypes } from "@medusajs/types"
 import { LoaderFunctionArgs } from "react-router-dom"
 import { priceListsQueryKeys } from "../../../hooks/api/price-lists"
 import { sdk } from "../../../lib/client"
@@ -13,9 +12,5 @@ export const pricingLoader = async ({ params }: LoaderFunctionArgs) => {
   const id = params.id
   const query = pricingDetailQuery(id!)
 
-  return (
+  return queryClient.ensureQueryData(query)
-    queryClient.getQueryData<HttpTypes.AdminPriceListResponse>(
-      query.queryKey
-    ) ?? (await queryClient.fetchQuery(query))
-  )
 }

packages/admin/dashboard/src/routes/product-tags/product-tag-detail/breadcrumb.tsx

@@ -0,0 +1,23 @@
+import { HttpTypes } from "@medusajs/types"
+import { UIMatch } from "react-router-dom"
+import { useProductTag } from "../../../hooks/api"
+
+type ProductTagDetailBreadcrumbProps =
+  UIMatch<HttpTypes.AdminProductTagResponse>
+
+export const ProductTagDetailBreadcrumb = (
+  props: ProductTagDetailBreadcrumbProps
+) => {
+  const { id } = props.params || {}
+
+  const { product_tag } = useProductTag(id!, undefined, {
+    initialData: props.data,
+    enabled: Boolean(id),
+  })
+
+  if (!product_tag) {
+    return null
+  }
+
+  return <span>{product_tag.value}</span>
+}

packages/admin/dashboard/src/routes/product-tags/product-tag-detail/index.ts

@@ -1,2 +1,3 @@
+export { ProductTagDetailBreadcrumb as Breadcrumb } from "./breadcrumb"
 export { productTagLoader as loader } from "./loader"
 export { ProductTagDetail as Component } from "./product-tag-detail"

packages/admin/dashboard/src/routes/product-tags/product-tag-detail/loader.ts

@@ -13,8 +13,5 @@ export const productTagLoader = async ({ params }: LoaderFunctionArgs) => {
   const id = params.id
   const query = productTagDetailQuery(id!)
 
-  return (
+  return queryClient.ensureQueryData(query)
-    queryClient.getQueryData<any>(query.queryKey) ??
-    (await queryClient.fetchQuery(query))
-  )
 }

packages/admin/dashboard/src/routes/product-types/product-type-detail/breadcrumb.tsx

@@ -0,0 +1,24 @@
+import { HttpTypes } from "@medusajs/types"
+import { UIMatch } from "react-router-dom"
+
+import { useProductType } from "../../../hooks/api"
+
+type ProductTypeDetailBreadcrumbProps =
+  UIMatch<HttpTypes.AdminProductTypeResponse>
+
+export const ProductTypeDetailBreadcrumb = (
+  props: ProductTypeDetailBreadcrumbProps
+) => {
+  const { id } = props.params || {}
+
+  const { product_type } = useProductType(id!, undefined, {
+    initialData: props.data,
+    enabled: Boolean(id),
+  })
+
+  if (!product_type) {
+    return null
+  }
+
+  return <span>{product_type.value}</span>
+}

packages/admin/dashboard/src/routes/product-types/product-type-detail/index.ts

@@ -1,2 +1,3 @@
+export { ProductTypeDetailBreadcrumb as Breadcrumb } from "./breadcrumb"
 export { productTypeLoader as loader } from "./loader"
 export { ProductTypeDetail as Component } from "./product-type-detail"

packages/admin/dashboard/src/routes/product-types/product-type-detail/loader.ts

@@ -1,6 +1,5 @@
 import { LoaderFunctionArgs } from "react-router-dom"
 
-import { HttpTypes } from "@medusajs/types"
 import { productTypesQueryKeys } from "../../../hooks/api/product-types"
 import { sdk } from "../../../lib/client"
 import { queryClient } from "../../../lib/query-client"
@@ -14,9 +13,5 @@ export const productTypeLoader = async ({ params }: LoaderFunctionArgs) => {
   const id = params.id
   const query = productTypeDetailQuery(id!)
 
-  return (
+  return queryClient.ensureQueryData(query)
-    queryClient.getQueryData<HttpTypes.AdminProductTypeResponse>(
-      query.queryKey
-    ) ?? (await queryClient.fetchQuery(query))
-  )
 }

packages/admin/dashboard/src/routes/product-variants/product-variant-detail/breadcrumb.tsx

@@ -0,0 +1,31 @@
+import { HttpTypes } from "@medusajs/types"
+import { UIMatch } from "react-router-dom"
+import { useProductVariant } from "../../../hooks/api"
+import { VARIANT_DETAIL_FIELDS } from "./constants"
+
+type ProductVariantDetailBreadcrumbProps =
+  UIMatch<HttpTypes.AdminProductVariantResponse>
+
+export const ProductVariantDetailBreadcrumb = (
+  props: ProductVariantDetailBreadcrumbProps
+) => {
+  const { id, variant_id } = props.params || {}
+
+  const { variant } = useProductVariant(
+    id!,
+    variant_id!,
+    {
+      fields: VARIANT_DETAIL_FIELDS,
+    },
+    {
+      initialData: props.data,
+      enabled: Boolean(id) && Boolean(variant_id),
+    }
+  )
+
+  if (!variant) {
+    return null
+  }
+
+  return <span>{variant.title}</span>
+}

packages/admin/dashboard/src/routes/product-variants/product-variant-detail/index.ts

@@ -1,2 +1,3 @@
+export { ProductVariantDetailBreadcrumb as Breadcrumb } from "./breadcrumb"
 export { variantLoader as loader } from "./loader"
 export { ProductVariantDetail as Component } from "./product-variant-detail"

packages/admin/dashboard/src/routes/product-variants/product-variant-detail/loader.ts

@@ -21,8 +21,5 @@ export const variantLoader = async ({ params }: LoaderFunctionArgs) => {
 
   const query = variantDetailQuery(productId!, variantId!)
 
-  return (
+  return queryClient.ensureQueryData(query)
-    queryClient.getQueryData<any>(query.queryKey) ??
-    (await queryClient.fetchQuery(query))
-  )
 }

packages/admin/dashboard/src/routes/products/product-detail/breadcrumb.tsx

@@ -0,0 +1,29 @@
+import { HttpTypes } from "@medusajs/types"
+import { UIMatch } from "react-router-dom"
+import { useProduct } from "../../../hooks/api"
+import { PRODUCT_DETAIL_FIELDS } from "./constants"
+
+type ProductDetailBreadcrumbProps = UIMatch<HttpTypes.AdminProductResponse>
+
+export const ProductDetailBreadcrumb = (
+  props: ProductDetailBreadcrumbProps
+) => {
+  const { id } = props.params || {}
+
+  const { product } = useProduct(
+    id!,
+    {
+      fields: PRODUCT_DETAIL_FIELDS,
+    },
+    {
+      initialData: props.data,
+      enabled: Boolean(id),
+    }
+  )
+
+  if (!product) {
+    return null
+  }
+
+  return <span>{product.title}</span>
+}

packages/admin/dashboard/src/routes/products/product-detail/index.ts

@@ -1,2 +1,3 @@
+export { ProductDetailBreadcrumb as Breadcrumb } from "./breadcrumb"
 export { productLoader as loader } from "./loader"
 export { ProductDetail as Component } from "./product-detail"

packages/admin/dashboard/src/routes/products/product-detail/loader.ts

@@ -6,7 +6,7 @@ import { queryClient } from "../../../lib/query-client"
 import { PRODUCT_DETAIL_FIELDS } from "./constants"
 
 const productDetailQuery = (id: string) => ({
-  queryKey: productsQueryKeys.detail(id),
+  queryKey: productsQueryKeys.detail(id, { fields: PRODUCT_DETAIL_FIELDS }),
   queryFn: async () =>
     sdk.admin.product.retrieve(id, { fields: PRODUCT_DETAIL_FIELDS }),
 })
@@ -15,8 +15,10 @@ export const productLoader = async ({ params }: LoaderFunctionArgs) => {
   const id = params.id
   const query = productDetailQuery(id!)
 
-  return (
+  const response = await queryClient.ensureQueryData({
-    queryClient.getQueryData<any>(query.queryKey) ??
+    ...query,
-    (await queryClient.fetchQuery(query))
+    staleTime: 90000,
-  )
+  })
+
+  return response
 }

packages/admin/dashboard/src/routes/promotions/promotion-detail/breadcrumb.tsx

@@ -0,0 +1,22 @@
+import { HttpTypes } from "@medusajs/types"
+import { UIMatch } from "react-router-dom"
+import { usePromotion } from "../../../hooks/api"
+
+type PromotionDetailBreadcrumbProps = UIMatch<HttpTypes.AdminPromotionResponse>
+
+export const PromotionDetailBreadcrumb = (
+  props: PromotionDetailBreadcrumbProps
+) => {
+  const { id } = props.params || {}
+
+  const { promotion } = usePromotion(id!, {
+    initialData: props.data,
+    enabled: Boolean(id),
+  })
+
+  if (!promotion) {
+    return null
+  }
+
+  return <span>{promotion.code}</span>
+}

packages/admin/dashboard/src/routes/promotions/promotion-detail/index.ts

@@ -1,2 +1,3 @@
+export { PromotionDetailBreadcrumb as Breadcrumb } from "./breadcrumb"
 export { promotionLoader as loader } from "./loader.ts"
 export { PromotionDetail as Component } from "./promotion-detail.tsx"

packages/admin/dashboard/src/routes/promotions/promotion-detail/loader.ts

@@ -1,4 +1,3 @@
-import { HttpTypes } from "@medusajs/types"
 import { LoaderFunctionArgs } from "react-router-dom"
 import { promotionsQueryKeys } from "../../../hooks/api/promotions"
 import { sdk } from "../../../lib/client"
@@ -13,9 +12,5 @@ export const promotionLoader = async ({ params }: LoaderFunctionArgs) => {
   const id = params.id
   const query = promotionDetailQuery(id!)
 
-  return (
+  return queryClient.ensureQueryData(query)
-    queryClient.getQueryData<HttpTypes.AdminPromotionResponse>(
-      query.queryKey
-    ) ?? (await queryClient.fetchQuery(query))
-  )
 }

packages/admin/dashboard/src/routes/regions/region-detail/breadcrumb.tsx

@@ -0,0 +1,27 @@
+import { HttpTypes } from "@medusajs/types"
+import { UIMatch } from "react-router-dom"
+import { useRegion } from "../../../hooks/api/regions"
+import { REGION_DETAIL_FIELDS } from "./constants"
+
+type RegionDetailBreadcrumbProps = UIMatch<HttpTypes.AdminRegionResponse>
+
+export const RegionDetailBreadcrumb = (props: RegionDetailBreadcrumbProps) => {
+  const { id } = props.params || {}
+
+  const { region } = useRegion(
+    id!,
+    {
+      fields: REGION_DETAIL_FIELDS,
+    },
+    {
+      initialData: props.data,
+      enabled: Boolean(id),
+    }
+  )
+
+  if (!region) {
+    return null
+  }
+
+  return <span>{region.name}</span>
+}

packages/admin/dashboard/src/routes/regions/region-detail/constants.ts

@@ -0,0 +1,2 @@
+export const REGION_DETAIL_FIELDS =
+  "*payment_providers,*countries,+automatic_taxes"

packages/admin/dashboard/src/routes/regions/region-detail/index.ts

@@ -1,2 +1,3 @@
+export { RegionDetailBreadcrumb as Breadcrumb } from "./breadcrumb"
 export { regionLoader as loader } from "./loader"
 export { RegionDetail as Component } from "./region-detail"

packages/admin/dashboard/src/routes/regions/region-detail/loader.ts

@@ -3,12 +3,13 @@ import { LoaderFunctionArgs } from "react-router-dom"
 import { regionsQueryKeys } from "../../../hooks/api/regions"
 import { sdk } from "../../../lib/client"
 import { queryClient } from "../../../lib/query-client"
+import { REGION_DETAIL_FIELDS } from "./constants"
 
 const regionQuery = (id: string) => ({
   queryKey: regionsQueryKeys.detail(id),
   queryFn: async () =>
     sdk.admin.region.retrieve(id, {
-      fields: "*payment_providers,*countries,+automatic_taxes",
+      fields: REGION_DETAIL_FIELDS,
     }),
 })
 

packages/admin/dashboard/src/routes/regions/region-detail/region-detail.tsx

@@ -9,6 +9,7 @@ import { SingleColumnPageSkeleton } from "../../../components/common/skeleton"
 import { SingleColumnPage } from "../../../components/layout/pages"
 import { useDashboardExtension } from "../../../extensions"
 import { usePricePreferences } from "../../../hooks/api/price-preferences"
+import { REGION_DETAIL_FIELDS } from "./constants"
 
 export const RegionDetail = () => {
   const initialData = useLoaderData() as Awaited<
@@ -23,7 +24,7 @@ export const RegionDetail = () => {
     error: regionError,
   } = useRegion(
     id!,
-    { fields: "*payment_providers,*countries,+automatic_taxes" },
+    { fields: REGION_DETAIL_FIELDS },
     {
       initialData,
     }

packages/admin/dashboard/src/routes/reservations/reservation-detail/breadcrumb.tsx

@@ -0,0 +1,29 @@
+import { HttpTypes } from "@medusajs/types"
+import { UIMatch } from "react-router-dom"
+
+import { useReservationItem } from "../../../hooks/api"
+
+type ReservationDetailBreadcrumbProps =
+  UIMatch<HttpTypes.AdminReservationResponse>
+
+export const ReservationDetailBreadcrumb = (
+  props: ReservationDetailBreadcrumbProps
+) => {
+  const { id } = props.params || {}
+
+  const { reservation } = useReservationItem(id!, undefined, {
+    initialData: props.data,
+    enabled: Boolean(id),
+  })
+
+  if (!reservation) {
+    return null
+  }
+
+  const display =
+    reservation?.inventory_item?.title ??
+    reservation?.inventory_item?.sku ??
+    reservation.id
+
+  return <span>{display}</span>
+}

packages/admin/dashboard/src/routes/reservations/reservation-detail/index.ts

@@ -1,2 +1,3 @@
+export { ReservationDetailBreadcrumb as Breadcrumb } from "./breadcrumb"
 export { reservationItemLoader as loader } from "./loader"
 export { ReservationDetail as Component } from "./reservation-detail"

packages/admin/dashboard/src/routes/reservations/reservation-detail/loader.ts

@@ -1,4 +1,3 @@
-import { HttpTypes } from "@medusajs/types"
 import { LoaderFunctionArgs } from "react-router-dom"
 import { reservationItemsQueryKeys } from "../../../hooks/api/reservations"
 import { sdk } from "../../../lib/client"
@@ -13,9 +12,5 @@ export const reservationItemLoader = async ({ params }: LoaderFunctionArgs) => {
   const id = params.id
   const query = reservationDetailQuery(id!)
 
-  return (
+  return queryClient.ensureQueryData(query)
-    queryClient.getQueryData<HttpTypes.AdminReservationResponse>(
-      query.queryKey
-    ) ?? (await queryClient.fetchQuery(query))
-  )
 }

packages/admin/dashboard/src/routes/sales-channels/sales-channel-detail/breadcrumb.tsx

@@ -0,0 +1,23 @@
+import { HttpTypes } from "@medusajs/types"
+import { UIMatch } from "react-router-dom"
+import { useSalesChannel } from "../../../hooks/api/sales-channels"
+
+type SalesChannelDetailBreadcrumbProps =
+  UIMatch<HttpTypes.AdminSalesChannelResponse>
+
+export const SalesChannelDetailBreadcrumb = (
+  props: SalesChannelDetailBreadcrumbProps
+) => {
+  const { id } = props.params || {}
+
+  const { sales_channel } = useSalesChannel(id!, {
+    initialData: props.data,
+    enabled: Boolean(id),
+  })
+
+  if (!sales_channel) {
+    return null
+  }
+
+  return <span>{sales_channel.name}</span>
+}

packages/admin/dashboard/src/routes/sales-channels/sales-channel-detail/index.ts

@@ -1,2 +1,3 @@
+export { SalesChannelDetailBreadcrumb as Breadcrumb } from "./breadcrumb"
 export { salesChannelLoader as loader } from "./loader"
 export { SalesChannelDetail as Component } from "./sales-channel-detail"

packages/admin/dashboard/src/routes/sales-channels/sales-channel-detail/loader.ts

@@ -1,6 +1,5 @@
 import { LoaderFunctionArgs } from "react-router-dom"
 
-import { AdminSalesChannelResponse } from "@medusajs/types"
 import { productsQueryKeys } from "../../../hooks/api/products"
 import { sdk } from "../../../lib/client"
 import { queryClient } from "../../../lib/query-client"
@@ -14,8 +13,5 @@ export const salesChannelLoader = async ({ params }: LoaderFunctionArgs) => {
   const id = params.id
   const query = salesChannelDetailQuery(id!)
 
-  return (
+  return queryClient.ensureQueryData(query)
-    queryClient.getQueryData<AdminSalesChannelResponse>(query.queryKey) ??
-    (await queryClient.fetchQuery(query))
-  )
 }

packages/admin/dashboard/src/routes/shipping-profiles/shipping-profile-detail/breadcrumb.tsx

@@ -0,0 +1,27 @@
+import { HttpTypes } from "@medusajs/types"
+import { UIMatch } from "react-router-dom"
+import { useShippingProfile } from "../../../hooks/api/shipping-profiles"
+
+type ShippingProfileDetailBreadcrumbProps =
+  UIMatch<HttpTypes.AdminShippingProfileResponse>
+
+export const ShippingProfileDetailBreadcrumb = (
+  props: ShippingProfileDetailBreadcrumbProps
+) => {
+  const { shipping_profile_id } = props.params || {}
+
+  const { shipping_profile } = useShippingProfile(
+    shipping_profile_id!,
+    undefined,
+    {
+      initialData: props.data,
+      enabled: Boolean(shipping_profile_id),
+    }
+  )
+
+  if (!shipping_profile) {
+    return null
+  }
+
+  return <span>{shipping_profile.name}</span>
+}

packages/admin/dashboard/src/routes/shipping-profiles/shipping-profile-detail/index.ts

@@ -1,2 +1,3 @@
+export { ShippingProfileDetailBreadcrumb as Breadcrumb } from "./breadcrumb"
 export { shippingProfileLoader as loader } from "./loader"
 export { ShippingProfileDetail as Component } from "./shipping-profile-detail"

packages/admin/dashboard/src/routes/shipping-profiles/shipping-profile-detail/loader.ts

@@ -1,9 +1,8 @@
-import { HttpTypes } from "@medusajs/types"
 import { LoaderFunctionArgs } from "react-router-dom"
 
+import { shippingProfileQueryKeys } from "../../../hooks/api/shipping-profiles"
 import { sdk } from "../../../lib/client"
 import { queryClient } from "../../../lib/query-client"
-import { shippingProfileQueryKeys } from "../../../hooks/api/shipping-profiles"
 
 const shippingProfileQuery = (id: string) => ({
   queryKey: shippingProfileQueryKeys.detail(id),
@@ -11,12 +10,8 @@ const shippingProfileQuery = (id: string) => ({
 })
 
 export const shippingProfileLoader = async ({ params }: LoaderFunctionArgs) => {
-  const id = params.id
+  const id = params.shipping_profile_id
   const query = shippingProfileQuery(id!)
 
-  return (
+  return queryClient.ensureQueryData(query)
-    queryClient.getQueryData<{
-      shipping_profile: HttpTypes.AdminShippingProfile
-    }>(query.queryKey) ?? (await queryClient.fetchQuery(query))
-  )
 }

packages/admin/dashboard/src/routes/shipping-profiles/shipping-profile-detail/shipping-profile-detail.tsx

@@ -1,4 +1,4 @@
-import { useParams } from "react-router-dom"
+import { useLoaderData, useParams } from "react-router-dom"
 
 import { SingleColumnPageSkeleton } from "../../../components/common/skeleton"
 import { useShippingProfile } from "../../../hooks/api/shipping-profiles"
@@ -6,12 +6,19 @@ import { ShippingProfileGeneralSection } from "./components/shipping-profile-gen
 
 import { SingleColumnPage } from "../../../components/layout/pages"
 import { useDashboardExtension } from "../../../extensions"
+import { shippingProfileLoader } from "./loader"
 
 export const ShippingProfileDetail = () => {
-  const { id } = useParams()
+  const { shipping_profile_id } = useParams()
+
+  const initialData = useLoaderData() as Awaited<
+    ReturnType<typeof shippingProfileLoader>
+  >
 
   const { shipping_profile, isLoading, isError, error } = useShippingProfile(
-    id!
+    shipping_profile_id!,
+    undefined,
+    { initialData }
   )
 
   const { getWidgets } = useDashboardExtension()

packages/admin/dashboard/src/routes/tax-regions/tax-region-detail/breadcrumb.tsx

@@ -0,0 +1,29 @@
+import { HttpTypes } from "@medusajs/types"
+import { UIMatch } from "react-router-dom"
+
+import { useTaxRegion } from "../../../hooks/api"
+import { getCountryByIso2 } from "../../../lib/data/countries"
+
+type TaxRegionDetailBreadcrumbProps = UIMatch<HttpTypes.AdminTaxRegionResponse>
+
+export const TaxRegionDetailBreadcrumb = (
+  props: TaxRegionDetailBreadcrumbProps
+) => {
+  const { id } = props.params || {}
+
+  const { tax_region } = useTaxRegion(id!, undefined, {
+    initialData: props.data,
+    enabled: Boolean(id),
+  })
+
+  if (!tax_region) {
+    return null
+  }
+
+  return (
+    <span>
+      {getCountryByIso2(tax_region.country_code)?.display_name ||
+        tax_region.country_code?.toUpperCase()}
+    </span>
+  )
+}

packages/admin/dashboard/src/routes/tax-regions/tax-region-detail/index.ts

@@ -1,4 +1,5 @@
 export * from "./tax-region-detail"
 
+export { TaxRegionDetailBreadcrumb as Breadcrumb } from "./breadcrumb"
 export { taxRegionLoader as loader } from "./loader"
 export { TaxRegionDetail as Component } from "./tax-region-detail"

packages/admin/dashboard/src/routes/tax-regions/tax-region-detail/loader.ts

@@ -1,4 +1,3 @@
-import { AdminTaxRegionResponse } from "@medusajs/types"
 import { LoaderFunctionArgs } from "react-router-dom"
 import { taxRegionsQueryKeys } from "../../../hooks/api/tax-regions"
 import { sdk } from "../../../lib/client"
@@ -13,8 +12,5 @@ export const taxRegionLoader = async ({ params }: LoaderFunctionArgs) => {
   const id = params.id
   const query = taxRegionDetailQuery(id!)
 
-  return (
+  return queryClient.ensureQueryData(query)
-    queryClient.getQueryData<AdminTaxRegionResponse>(query.queryKey) ??
-    (await queryClient.fetchQuery(query))
-  )
 }

packages/admin/dashboard/src/routes/tax-regions/tax-region-province-detail/breadcrumb.tsx

@@ -0,0 +1,32 @@
+import { HttpTypes } from "@medusajs/types"
+import { UIMatch } from "react-router-dom"
+
+import { useTaxRegion } from "../../../hooks/api"
+import {
+  getProvinceByIso2,
+  isProvinceInCountry,
+} from "../../../lib/data/country-states"
+
+type TaxRegionDetailBreadcrumbProps = UIMatch<HttpTypes.AdminTaxRegionResponse>
+
+export const TaxRegionDetailBreadcrumb = (
+  props: TaxRegionDetailBreadcrumbProps
+) => {
+  const { province_id } = props.params || {}
+
+  const { tax_region } = useTaxRegion(province_id!, undefined, {
+    initialData: props.data,
+    enabled: Boolean(province_id),
+  })
+
+  if (!tax_region) {
+    return null
+  }
+
+  const countryCode = tax_region.country_code?.toUpperCase()
+  const provinceCode = tax_region.province_code?.toUpperCase()
+
+  const isValid = isProvinceInCountry(countryCode, provinceCode)
+
+  return <span>{isValid ? getProvinceByIso2(provinceCode) : provinceCode}</span>
+}

packages/admin/dashboard/src/routes/tax-regions/tax-region-province-detail/index.ts

@@ -1,4 +1,5 @@
 export * from "./tax-region-detail"
 
+export { TaxRegionDetailBreadcrumb as Breadcrumb } from "./breadcrumb"
 export { taxRegionLoader as loader } from "./loader"
 export { TaxRegionDetail as Component } from "./tax-region-detail"

packages/admin/dashboard/src/routes/tax-regions/tax-region-province-detail/loader.ts

@@ -1,4 +1,3 @@
-import { AdminTaxRegionResponse } from "@medusajs/types"
 import { LoaderFunctionArgs } from "react-router-dom"
 import { taxRegionsQueryKeys } from "../../../hooks/api/tax-regions"
 import { sdk } from "../../../lib/client"
@@ -13,8 +12,5 @@ export const taxRegionLoader = async ({ params }: LoaderFunctionArgs) => {
   const id = params.province_id
   const query = taxRegionDetailQuery(id!)
 
-  return (
+  return queryClient.ensureQueryData(query)
-    queryClient.getQueryData<AdminTaxRegionResponse>(query.queryKey) ??
-    (await queryClient.fetchQuery(query))
-  )
 }

packages/admin/dashboard/src/routes/users/user-detail/breadcrumb.tsx

@@ -0,0 +1,24 @@
+import { HttpTypes } from "@medusajs/types"
+import { UIMatch } from "react-router-dom"
+import { useUser } from "../../../hooks/api/users"
+
+type UserDetailBreadcrumbProps = UIMatch<HttpTypes.AdminUserResponse>
+
+export const UserDetailBreadcrumb = (props: UserDetailBreadcrumbProps) => {
+  const { id } = props.params || {}
+
+  const { user } = useUser(id!, undefined, {
+    initialData: props.data,
+    enabled: Boolean(id),
+  })
+
+  if (!user) {
+    return null
+  }
+
+  const name = [user.first_name, user.last_name].filter(Boolean).join(" ")
+
+  const display = name || user.email
+
+  return <span>{display}</span>
+}

packages/admin/dashboard/src/routes/users/user-detail/index.ts

@@ -1,2 +1,3 @@
+export { UserDetailBreadcrumb as Breadcrumb } from "./breadcrumb"
 export { userLoader as loader } from "./loader"
 export { UserDetail as Component } from "./user-detail"

packages/admin/dashboard/src/routes/users/user-detail/loader.ts

@@ -1,6 +1,5 @@
 import { LoaderFunctionArgs } from "react-router-dom"
 
-import { HttpTypes } from "@medusajs/types"
 import { productsQueryKeys } from "../../../hooks/api/products"
 import { sdk } from "../../../lib/client"
 import { queryClient } from "../../../lib/query-client"
@@ -14,8 +13,5 @@ export const userLoader = async ({ params }: LoaderFunctionArgs) => {
   const id = params.id
   const query = userDetailQuery(id!)
 
-  return (
+  return queryClient.ensureQueryData(query)
-    queryClient.getQueryData<HttpTypes.AdminUserResponse>(query.queryKey) ??
-    (await queryClient.fetchQuery(query))
-  )
 }

packages/admin/dashboard/src/routes/workflow-executions/workflow-execution-detail/breadcrumb.tsx

@@ -0,0 +1,26 @@
+import { HttpTypes } from "@medusajs/types"
+import { UIMatch } from "react-router-dom"
+
+import { useWorkflowExecution } from "../../../hooks/api"
+
+type WorkflowExecutionDetailBreadcrumbProps =
+  UIMatch<HttpTypes.AdminWorkflowExecutionResponse>
+
+export const WorkflowExecutionDetailBreadcrumb = (
+  props: WorkflowExecutionDetailBreadcrumbProps
+) => {
+  const { id } = props.params || {}
+
+  const { workflow_execution } = useWorkflowExecution(id!, {
+    initialData: props.data,
+    enabled: Boolean(id),
+  })
+
+  if (!workflow_execution) {
+    return null
+  }
+
+  const cleanId = workflow_execution.id.replace("wf_exec_", "")
+
+  return <span>{cleanId}</span>
+}

packages/admin/dashboard/src/routes/workflow-executions/workflow-execution-detail/index.ts

@@ -1 +1,3 @@
+export { WorkflowExecutionDetailBreadcrumb as Breadcrumb } from "./breadcrumb"
+export { workflowExecutionLoader as loader } from "./loader"
 export { ExecutionDetail as Component } from "./workflow-detail"

packages/admin/dashboard/src/routes/workflow-executions/workflow-execution-detail/loader.ts

@@ -1,6 +1,5 @@
 import { LoaderFunctionArgs } from "react-router-dom"
 
-import { HttpTypes } from "@medusajs/types"
 import { workflowExecutionsQueryKeys } from "../../../hooks/api/workflow-executions"
 import { sdk } from "../../../lib/client"
 import { queryClient } from "../../../lib/query-client"
@@ -10,13 +9,11 @@ const executionDetailQuery = (id: string) => ({
   queryFn: async () => sdk.admin.workflowExecution.retrieve(id),
 })
 
-export const executionLoader = async ({ params }: LoaderFunctionArgs) => {
+export const workflowExecutionLoader = async ({
+  params,
+}: LoaderFunctionArgs) => {
   const id = params.id
   const query = executionDetailQuery(id!)
 
-  return (
+  return queryClient.ensureQueryData(query)
-    queryClient.getQueryData<HttpTypes.AdminWorkflowExecutionResponse>(
-      query.queryKey
-    ) ?? (await queryClient.fetchQuery(query))
-  )
 }