@btst/stack 2.12.0 → 2.12.1

package/dist/packages/stack/src/plugins/cms/api/plugin.cjs

@@ -297,6 +297,13 @@ const cmsBackendPlugin = (config) => {
       }
     }),
     routes: (adapter) => {
+      const listContentQuerySchema = schemas.createListContentQuerySchema(
+        config.maxPageSize
+      );
+      const paginationQuerySchema = z.z.object({
+        limit: z.z.coerce.number().min(1).max(config.maxPageSize ?? schemas.DEFAULT_MAX_PAGE_SIZE).optional().default(20),
+        offset: z.z.coerce.number().min(0).optional().default(0)
+      });
       const getContentType = async (slug) => {
         await ensureSynced(adapter);
         return adapter.findOne({
@@ -319,7 +326,7 @@ const cmsBackendPlugin = (config) => {
           });
           const typesWithCounts = await Promise.all(
             contentTypes.map(async (ct) => {
-              const items = await adapter.findMany({
+              const itemCount = await adapter.count({
                 model: "contentItem",
                 where: [
                   {
@@ -331,7 +338,7 @@ const cmsBackendPlugin = (config) => {
               });
               return {
                 ...getters.serializeContentType(ct),
-                itemCount: items.length
+                itemCount
               };
             })
           );
@@ -358,7 +365,7 @@ const cmsBackendPlugin = (config) => {
         {
           method: "GET",
           params: z.z.object({ typeSlug: z.z.string() }),
-          query: schemas.listContentQuerySchema
+          query: listContentQuerySchema
         },
         async (ctx) => {
           const { typeSlug } = ctx.params;
@@ -663,10 +670,8 @@ const cmsBackendPlugin = (config) => {
           params: z.z.object({ typeSlug: z.z.string() }),
           query: z.z.object({
             field: z.z.string(),
-            targetId: z.z.string(),
-            limit: z.z.coerce.number().min(1).max(100).optional().default(20),
-            offset: z.z.coerce.number().min(0).optional().default(0)
-          })
+            targetId: z.z.string()
+          }).merge(paginationQuerySchema)
         },
         async (ctx) => {
           const { typeSlug } = ctx.params;
@@ -810,10 +815,8 @@ const cmsBackendPlugin = (config) => {
           }),
           query: z.z.object({
             itemId: z.z.string(),
-            fieldName: z.z.string(),
-            limit: z.z.coerce.number().min(1).max(100).optional().default(20),
-            offset: z.z.coerce.number().min(0).optional().default(0)
-          })
+            fieldName: z.z.string()
+          }).merge(paginationQuerySchema)
         },
         async (ctx) => {
           const { slug, sourceType } = ctx.params;

package/dist/packages/stack/src/plugins/cms/api/plugin.mjs

@@ -2,7 +2,7 @@ import { defineBackendPlugin, createEndpoint } from '@btst/stack/plugins/api';
 import { z } from 'zod';
 import { formSchemaToZod, zodToFormSchema } from '../../../../../ui/src/lib/schema-converter.mjs';
 import { cmsSchema } from '../db.mjs';
-import { listContentQuerySchema } from '../schemas.mjs';
+import { createListContentQuerySchema, DEFAULT_MAX_PAGE_SIZE } from '../schemas.mjs';
 import { slugify } from '../utils.mjs';
 import { serializeContentType, getAllContentItems, serializeContentItemWithType, serializeContentItem, getContentItemById, getContentItemBySlug, getAllContentTypes } from './getters.mjs';
 import { createCMSContentItem } from './mutations.mjs';
@@ -295,6 +295,13 @@ const cmsBackendPlugin = (config) => {
       }
     }),
     routes: (adapter) => {
+      const listContentQuerySchema = createListContentQuerySchema(
+        config.maxPageSize
+      );
+      const paginationQuerySchema = z.object({
+        limit: z.coerce.number().min(1).max(config.maxPageSize ?? DEFAULT_MAX_PAGE_SIZE).optional().default(20),
+        offset: z.coerce.number().min(0).optional().default(0)
+      });
       const getContentType = async (slug) => {
         await ensureSynced(adapter);
         return adapter.findOne({
@@ -317,7 +324,7 @@ const cmsBackendPlugin = (config) => {
           });
           const typesWithCounts = await Promise.all(
             contentTypes.map(async (ct) => {
-              const items = await adapter.findMany({
+              const itemCount = await adapter.count({
                 model: "contentItem",
                 where: [
                   {
@@ -329,7 +336,7 @@ const cmsBackendPlugin = (config) => {
               });
               return {
                 ...serializeContentType(ct),
-                itemCount: items.length
+                itemCount
               };
             })
           );
@@ -661,10 +668,8 @@ const cmsBackendPlugin = (config) => {
           params: z.object({ typeSlug: z.string() }),
           query: z.object({
             field: z.string(),
-            targetId: z.string(),
-            limit: z.coerce.number().min(1).max(100).optional().default(20),
-            offset: z.coerce.number().min(0).optional().default(0)
-          })
+            targetId: z.string()
+          }).merge(paginationQuerySchema)
         },
         async (ctx) => {
           const { typeSlug } = ctx.params;
@@ -808,10 +813,8 @@ const cmsBackendPlugin = (config) => {
           }),
           query: z.object({
             itemId: z.string(),
-            fieldName: z.string(),
-            limit: z.coerce.number().min(1).max(100).optional().default(20),
-            offset: z.coerce.number().min(0).optional().default(0)
-          })
+            fieldName: z.string()
+          }).merge(paginationQuerySchema)
         },
         async (ctx) => {
           const { slug, sourceType } = ctx.params;

package/dist/packages/stack/src/plugins/cms/client/components/forms/relation-field.cjs

@@ -3,6 +3,10 @@
 
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
+const reactQuery = require('@tanstack/react-query');
+const client = require('@btst/stack/plugins/client');
+const context = require('@btst/stack/context');
+const plugins_cms_queryKeys = require('../../../../../../../../plugins/cms/query-keys.cjs');
 const multiSelect = require('../../../../../../../ui/src/components/multi-select.cjs');
 const button = require('../../../../../../../ui/src/components/button.cjs');
 const LucideIcons = require('lucide-react');
@@ -12,6 +16,14 @@ const label = require('../../../../../../../ui/src/components/label.cjs');
 const textarea = require('../../../../../../../ui/src/components/textarea.cjs');
 const cmsHooks = require('../../hooks/cms-hooks.cjs');
 
+const RELATION_DETAIL_QUERY_OPTS = {
+  retry: false,
+  refetchOnWindowFocus: false,
+  refetchOnMount: false,
+  refetchOnReconnect: false,
+  staleTime: 1e3 * 60 * 5,
+  gcTime: 1e3 * 60 * 10
+};
 function RelationField({
   field,
   fieldConfigItem,
@@ -23,12 +35,19 @@ function RelationField({
   const [newItemName, setNewItemName] = React.useState("");
   const [newItemDescription, setNewItemDescription] = React.useState("");
   const [createError, setCreateError] = React.useState(null);
+  const { apiBaseURL, apiBasePath, headers } = context.usePluginOverrides("cms");
+  const listClient = React.useMemo(
+    () => client.createApiClient({
+      baseURL: apiBaseURL,
+      basePath: apiBasePath
+    }),
+    [apiBaseURL, apiBasePath]
+  );
+  const cmsQueries = React.useMemo(
+    () => plugins_cms_queryKeys.createCMSQueryKeys(listClient, headers),
+    [listClient, headers]
+  );
   const isSingleSelect = relation.type === "belongsTo";
-  const { items: availableItems, isLoading } = cmsHooks.useContent(relation.targetType, {
-    limit: 100
-    // Load a good chunk for the dropdown
-  });
-  const createMutation = cmsHooks.useCreateContent(relation.targetType);
   const normalizedValue = React.useMemo(() => {
     if (!field.value) return [];
     if (isSingleSelect) {
@@ -40,8 +59,42 @@ function RelationField({
     }
     return field.value || [];
   }, [field.value, isSingleSelect]);
+  const { items: availableItems, isLoading } = cmsHooks.useContent(relation.targetType, {
+    limit: 500
+  });
+  const missingDetailIds = React.useMemo(() => {
+    const loadedIds = new Set(availableItems.map((i) => i.id));
+    return normalizedValue.map((v) => v.id).filter((id) => id.length > 0 && !loadedIds.has(id));
+  }, [availableItems, normalizedValue]);
+  const hydrationResult = reactQuery.useQueries({
+    queries: missingDetailIds.map((id) => ({
+      ...cmsQueries.cmsContent.detail(relation.targetType, id),
+      ...RELATION_DETAIL_QUERY_OPTS,
+      enabled: Boolean(relation.targetType && id)
+    })),
+    combine: (results) => ({
+      data: results.map(
+        (r) => r.data
+      ),
+      isHydrating: results.some((r) => r.isFetching)
+    })
+  });
+  const isHydratingLabels = hydrationResult.isHydrating;
+  const itemById = React.useMemo(() => {
+    const m = /* @__PURE__ */ new Map();
+    for (const it of availableItems) {
+      m.set(it.id, it);
+    }
+    for (let i = 0; i < missingDetailIds.length; i++) {
+      const row = hydrationResult.data[i];
+      if (row?.id) {
+        m.set(row.id, row);
+      }
+    }
+    return m;
+  }, [availableItems, missingDetailIds, hydrationResult.data]);
   const selectedOptions = normalizedValue.map((v) => {
-    const item = availableItems.find((item2) => item2.id === v.id);
+    const item = itemById.get(v.id);
     if (item) {
       const displayValue = item.parsedData?.[relation.displayField] || item.slug;
       return {
@@ -50,14 +103,33 @@ function RelationField({
       };
     }
     return { value: v.id, label: `ID: ${v.id.slice(0, 8)}...` };
-  }).filter(Boolean);
-  const options = availableItems.map((item) => {
-    const displayValue = item.parsedData?.[relation.displayField] || item.slug;
-    return {
-      value: item.id,
-      label: String(displayValue)
-    };
   });
+  const options = React.useMemo(() => {
+    const merged = [
+      ...availableItems
+    ];
+    const seen = new Set(merged.map((x) => x.id));
+    for (let i = 0; i < missingDetailIds.length; i++) {
+      const row = hydrationResult.data[i];
+      if (row?.id && !seen.has(row.id)) {
+        merged.push(row);
+        seen.add(row.id);
+      }
+    }
+    return merged.map((item) => {
+      const displayValue = item.parsedData?.[relation.displayField] || item.slug;
+      return {
+        value: item.id,
+        label: String(displayValue)
+      };
+    });
+  }, [
+    availableItems,
+    hydrationResult.data,
+    missingDetailIds,
+    relation.displayField
+  ]);
+  const createMutation = cmsHooks.useCreateContent(relation.targetType);
   const handleChange = React.useCallback(
     (newOptions) => {
       if (isSingleSelect) {
@@ -121,8 +193,8 @@ function RelationField({
           value: selectedOptions,
           onChange: handleChange,
           options,
-          placeholder: isLoading ? "Loading..." : `Select ${relation.targetType}${isSingleSelect ? "" : "(s)"}...`,
-          disabled: isLoading,
+          placeholder: isLoading || isHydratingLabels ? "Loading..." : `Select ${relation.targetType}${isSingleSelect ? "" : "(s)"}...`,
+          disabled: isLoading || isHydratingLabels,
           hidePlaceholderWhenSelected: true,
           emptyIndicator: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-center text-sm text-muted-foreground py-4", children: [
             "No ",

package/dist/packages/stack/src/plugins/cms/client/components/forms/relation-field.mjs

@@ -1,6 +1,10 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useMemo, useCallback } from 'react';
+import { useQueries } from '@tanstack/react-query';
+import { createApiClient } from '@btst/stack/plugins/client';
+import { usePluginOverrides } from '@btst/stack/context';
+import { createCMSQueryKeys } from '../../../../../../../../plugins/cms/query-keys.mjs';
 import MultipleSelector from '../../../../../../../ui/src/components/multi-select.mjs';
 import { Button } from '../../../../../../../ui/src/components/button.mjs';
 import { Plus, X } from 'lucide-react';
@@ -10,6 +14,14 @@ import { Label } from '../../../../../../../ui/src/components/label.mjs';
 import { Textarea } from '../../../../../../../ui/src/components/textarea.mjs';
 import { useContent, useCreateContent } from '../../hooks/cms-hooks.mjs';
 
+const RELATION_DETAIL_QUERY_OPTS = {
+  retry: false,
+  refetchOnWindowFocus: false,
+  refetchOnMount: false,
+  refetchOnReconnect: false,
+  staleTime: 1e3 * 60 * 5,
+  gcTime: 1e3 * 60 * 10
+};
 function RelationField({
   field,
   fieldConfigItem,
@@ -21,12 +33,19 @@ function RelationField({
   const [newItemName, setNewItemName] = useState("");
   const [newItemDescription, setNewItemDescription] = useState("");
   const [createError, setCreateError] = useState(null);
+  const { apiBaseURL, apiBasePath, headers } = usePluginOverrides("cms");
+  const listClient = useMemo(
+    () => createApiClient({
+      baseURL: apiBaseURL,
+      basePath: apiBasePath
+    }),
+    [apiBaseURL, apiBasePath]
+  );
+  const cmsQueries = useMemo(
+    () => createCMSQueryKeys(listClient, headers),
+    [listClient, headers]
+  );
   const isSingleSelect = relation.type === "belongsTo";
-  const { items: availableItems, isLoading } = useContent(relation.targetType, {
-    limit: 100
-    // Load a good chunk for the dropdown
-  });
-  const createMutation = useCreateContent(relation.targetType);
   const normalizedValue = useMemo(() => {
     if (!field.value) return [];
     if (isSingleSelect) {
@@ -38,8 +57,42 @@ function RelationField({
     }
     return field.value || [];
   }, [field.value, isSingleSelect]);
+  const { items: availableItems, isLoading } = useContent(relation.targetType, {
+    limit: 500
+  });
+  const missingDetailIds = useMemo(() => {
+    const loadedIds = new Set(availableItems.map((i) => i.id));
+    return normalizedValue.map((v) => v.id).filter((id) => id.length > 0 && !loadedIds.has(id));
+  }, [availableItems, normalizedValue]);
+  const hydrationResult = useQueries({
+    queries: missingDetailIds.map((id) => ({
+      ...cmsQueries.cmsContent.detail(relation.targetType, id),
+      ...RELATION_DETAIL_QUERY_OPTS,
+      enabled: Boolean(relation.targetType && id)
+    })),
+    combine: (results) => ({
+      data: results.map(
+        (r) => r.data
+      ),
+      isHydrating: results.some((r) => r.isFetching)
+    })
+  });
+  const isHydratingLabels = hydrationResult.isHydrating;
+  const itemById = useMemo(() => {
+    const m = /* @__PURE__ */ new Map();
+    for (const it of availableItems) {
+      m.set(it.id, it);
+    }
+    for (let i = 0; i < missingDetailIds.length; i++) {
+      const row = hydrationResult.data[i];
+      if (row?.id) {
+        m.set(row.id, row);
+      }
+    }
+    return m;
+  }, [availableItems, missingDetailIds, hydrationResult.data]);
   const selectedOptions = normalizedValue.map((v) => {
-    const item = availableItems.find((item2) => item2.id === v.id);
+    const item = itemById.get(v.id);
     if (item) {
       const displayValue = item.parsedData?.[relation.displayField] || item.slug;
       return {
@@ -48,14 +101,33 @@ function RelationField({
       };
     }
     return { value: v.id, label: `ID: ${v.id.slice(0, 8)}...` };
-  }).filter(Boolean);
-  const options = availableItems.map((item) => {
-    const displayValue = item.parsedData?.[relation.displayField] || item.slug;
-    return {
-      value: item.id,
-      label: String(displayValue)
-    };
   });
+  const options = useMemo(() => {
+    const merged = [
+      ...availableItems
+    ];
+    const seen = new Set(merged.map((x) => x.id));
+    for (let i = 0; i < missingDetailIds.length; i++) {
+      const row = hydrationResult.data[i];
+      if (row?.id && !seen.has(row.id)) {
+        merged.push(row);
+        seen.add(row.id);
+      }
+    }
+    return merged.map((item) => {
+      const displayValue = item.parsedData?.[relation.displayField] || item.slug;
+      return {
+        value: item.id,
+        label: String(displayValue)
+      };
+    });
+  }, [
+    availableItems,
+    hydrationResult.data,
+    missingDetailIds,
+    relation.displayField
+  ]);
+  const createMutation = useCreateContent(relation.targetType);
   const handleChange = useCallback(
     (newOptions) => {
       if (isSingleSelect) {
@@ -119,8 +191,8 @@ function RelationField({
           value: selectedOptions,
           onChange: handleChange,
           options,
-          placeholder: isLoading ? "Loading..." : `Select ${relation.targetType}${isSingleSelect ? "" : "(s)"}...`,
-          disabled: isLoading,
+          placeholder: isLoading || isHydratingLabels ? "Loading..." : `Select ${relation.targetType}${isSingleSelect ? "" : "(s)"}...`,
+          disabled: isLoading || isHydratingLabels,
           hidePlaceholderWhenSelected: true,
           emptyIndicator: /* @__PURE__ */ jsxs("p", { className: "text-center text-sm text-muted-foreground py-4", children: [
             "No ",

package/dist/packages/stack/src/plugins/cms/schemas.cjs

@@ -2,11 +2,15 @@
 
 const z = require('zod');
 
-const listContentQuerySchema = z.z.object({
-  slug: z.z.string().optional(),
-  limit: z.z.coerce.number().min(1).max(100).optional().default(20),
-  offset: z.z.coerce.number().min(0).optional().default(0)
-});
+const DEFAULT_MAX_PAGE_SIZE = 1e3;
+function createListContentQuerySchema(maxPageSize = DEFAULT_MAX_PAGE_SIZE) {
+  return z.z.object({
+    slug: z.z.string().optional(),
+    limit: z.z.coerce.number().min(1).max(maxPageSize).optional().default(20),
+    offset: z.z.coerce.number().min(0).optional().default(0)
+  });
+}
+createListContentQuerySchema();
 z.z.object({
   slug: z.z.string().min(1, "Slug is required"),
   // Use passthrough object instead of z.record(z.unknown()) due to Zod v4 bug
@@ -47,7 +51,8 @@ z.z.object({
   offset: z.z.number()
 });
 
+exports.DEFAULT_MAX_PAGE_SIZE = DEFAULT_MAX_PAGE_SIZE;
 exports.contentItemResponseSchema = contentItemResponseSchema;
 exports.contentItemWithDataResponseSchema = contentItemWithDataResponseSchema;
 exports.contentTypeResponseSchema = contentTypeResponseSchema;
-exports.listContentQuerySchema = listContentQuerySchema;
+exports.createListContentQuerySchema = createListContentQuerySchema;

package/dist/packages/stack/src/plugins/cms/schemas.mjs

@@ -1,10 +1,14 @@
 import { z } from 'zod';
 
-const listContentQuerySchema = z.object({
-  slug: z.string().optional(),
-  limit: z.coerce.number().min(1).max(100).optional().default(20),
-  offset: z.coerce.number().min(0).optional().default(0)
-});
+const DEFAULT_MAX_PAGE_SIZE = 1e3;
+function createListContentQuerySchema(maxPageSize = DEFAULT_MAX_PAGE_SIZE) {
+  return z.object({
+    slug: z.string().optional(),
+    limit: z.coerce.number().min(1).max(maxPageSize).optional().default(20),
+    offset: z.coerce.number().min(0).optional().default(0)
+  });
+}
+createListContentQuerySchema();
 z.object({
   slug: z.string().min(1, "Slug is required"),
   // Use passthrough object instead of z.record(z.unknown()) due to Zod v4 bug
@@ -45,4 +49,4 @@ z.object({
   offset: z.number()
 });
 
-export { contentItemResponseSchema, contentItemWithDataResponseSchema, contentTypeResponseSchema, listContentQuerySchema };
+export { DEFAULT_MAX_PAGE_SIZE, contentItemResponseSchema, contentItemWithDataResponseSchema, contentTypeResponseSchema, createListContentQuerySchema };