From 3e9af09ccb3a3a17edac3903d2f9e75002e1baec Mon Sep 17 00:00:00 2001 From: Shahed Nasser Date: Fri, 7 Nov 2025 12:03:12 +0200 Subject: [PATCH] docs: add missing middlewares in category images guide (#14001) --- www/apps/book/public/llms-full.txt | 72 +++++++++++++++++-- .../tutorials/category-images/page.mdx | 72 +++++++++++++++++-- www/apps/resources/generated/edit-dates.mjs | 2 +- 3 files changed, 135 insertions(+), 11 deletions(-) diff --git a/www/apps/book/public/llms-full.txt b/www/apps/book/public/llms-full.txt index dfaff66497..0a9e80b6be 100644 --- a/www/apps/book/public/llms-full.txt +++ b/www/apps/book/public/llms-full.txt @@ -64129,7 +64129,38 @@ You validate the request body using a Zod schema, then execute the `updateCatego Finally, you return the updated category images in the response. -### c. Add Update Mutation +### c. Add Validation Middleware + +To ensure the request body is validated using the Zod schema you created, you'll add a validation middleware to the new API route. + +In `src/api/middlewares.ts`, add the following import at the top of the file: + +```ts title="src/api/middlewares.ts" +import { + UpdateCategoryImagesSchema, +} from "./admin/categories/[category_id]/images/batch/route" +``` + +Then, add a new route object passed to the array in `defineMiddlewares`: + +```ts title="src/api/middlewares.ts" +export default defineMiddlewares({ + routes: [ + // ... + { + matcher: "/admin/categories/:category_id/images/batch", + method: ["POST"], + middlewares: [ + validateAndTransformBody(UpdateCategoryImagesSchema), + ], + }, + ], +}) +``` + +All `POST` requests to `/admin/categories/:category_id/images/batch` will now be validated using the `UpdateCategoryImagesSchema`. + +### d. Add Update Mutation Next, add a mutation to the `useCategoryImageMutations` hook for updating category images. @@ -64190,7 +64221,7 @@ return { } ``` -### d. Add Selection in Category Image Item +### e. Add Selection in Category Image Item Next, add the ability to select a category image in the `CategoryImageItem` component. You'll use this selection to choose which image to set as the thumbnail, and later to delete images. @@ -64200,7 +64231,7 @@ In `src/admin/components/category-media/category-image-item.tsx`, add the follow import { Checkbox, clx } from "@medusajs/ui" ``` -Then, update the `CategoryImageItemProps` type to include two new props: +Then update the `CategoryImageItemProps` type to include two new props: ```tsx title="src/admin/components/category-media/category-image-item.tsx" highlights={[["3"], ["4"]]} type CategoryImageItemProps = { @@ -64245,7 +64276,7 @@ You add a checkbox in the top-right corner of the image that indicates whether i When the checkbox state changes, it calls the `onToggleSelect` callback to update the selection state. -### e. Update Category Image Gallery +### f. Update Category Image Gallery Next, you'll update the `CategoryImageGallery` component to manage the selection state of category images. @@ -64315,7 +64346,7 @@ return ( You pass the `isSelected` prop to indicate whether the image is selected, and the `onToggleSelect` prop to handle selection changes. -### f. Update Category Media Modal +### g. Update Category Media Modal Lastly, you'll update the `CategoryMediaModal` component to manage the selection state and implement the update functionality. @@ -64712,6 +64743,37 @@ You validate the request body using a Zod schema, then execute the `deleteCatego Finally, you return the deleted category image IDs in the response. +### c. Add Validation Middleware + +To ensure the request body is validated using the Zod schema you created, you'll add a validation middleware to the new API route. + +In `src/api/middlewares.ts`, add the following import at the top of the file: + +```ts title="src/api/middlewares.ts" +import { + DeleteCategoryImagesSchema, +} from "./admin/categories/[category_id]/images/batch/route" +``` + +Then, add a new route object passed to the array in `defineMiddlewares`: + +```ts title="src/api/middlewares.ts" +export default defineMiddlewares({ + routes: [ + // ... + { + matcher: "/admin/categories/:category_id/images/batch", + method: ["DELETE"], + middlewares: [ + validateAndTransformBody(DeleteCategoryImagesSchema), + ], + }, + ], +}) +``` + +All `DELETE` requests to `/admin/categories/:category_id/images/batch` will now be validated using the `DeleteCategoryImagesSchema`. + ### c. Add Delete Mutation Next, you'll add a mutation to the `useCategoryImageMutations` hook to delete category images. diff --git a/www/apps/resources/app/how-to-tutorials/tutorials/category-images/page.mdx b/www/apps/resources/app/how-to-tutorials/tutorials/category-images/page.mdx index b246a20adc..7cc3ec3e8d 100644 --- a/www/apps/resources/app/how-to-tutorials/tutorials/category-images/page.mdx +++ b/www/apps/resources/app/how-to-tutorials/tutorials/category-images/page.mdx @@ -1725,7 +1725,38 @@ You validate the request body using a Zod schema, then execute the `updateCatego Finally, you return the updated category images in the response. -### c. Add Update Mutation +### c. Add Validation Middleware + +To ensure the request body is validated using the Zod schema you created, you'll add a validation middleware to the new API route. + +In `src/api/middlewares.ts`, add the following import at the top of the file: + +```ts title="src/api/middlewares.ts" +import { + UpdateCategoryImagesSchema, +} from "./admin/categories/[category_id]/images/batch/route" +``` + +Then, add a new route object passed to the array in `defineMiddlewares`: + +```ts title="src/api/middlewares.ts" +export default defineMiddlewares({ + routes: [ + // ... + { + matcher: "/admin/categories/:category_id/images/batch", + method: ["POST"], + middlewares: [ + validateAndTransformBody(UpdateCategoryImagesSchema), + ], + }, + ], +}) +``` + +All `POST` requests to `/admin/categories/:category_id/images/batch` will now be validated using the `UpdateCategoryImagesSchema`. + +### d. Add Update Mutation Next, add a mutation to the `useCategoryImageMutations` hook for updating category images. @@ -1786,7 +1817,7 @@ return { } ``` -### d. Add Selection in Category Image Item +### e. Add Selection in Category Image Item Next, add the ability to select a category image in the `CategoryImageItem` component. You'll use this selection to choose which image to set as the thumbnail, and later to delete images. @@ -1796,7 +1827,7 @@ In `src/admin/components/category-media/category-image-item.tsx`, add the follow import { Checkbox, clx } from "@medusajs/ui" ``` -Then, update the `CategoryImageItemProps` type to include two new props: +Then update the `CategoryImageItemProps` type to include two new props: ```tsx title="src/admin/components/category-media/category-image-item.tsx" highlights={[["3"], ["4"]]} type CategoryImageItemProps = { @@ -1841,7 +1872,7 @@ You add a checkbox in the top-right corner of the image that indicates whether i When the checkbox state changes, it calls the `onToggleSelect` callback to update the selection state. -### e. Update Category Image Gallery +### f. Update Category Image Gallery Next, you'll update the `CategoryImageGallery` component to manage the selection state of category images. @@ -1911,7 +1942,7 @@ return ( You pass the `isSelected` prop to indicate whether the image is selected, and the `onToggleSelect` prop to handle selection changes. -### f. Update Category Media Modal +### g. Update Category Media Modal Lastly, you'll update the `CategoryMediaModal` component to manage the selection state and implement the update functionality. @@ -2351,6 +2382,37 @@ You validate the request body using a Zod schema, then execute the `deleteCatego Finally, you return the deleted category image IDs in the response. +### c. Add Validation Middleware + +To ensure the request body is validated using the Zod schema you created, you'll add a validation middleware to the new API route. + +In `src/api/middlewares.ts`, add the following import at the top of the file: + +```ts title="src/api/middlewares.ts" +import { + DeleteCategoryImagesSchema, +} from "./admin/categories/[category_id]/images/batch/route" +``` + +Then, add a new route object passed to the array in `defineMiddlewares`: + +```ts title="src/api/middlewares.ts" +export default defineMiddlewares({ + routes: [ + // ... + { + matcher: "/admin/categories/:category_id/images/batch", + method: ["DELETE"], + middlewares: [ + validateAndTransformBody(DeleteCategoryImagesSchema), + ], + }, + ], +}) +``` + +All `DELETE` requests to `/admin/categories/:category_id/images/batch` will now be validated using the `DeleteCategoryImagesSchema`. + ### c. Add Delete Mutation Next, you'll add a mutation to the `useCategoryImageMutations` hook to delete category images. diff --git a/www/apps/resources/generated/edit-dates.mjs b/www/apps/resources/generated/edit-dates.mjs index 605a025e58..6cb9583827 100644 --- a/www/apps/resources/generated/edit-dates.mjs +++ b/www/apps/resources/generated/edit-dates.mjs @@ -6614,7 +6614,7 @@ export const generatedEditDates = { "app/data-model-repository-reference/methods/upsertWithReplace/page.mdx": "2025-10-28T16:02:30.479Z", "app/how-to-tutorials/tutorials/agentic-commerce/page.mdx": "2025-10-09T11:25:48.831Z", "app/storefront-development/production-optimizations/page.mdx": "2025-10-03T13:28:37.909Z", - "app/how-to-tutorials/tutorials/category-images/page.mdx": "2025-11-06T14:14:45.465Z", + "app/how-to-tutorials/tutorials/category-images/page.mdx": "2025-11-07T08:55:59.228Z", "app/infrastructure-modules/caching/page.mdx": "2025-10-13T11:46:36.452Z", "app/troubleshooting/subscribers/not-working/page.mdx": "2025-10-16T09:25:57.376Z", "references/js_sdk/admin/RefundReason/methods/js_sdk.admin.RefundReason.create/page.mdx": "2025-10-21T08:10:56.630Z",