From b1722ba53c9a0e56d0d0a50b1fc7fbec59d371d3 Mon Sep 17 00:00:00 2001
From: Stephen Zhou <38493346+hyoban@users.noreply.github.com>
Date: Thu, 12 Feb 2026 18:55:23 +0800
Subject: [PATCH] refactor: params

---
 .../components/plugins/marketplace/hydration-server.tsx  | 7 +++++--
 web/app/components/plugins/marketplace/index.tsx         | 9 ++++++---
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/web/app/components/plugins/marketplace/hydration-server.tsx b/web/app/components/plugins/marketplace/hydration-server.tsx
index 6b67e554c0..9875e4c093 100644
--- a/web/app/components/plugins/marketplace/hydration-server.tsx
+++ b/web/app/components/plugins/marketplace/hydration-server.tsx
@@ -1,14 +1,17 @@
 import type { SearchParams } from 'nuqs'
 import { HydrationBoundary } from '@tanstack/react-query'
 
-// The server side logic should move to marketplace's codebase so that we can get rid of Next.js
+export type Awaitable<T> = T | PromiseLike<T>
 
 export async function HydrateQueryClient({
+  // eslint-disable-next-line unused-imports/no-unused-vars
+  params,
   // eslint-disable-next-line unused-imports/no-unused-vars
   searchParams,
   children,
 }: {
-  searchParams: Promise<SearchParams> | undefined
+  params?: Awaitable<{ category?: string, creationType?: string, searchTab?: string } | undefined>
+  searchParams?: Awaitable<SearchParams>
   children: React.ReactNode
 }) {
   // TODO: bring back dehydrated state
diff --git a/web/app/components/plugins/marketplace/index.tsx b/web/app/components/plugins/marketplace/index.tsx
index 607f8d1ec1..4ddb6fcf3d 100644
--- a/web/app/components/plugins/marketplace/index.tsx
+++ b/web/app/components/plugins/marketplace/index.tsx
@@ -1,4 +1,5 @@
 import type { SearchParams } from 'nuqs'
+import type { Awaitable } from './hydration-server'
 import { TanstackQueryInitializer } from '@/context/query-client'
 import { cn } from '@/utils/classnames'
 import { HydrateQueryClient } from './hydration-server'
@@ -8,9 +9,10 @@ import MarketplaceHeader from './marketplace-header'
 type MarketplaceProps = {
   showInstallButton?: boolean
   /**
-   * Pass the search params from the request to prefetch data on the server.
+   * Pass the search params & params from the request to prefetch data on the server.
    */
-  searchParams?: Promise<SearchParams>
+  params?: Awaitable<{ category?: string, creationType?: string, searchTab?: string } | undefined>
+  searchParams?: Awaitable<SearchParams>
   /**
    * Whether the marketplace is the platform marketplace.
    */
@@ -20,13 +22,14 @@ type MarketplaceProps = {
 
 const Marketplace = async ({
   showInstallButton = true,
+  params,
   searchParams,
   isMarketplacePlatform = false,
   marketplaceNav,
 }: MarketplaceProps) => {
   return (
     <TanstackQueryInitializer>
-      <HydrateQueryClient searchParams={searchParams}>
+      <HydrateQueryClient searchParams={searchParams} params={params}>
         <MarketplaceHeader descriptionClassName={cn('mx-12 mt-1', isMarketplacePlatform && 'top-0 mx-0 mt-0 rounded-none')} marketplaceNav={marketplaceNav} />
         <MarketplaceContent
           showInstallButton={showInstallButton}