@btst/stack 2.11.8 → 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 };

package/dist/packages/stack/src/plugins/comments/api/query-key-defs.cjs

@@ -27,6 +27,7 @@ function commentsThreadDiscriminator(params) {
     parentId: params?.parentId,
     status: params?.status,
     currentUserId: params?.currentUserId,
+    sort: params?.sort,
     limit: params?.limit ?? 20
   };
 }
@@ -48,7 +49,7 @@ const COMMENTS_QUERY_KEYS = {
   commentCount: (params) => ["comments", "count", commentCountDiscriminator(params)],
   /**
    * Key for the infinite thread query (top-level comments, load-more).
-   * Full key: ["commentsThread", "list", { resourceId, resourceType, parentId, status, currentUserId, limit }]
+   * Full key: ["commentsThread", "list", { resourceId, resourceType, parentId, status, currentUserId, sort, limit }]
    * Offset is excluded — it is driven by `pageParam`, not baked into the key.
    */
   commentsThread: (params) => ["commentsThread", "list", commentsThreadDiscriminator(params)]

package/dist/packages/stack/src/plugins/comments/api/query-key-defs.mjs

@@ -25,6 +25,7 @@ function commentsThreadDiscriminator(params) {
     parentId: params?.parentId,
     status: params?.status,
     currentUserId: params?.currentUserId,
+    sort: params?.sort,
     limit: params?.limit ?? 20
   };
 }
@@ -46,7 +47,7 @@ const COMMENTS_QUERY_KEYS = {
   commentCount: (params) => ["comments", "count", commentCountDiscriminator(params)],
   /**
    * Key for the infinite thread query (top-level comments, load-more).
-   * Full key: ["commentsThread", "list", { resourceId, resourceType, parentId, status, currentUserId, limit }]
+   * Full key: ["commentsThread", "list", { resourceId, resourceType, parentId, status, currentUserId, sort, limit }]
    * Offset is excluded — it is driven by `pageParam`, not baked into the key.
    */
   commentsThread: (params) => ["commentsThread", "list", commentsThreadDiscriminator(params)]

package/dist/packages/stack/src/plugins/comments/client/components/comment-thread.cjs

@@ -195,12 +195,14 @@ function CommentThreadInner({
   localization: localizationProp,
   pageSize: pageSizeProp,
   allowPosting: allowPostingProp,
-  allowEditing: allowEditingProp
+  allowEditing: allowEditingProp,
+  sort: sortProp
 }) {
   const overrides = context.usePluginOverrides("comments", {});
   const pageSize = pageSizeProp ?? overrides.defaultCommentPageSize ?? DEFAULT_PAGE_SIZE;
   const allowPosting = allowPostingProp ?? overrides.allowPosting ?? true;
   const allowEditing = allowEditingProp ?? overrides.allowEditing ?? true;
+  const sort = sortProp ?? overrides.defaultCommentSort ?? "desc";
   const loc = { ...index.COMMENTS_LOCALIZATION, ...localizationProp };
   const [replyingTo, setReplyingTo] = React.useState(null);
   const [expandedReplies, setExpandedReplies] = React.useState(
@@ -222,6 +224,7 @@ function CommentThreadInner({
     status: "approved",
     parentId: null,
     currentUserId,
+    sort,
     pageSize
   });
   const postMutation = useComments.usePostComment(config, {
@@ -229,7 +232,8 @@ function CommentThreadInner({
     resourceType,
     currentUserId,
     infiniteKey: threadQueryKey,
-    pageSize
+    pageSize,
+    sort
   });
   const handlePost = async (body) => {
     if (!currentUserId) return;

package/dist/packages/stack/src/plugins/comments/client/components/comment-thread.mjs

@@ -193,12 +193,14 @@ function CommentThreadInner({
   localization: localizationProp,
   pageSize: pageSizeProp,
   allowPosting: allowPostingProp,
-  allowEditing: allowEditingProp
+  allowEditing: allowEditingProp,
+  sort: sortProp
 }) {
   const overrides = usePluginOverrides("comments", {});
   const pageSize = pageSizeProp ?? overrides.defaultCommentPageSize ?? DEFAULT_PAGE_SIZE;
   const allowPosting = allowPostingProp ?? overrides.allowPosting ?? true;
   const allowEditing = allowEditingProp ?? overrides.allowEditing ?? true;
+  const sort = sortProp ?? overrides.defaultCommentSort ?? "desc";
   const loc = { ...COMMENTS_LOCALIZATION, ...localizationProp };
   const [replyingTo, setReplyingTo] = useState(null);
   const [expandedReplies, setExpandedReplies] = useState(
@@ -220,6 +222,7 @@ function CommentThreadInner({
     status: "approved",
     parentId: null,
     currentUserId,
+    sort,
     pageSize
   });
   const postMutation = usePostComment(config, {
@@ -227,7 +230,8 @@ function CommentThreadInner({
     resourceType,
     currentUserId,
     infiniteKey: threadQueryKey,
-    pageSize
+    pageSize,
+    sort
   });
   const handlePost = async (body) => {
     if (!currentUserId) return;

package/dist/packages/stack/src/plugins/comments/client/hooks/use-comments.cjs

@@ -84,6 +84,7 @@ function useInfiniteComments(config, params, options) {
     parentId: params.parentId ?? null,
     status: params.status,
     currentUserId: params.currentUserId,
+    sort: params.sort,
     limit: pageSize
   });
   const query = reactQuery.useInfiniteQuery({
@@ -183,6 +184,7 @@ function usePostComment(config, params) {
       };
       if (isInfinitePost(input.parentId)) {
         const previous2 = queryClient.getQueryData(listKey);
+        const isDesc = params.sort === "desc";
         queryClient.setQueryData(
           listKey,
           (old) => {
@@ -199,15 +201,15 @@ function usePostComment(config, params) {
                 pageParams: [0]
               };
             }
-            const lastIdx = old.pages.length - 1;
+            const targetIdx = isDesc ? 0 : old.pages.length - 1;
             return {
               ...old,
               // Increment `total` on every page so the header count (which reads
               // pages[0].total) stays in sync even after multiple pages are loaded.
               pages: old.pages.map(
-                (page, idx) => idx === lastIdx ? {
+                (page, idx) => idx === targetIdx ? {
                   ...page,
-                  items: [...page.items, optimistic],
+                  items: isDesc ? [optimistic, ...page.items] : [...page.items, optimistic],
                   total: page.total + 1
                 } : { ...page, total: page.total + 1 }
               )

package/dist/packages/stack/src/plugins/comments/client/hooks/use-comments.mjs

@@ -82,6 +82,7 @@ function useInfiniteComments(config, params, options) {
     parentId: params.parentId ?? null,
     status: params.status,
     currentUserId: params.currentUserId,
+    sort: params.sort,
     limit: pageSize
   });
   const query = useInfiniteQuery({
@@ -181,6 +182,7 @@ function usePostComment(config, params) {
       };
       if (isInfinitePost(input.parentId)) {
         const previous2 = queryClient.getQueryData(listKey);
+        const isDesc = params.sort === "desc";
         queryClient.setQueryData(
           listKey,
           (old) => {
@@ -197,15 +199,15 @@ function usePostComment(config, params) {
                 pageParams: [0]
               };
             }
-            const lastIdx = old.pages.length - 1;
+            const targetIdx = isDesc ? 0 : old.pages.length - 1;
             return {
               ...old,
               // Increment `total` on every page so the header count (which reads
               // pages[0].total) stays in sync even after multiple pages are loaded.
               pages: old.pages.map(
-                (page, idx) => idx === lastIdx ? {
+                (page, idx) => idx === targetIdx ? {
                   ...page,
-                  items: [...page.items, optimistic],
+                  items: isDesc ? [optimistic, ...page.items] : [...page.items, optimistic],
                   total: page.total + 1
                 } : { ...page, total: page.total + 1 }
               )