@btst/stack 3.0.0-rc.2 → 3.0.0-rc.4

package/src/plugins/comments/client/hooks/use-comments.tsx

@@ -12,28 +12,35 @@ import {
 	createApiClient,
 	runResourceMutation,
 } from "@btst/stack/plugins/client";
+import { useStack } from "@btst/stack/context";
 import { commentsResources, createCommentsQueryKeys } from "../../query-keys";
 import type { CommentsApiRouter } from "../../api";
 import type { SerializedComment, CommentListResult } from "../../types";
+import { COMMENTS_PLUGIN_ID } from "../constants";
 
 // HTTP mappings for all comment mutations live in the resource declaration;
 // the hooks below own the cache behavior (optimistic updates, invalidation)
-// because they take an explicit client config — required by the embeddable
-// `CommentThread` — and therefore cannot use the overrides-bound
-// `createResource` mutation hooks.
+// because they preserve Comments-specific optimistic cache behavior. Runtime
+// transport and the shared QueryClient still come from the resolved stack.
 const commentMutations = commentsResources.comments.mutations;
 
-interface CommentsClientConfig {
-	apiBaseURL: string;
-	apiBasePath: string;
-	headers?: HeadersInit;
-}
-
-function getClient(config: CommentsClientConfig) {
-	return createApiClient<CommentsApiRouter>({
-		baseURL: config.apiBaseURL,
-		basePath: config.apiBasePath,
+function useCommentsRuntime() {
+	const { api, plugins, queryClient: stackQueryClient } = useStack();
+	const pluginApi = plugins?.[COMMENTS_PLUGIN_ID]?.api;
+	const headers = pluginApi?.browserHeaders;
+	const client = createApiClient<CommentsApiRouter>({
+		baseURL: pluginApi?.baseURL ?? api?.baseURL ?? "",
+		basePath: pluginApi?.basePath ?? api?.basePath ?? "",
+		headers,
+		credentials: pluginApi?.credentials,
 	});
+	const queryClient = useQueryClient(stackQueryClient);
+	return {
+		client,
+		headers,
+		queryClient,
+		queries: createCommentsQueryKeys(client),
+	};
 }
 
 /**
@@ -41,7 +48,6 @@ function getClient(config: CommentsClientConfig) {
  * Returns approved comments by default.
  */
 export function useComments(
-	config: CommentsClientConfig,
 	params: {
 		resourceId?: string;
 		resourceType?: string;
@@ -55,15 +61,17 @@ export function useComments(
 	},
 	options?: { enabled?: boolean },
 ) {
-	const client = getClient(config);
-	const queries = createCommentsQueryKeys(client, config.headers);
-
-	const query = useQuery({
-		...queries.comments.list(params),
-		staleTime: 30_000,
-		retry: false,
-		enabled: options?.enabled ?? true,
-	});
+	const { queries, queryClient } = useCommentsRuntime();
+
+	const query = useQuery(
+		{
+			...queries.comments.list(params),
+			staleTime: 30_000,
+			retry: false,
+			enabled: options?.enabled ?? true,
+		},
+		queryClient,
+	);
 
 	return {
 		data: query.data,
@@ -79,28 +87,27 @@ export function useComments(
 /**
  * useSuspenseQuery version — for use in .internal.tsx files.
  */
-export function useSuspenseComments(
-	config: CommentsClientConfig,
-	params: {
-		resourceId?: string;
-		resourceType?: string;
-		parentId?: string | null;
-		status?: "pending" | "approved" | "spam";
-		currentUserId?: string;
-		authorId?: string;
-		sort?: "asc" | "desc";
-		limit?: number;
-		offset?: number;
-	},
-) {
-	const client = getClient(config);
-	const queries = createCommentsQueryKeys(client, config.headers);
-
-	const { data, refetch, error, isFetching } = useSuspenseQuery({
-		...queries.comments.list(params),
-		staleTime: 30_000,
-		retry: false,
-	});
+export function useSuspenseComments(params: {
+	resourceId?: string;
+	resourceType?: string;
+	parentId?: string | null;
+	status?: "pending" | "approved" | "spam";
+	currentUserId?: string;
+	authorId?: string;
+	sort?: "asc" | "desc";
+	limit?: number;
+	offset?: number;
+}) {
+	const { queries, queryClient } = useCommentsRuntime();
+
+	const { data, refetch, error, isFetching } = useSuspenseQuery(
+		{
+			...queries.comments.list(params),
+			staleTime: 30_000,
+			retry: false,
+		},
+		queryClient,
+	);
 
 	if (error && !isFetching) {
 		throw error;
@@ -118,26 +125,25 @@ export function useSuspenseComments(
  * Uses useSuspenseQuery with explicit offset so the table always shows exactly
  * one page of results and navigation is handled by Prev / Next controls.
  */
-export function useSuspenseModerationComments(
-	config: CommentsClientConfig,
-	params: {
-		status?: "pending" | "approved" | "spam";
-		limit?: number;
-		page?: number;
-	},
-) {
+export function useSuspenseModerationComments(params: {
+	status?: "pending" | "approved" | "spam";
+	limit?: number;
+	page?: number;
+}) {
 	const limit = params.limit ?? 20;
 	const page = params.page ?? 1;
 	const offset = (page - 1) * limit;
 
-	const client = getClient(config);
-	const queries = createCommentsQueryKeys(client, config.headers);
+	const { queries, queryClient } = useCommentsRuntime();
 
-	const { data, refetch, error, isFetching } = useSuspenseQuery({
-		...queries.comments.list({ status: params.status, limit, offset }),
-		staleTime: 30_000,
-		retry: false,
-	});
+	const { data, refetch, error, isFetching } = useSuspenseQuery(
+		{
+			...queries.comments.list({ status: params.status, limit, offset }),
+			staleTime: 30_000,
+			retry: false,
+		},
+		queryClient,
+	);
 
 	if (error && !isFetching) {
 		throw error;
@@ -166,7 +172,6 @@ export function useSuspenseModerationComments(
  * useInfiniteQuery, drive pages via pageParam, and derive hasMore from server total.
  */
 export function useInfiniteComments(
-	config: CommentsClientConfig,
 	params: {
 		resourceId: string;
 		resourceType: string;
@@ -183,8 +188,7 @@ export function useInfiniteComments(
 	options?: { enabled?: boolean },
 ) {
 	const pageSize = params.pageSize ?? 10;
-	const client = getClient(config);
-	const queries = createCommentsQueryKeys(client, config.headers);
+	const { queries, queryClient } = useCommentsRuntime();
 
 	const baseQuery = queries.commentsThread.list({
 		resourceId: params.resourceId,
@@ -202,17 +206,20 @@ export function useInfiniteComments(
 		InfiniteData<CommentListResult>,
 		typeof baseQuery.queryKey,
 		number
-	>({
-		...baseQuery,
-		initialPageParam: 0,
-		getNextPageParam: (lastPage) => {
-			const nextOffset = lastPage.offset + lastPage.limit;
-			return nextOffset < lastPage.total ? nextOffset : undefined;
+	>(
+		{
+			...baseQuery,
+			initialPageParam: 0,
+			getNextPageParam: (lastPage) => {
+				const nextOffset = lastPage.offset + lastPage.limit;
+				return nextOffset < lastPage.total ? nextOffset : undefined;
+			},
+			staleTime: 30_000,
+			retry: false,
+			enabled: options?.enabled ?? true,
 		},
-		staleTime: 30_000,
-		retry: false,
-		enabled: options?.enabled ?? true,
-	});
+		queryClient,
+	);
 
 	const comments = query.data?.pages.flatMap((p) => p.items) ?? [];
 	const total = query.data?.pages[0]?.total ?? 0;
@@ -233,22 +240,21 @@ export function useInfiniteComments(
 /**
  * Fetch the approved comment count for a resource.
  */
-export function useCommentCount(
-	config: CommentsClientConfig,
-	params: {
-		resourceId: string;
-		resourceType: string;
-		status?: "pending" | "approved" | "spam";
-	},
-) {
-	const client = getClient(config);
-	const queries = createCommentsQueryKeys(client, config.headers);
-
-	const query = useQuery({
-		...queries.commentCount.byResource(params),
-		staleTime: 60_000,
-		retry: false,
-	});
+export function useCommentCount(params: {
+	resourceId: string;
+	resourceType: string;
+	status?: "pending" | "approved" | "spam";
+}) {
+	const { queries, queryClient } = useCommentsRuntime();
+
+	const query = useQuery(
+		{
+			...queries.commentCount.byResource(params),
+			staleTime: 60_000,
+			retry: false,
+		},
+		queryClient,
+	);
 
 	return {
 		count: query.data ?? 0,
@@ -266,37 +272,32 @@ export function useCommentCount(
  * infinite query so the optimistic update targets InfiniteData<CommentListResult>
  * instead of a plain CommentListResult cache entry.
  */
-export function usePostComment(
-	config: CommentsClientConfig,
-	params: {
-		resourceId: string;
-		resourceType: string;
-		currentUserId?: string;
-		/** When provided, optimistic updates target this infinite-query cache key. */
-		infiniteKey?: readonly unknown[];
-		/**
-		 * Page size used by the corresponding `useInfiniteComments` call.
-		 * Used only when the infinite-query cache is empty at the time of the
-		 * optimistic update — ensures `getNextPageParam` computes the correct
-		 * `nextOffset` from `lastPage.limit` instead of a hardcoded fallback.
-		 */
-		pageSize?: number;
-		/**
-		 * Sort direction of the surrounding infinite thread.
-		 * - `"asc"` (default): newest comments belong on the LAST page → optimistic
-		 *   item is appended to `pages[last].items`.
-		 * - `"desc"`: newest comments belong on the FIRST page → optimistic item
-		 *   is prepended to `pages[0].items`.
-		 *
-		 * Must match the `sort` passed to `useInfiniteComments` so the optimistic
-		 * item appears in the same position the server will place it.
-		 */
-		sort?: "asc" | "desc";
-	},
-) {
-	const queryClient = useQueryClient();
-	const client = getClient(config);
-	const queries = createCommentsQueryKeys(client, config.headers);
+export function usePostComment(params: {
+	resourceId: string;
+	resourceType: string;
+	currentUserId?: string;
+	/** When provided, optimistic updates target this infinite-query cache key. */
+	infiniteKey?: readonly unknown[];
+	/**
+	 * Page size used by the corresponding `useInfiniteComments` call.
+	 * Used only when the infinite-query cache is empty at the time of the
+	 * optimistic update — ensures `getNextPageParam` computes the correct
+	 * `nextOffset` from `lastPage.limit` instead of a hardcoded fallback.
+	 */
+	pageSize?: number;
+	/**
+	 * Sort direction of the surrounding infinite thread.
+	 * - `"asc"` (default): newest comments belong on the LAST page → optimistic
+	 *   item is appended to `pages[last].items`.
+	 * - `"desc"`: newest comments belong on the FIRST page → optimistic item
+	 *   is prepended to `pages[0].items`.
+	 *
+	 * Must match the `sort` passed to `useInfiniteComments` so the optimistic
+	 * item appears in the same position the server will place it.
+	 */
+	sort?: "asc" | "desc";
+}) {
+	const { client, headers, queries, queryClient } = useCommentsRuntime();
 
 	// Compute the list key for a given parentId so optimistic updates always
 	// target the exact cache entry the component is subscribed to.
@@ -326,295 +327,305 @@ export function usePostComment(
 	const isInfinitePost = (parentId: string | null | undefined) =>
 		!!params.infiniteKey && (parentId ?? null) === null;
 
-	return useMutation({
-		mutationFn: (input: {
-			body: string;
-			parentId?: string | null;
-			limit?: number;
-			offset?: number;
-		}) =>
-			runResourceMutation(
-				client,
-				commentMutations.create,
-				{
+	return useMutation(
+		{
+			mutationFn: (input: {
+				body: string;
+				parentId?: string | null;
+				limit?: number;
+				offset?: number;
+			}) =>
+				runResourceMutation(
+					client,
+					commentMutations.create,
+					{
+						resourceId: params.resourceId,
+						resourceType: params.resourceType,
+						parentId: input.parentId ?? null,
+						body: input.body,
+					},
+					headers,
+				) as Promise<SerializedComment>,
+			onMutate: async (input) => {
+				const listKey = getListKey(input.parentId, input.offset, input.limit);
+				await queryClient.cancelQueries({ queryKey: listKey });
+
+				// Optimistic comment — shows to own author with "pending" badge
+				const optimisticId = `optimistic-${Date.now()}`;
+				const optimistic: SerializedComment = {
+					id: optimisticId,
 					resourceId: params.resourceId,
 					resourceType: params.resourceType,
 					parentId: input.parentId ?? null,
+					authorId: params.currentUserId ?? "",
+					resolvedAuthorName: "You",
+					resolvedAvatarUrl: null,
 					body: input.body,
-				},
-				config.headers,
-			) as Promise<SerializedComment>,
-		onMutate: async (input) => {
-			const listKey = getListKey(input.parentId, input.offset, input.limit);
-			await queryClient.cancelQueries({ queryKey: listKey });
-
-			// Optimistic comment — shows to own author with "pending" badge
-			const optimisticId = `optimistic-${Date.now()}`;
-			const optimistic: SerializedComment = {
-				id: optimisticId,
-				resourceId: params.resourceId,
-				resourceType: params.resourceType,
-				parentId: input.parentId ?? null,
-				authorId: params.currentUserId ?? "",
-				resolvedAuthorName: "You",
-				resolvedAvatarUrl: null,
-				body: input.body,
-				status: "pending",
-				likes: 0,
-				isLikedByCurrentUser: false,
-				editedAt: null,
-				createdAt: new Date().toISOString(),
-				updatedAt: new Date().toISOString(),
-				replyCount: 0,
-			};
-
-			if (isInfinitePost(input.parentId)) {
-				const previous =
-					queryClient.getQueryData<InfiniteData<CommentListResult>>(listKey);
-
-				const isDesc = params.sort === "desc";
-				queryClient.setQueryData<InfiniteData<CommentListResult>>(
-					listKey,
-					(old) => {
-						if (!old) {
+					status: "pending",
+					likes: 0,
+					isLikedByCurrentUser: false,
+					editedAt: null,
+					createdAt: new Date().toISOString(),
+					updatedAt: new Date().toISOString(),
+					replyCount: 0,
+				};
+
+				if (isInfinitePost(input.parentId)) {
+					const previous =
+						queryClient.getQueryData<InfiniteData<CommentListResult>>(listKey);
+
+					const isDesc = params.sort === "desc";
+					queryClient.setQueryData<InfiniteData<CommentListResult>>(
+						listKey,
+						(old) => {
+							if (!old) {
+								return {
+									pages: [
+										{
+											items: [optimistic],
+											total: 1,
+											limit: params.pageSize ?? 10,
+											offset: 0,
+										},
+									],
+									pageParams: [0],
+								};
+							}
+							// For asc (oldest-first) threads the new comment lives at the end →
+							// append to the last page. For desc (newest-first) threads it lives
+							// at the top → prepend to the first page.
+							const targetIdx = isDesc ? 0 : old.pages.length - 1;
 							return {
-								pages: [
-									{
-										items: [optimistic],
-										total: 1,
-										limit: params.pageSize ?? 10,
-										offset: 0,
-									},
-								],
-								pageParams: [0],
+								...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 === targetIdx
+										? {
+												...page,
+												items: isDesc
+													? [optimistic, ...page.items]
+													: [...page.items, optimistic],
+												total: page.total + 1,
+											}
+										: { ...page, total: page.total + 1 },
+								),
 							};
-						}
-						// For asc (oldest-first) threads the new comment lives at the end →
-						// append to the last page. For desc (newest-first) threads it lives
-						// at the top → prepend to the first page.
-						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 === targetIdx
-									? {
-											...page,
-											items: isDesc
-												? [optimistic, ...page.items]
-												: [...page.items, optimistic],
-											total: page.total + 1,
-										}
-									: { ...page, total: page.total + 1 },
-							),
-						};
-					},
-				);
-
-				return { previous, isInfinite: true as const, listKey, optimisticId };
-			}
+						},
+					);
 
-			const previous = queryClient.getQueryData<CommentListResult>(listKey);
-			queryClient.setQueryData<CommentListResult>(listKey, (old) => {
-				if (!old) {
-					return { items: [optimistic], total: 1, limit: 20, offset: 0 };
+					return { previous, isInfinite: true as const, listKey, optimisticId };
 				}
-				return {
-					...old,
-					items: [...old.items, optimistic],
-					total: old.total + 1,
-				};
-			});
 
-			return { previous, isInfinite: false as const, listKey, optimisticId };
-		},
-		onSuccess: (data, _input, context) => {
-			if (!context) return;
-			// Replace the optimistic item with the real server response.
-			// The server may return status "pending" (autoApprove: false) or "approved"
-			// (autoApprove: true). Either way we keep the item in the cache so the
-			// author continues to see their comment — with a "Pending approval" badge
-			// when pending.
-			//
-			// For replies (non-infinite path): do NOT call invalidateQueries here.
-			// The setQueryData below already puts the authoritative server response
-			// (including the pending reply) in the cache. Invalidating would trigger
-			// a background refetch that goes to the server without auth context and
-			// returns only approved replies — overwriting the cache and making the
-			// pending reply disappear.
-			if (context.isInfinite) {
-				queryClient.setQueryData<InfiniteData<CommentListResult>>(
-					context.listKey,
-					(old) => {
-						if (!old) {
-							// Cache was cleared between onMutate and onSuccess (rare).
-							// Seed with the real server response so the thread keeps the new comment.
-							return {
-								pages: [
-									{
-										items: [data],
-										total: 1,
-										limit: _input.limit ?? params.pageSize ?? 10,
-										offset: _input.offset ?? 0,
-									},
-								],
-								pageParams: [_input.offset ?? 0],
-							};
-						}
-						return {
-							...old,
-							pages: old.pages.map((page) => ({
-								...page,
-								items: page.items.map((item) =>
-									item.id === context.optimisticId ? data : item,
-								),
-							})),
-						};
-					},
-				);
-			} else {
-				queryClient.setQueryData<CommentListResult>(context.listKey, (old) => {
+				const previous = queryClient.getQueryData<CommentListResult>(listKey);
+				queryClient.setQueryData<CommentListResult>(listKey, (old) => {
 					if (!old) {
-						// Cache was cleared between onMutate and onSuccess (rare).
-						// Seed it with the real server response so the reply stays visible.
-						return {
-							items: [data],
-							total: 1,
-							limit: _input.limit ?? params.pageSize ?? 20,
-							offset: _input.offset ?? 0,
-						};
+						return { items: [optimistic], total: 1, limit: 20, offset: 0 };
 					}
 					return {
 						...old,
-						items: old.items.map((item) =>
-							item.id === context.optimisticId ? data : item,
-						),
+						items: [...old.items, optimistic],
+						total: old.total + 1,
 					};
 				});
-			}
-		},
-		onError: (_err, _input, context) => {
-			if (!context) return;
-			queryClient.setQueryData(context.listKey, context.previous);
+
+				return { previous, isInfinite: false as const, listKey, optimisticId };
+			},
+			onSuccess: (data, _input, context) => {
+				if (!context) return;
+				// Replace the optimistic item with the real server response.
+				// The server may return status "pending" (autoApprove: false) or "approved"
+				// (autoApprove: true). Either way we keep the item in the cache so the
+				// author continues to see their comment — with a "Pending approval" badge
+				// when pending.
+				//
+				// For replies (non-infinite path): do NOT call invalidateQueries here.
+				// The setQueryData below already puts the authoritative server response
+				// (including the pending reply) in the cache. Invalidating would trigger
+				// a background refetch that goes to the server without auth context and
+				// returns only approved replies — overwriting the cache and making the
+				// pending reply disappear.
+				if (context.isInfinite) {
+					queryClient.setQueryData<InfiniteData<CommentListResult>>(
+						context.listKey,
+						(old) => {
+							if (!old) {
+								// Cache was cleared between onMutate and onSuccess (rare).
+								// Seed with the real server response so the thread keeps the new comment.
+								return {
+									pages: [
+										{
+											items: [data],
+											total: 1,
+											limit: _input.limit ?? params.pageSize ?? 10,
+											offset: _input.offset ?? 0,
+										},
+									],
+									pageParams: [_input.offset ?? 0],
+								};
+							}
+							return {
+								...old,
+								pages: old.pages.map((page) => ({
+									...page,
+									items: page.items.map((item) =>
+										item.id === context.optimisticId ? data : item,
+									),
+								})),
+							};
+						},
+					);
+				} else {
+					queryClient.setQueryData<CommentListResult>(
+						context.listKey,
+						(old) => {
+							if (!old) {
+								// Cache was cleared between onMutate and onSuccess (rare).
+								// Seed it with the real server response so the reply stays visible.
+								return {
+									items: [data],
+									total: 1,
+									limit: _input.limit ?? params.pageSize ?? 20,
+									offset: _input.offset ?? 0,
+								};
+							}
+							return {
+								...old,
+								items: old.items.map((item) =>
+									item.id === context.optimisticId ? data : item,
+								),
+							};
+						},
+					);
+				}
+			},
+			onError: (_err, _input, context) => {
+				if (!context) return;
+				queryClient.setQueryData(context.listKey, context.previous);
+			},
 		},
-	});
+		queryClient,
+	);
 }
 
 /**
  * Edit the body of an existing comment.
  */
-export function useUpdateComment(config: CommentsClientConfig) {
-	const queryClient = useQueryClient();
-	const client = getClient(config);
-	const queries = createCommentsQueryKeys(client, config.headers);
-
-	return useMutation({
-		mutationFn: (input: { id: string; body: string }) =>
-			runResourceMutation(
-				client,
-				commentMutations.update,
-				input,
-				config.headers,
-			) as Promise<SerializedComment>,
-		onSettled: () => {
-			queryClient.invalidateQueries({
-				queryKey: queries.comments.list._def,
-			});
-			// Also invalidate the infinite thread cache so edits are reflected there.
-			queryClient.invalidateQueries({ queryKey: ["commentsThread"] });
+export function useUpdateComment() {
+	const { client, headers, queries, queryClient } = useCommentsRuntime();
+
+	return useMutation(
+		{
+			mutationFn: (input: { id: string; body: string }) =>
+				runResourceMutation(
+					client,
+					commentMutations.update,
+					input,
+					headers,
+				) as Promise<SerializedComment>,
+			onSettled: () => {
+				queryClient.invalidateQueries({
+					queryKey: queries.comments.list._def,
+				});
+				// Also invalidate the infinite thread cache so edits are reflected there.
+				queryClient.invalidateQueries({ queryKey: ["commentsThread"] });
+			},
 		},
-	});
+		queryClient,
+	);
 }
 
 /**
  * Approve a comment (set status to "approved"). Admin use.
  */
-export function useApproveComment(config: CommentsClientConfig) {
-	const queryClient = useQueryClient();
-	const client = getClient(config);
-	const queries = createCommentsQueryKeys(client, config.headers);
-
-	return useMutation({
-		mutationFn: (id: string) =>
-			runResourceMutation(
-				client,
-				commentMutations.updateStatus,
-				{ id, status: "approved" },
-				config.headers,
-			) as Promise<SerializedComment>,
-		onSettled: () => {
-			queryClient.invalidateQueries({
-				queryKey: queries.comments.list._def,
-			});
-			queryClient.invalidateQueries({
-				queryKey: queries.commentCount.byResource._def,
-			});
-			// Also invalidate the infinite thread cache so status changes are reflected there.
-			queryClient.invalidateQueries({ queryKey: ["commentsThread"] });
+export function useApproveComment() {
+	const { client, headers, queries, queryClient } = useCommentsRuntime();
+
+	return useMutation(
+		{
+			mutationFn: (id: string) =>
+				runResourceMutation(
+					client,
+					commentMutations.updateStatus,
+					{ id, status: "approved" },
+					headers,
+				) as Promise<SerializedComment>,
+			onSettled: () => {
+				queryClient.invalidateQueries({
+					queryKey: queries.comments.list._def,
+				});
+				queryClient.invalidateQueries({
+					queryKey: queries.commentCount.byResource._def,
+				});
+				// Also invalidate the infinite thread cache so status changes are reflected there.
+				queryClient.invalidateQueries({ queryKey: ["commentsThread"] });
+			},
 		},
-	});
+		queryClient,
+	);
 }
 
 /**
  * Update comment status (pending / approved / spam). Admin use.
  */
-export function useUpdateCommentStatus(config: CommentsClientConfig) {
-	const queryClient = useQueryClient();
-	const client = getClient(config);
-	const queries = createCommentsQueryKeys(client, config.headers);
-
-	return useMutation({
-		mutationFn: (input: {
-			id: string;
-			status: "pending" | "approved" | "spam";
-		}) =>
-			runResourceMutation(
-				client,
-				commentMutations.updateStatus,
-				input,
-				config.headers,
-			) as Promise<SerializedComment>,
-		onSettled: () => {
-			queryClient.invalidateQueries({
-				queryKey: queries.comments.list._def,
-			});
-			queryClient.invalidateQueries({
-				queryKey: queries.commentCount.byResource._def,
-			});
-			// Also invalidate the infinite thread cache so status changes are reflected there.
-			queryClient.invalidateQueries({ queryKey: ["commentsThread"] });
+export function useUpdateCommentStatus() {
+	const { client, headers, queries, queryClient } = useCommentsRuntime();
+
+	return useMutation(
+		{
+			mutationFn: (input: {
+				id: string;
+				status: "pending" | "approved" | "spam";
+			}) =>
+				runResourceMutation(
+					client,
+					commentMutations.updateStatus,
+					input,
+					headers,
+				) as Promise<SerializedComment>,
+			onSettled: () => {
+				queryClient.invalidateQueries({
+					queryKey: queries.comments.list._def,
+				});
+				queryClient.invalidateQueries({
+					queryKey: queries.commentCount.byResource._def,
+				});
+				// Also invalidate the infinite thread cache so status changes are reflected there.
+				queryClient.invalidateQueries({ queryKey: ["commentsThread"] });
+			},
 		},
-	});
+		queryClient,
+	);
 }
 
 /**
  * Delete a comment. Admin use.
  */
-export function useDeleteComment(config: CommentsClientConfig) {
-	const queryClient = useQueryClient();
-	const client = getClient(config);
-	const queries = createCommentsQueryKeys(client, config.headers);
-
-	return useMutation({
-		mutationFn: (id: string) =>
-			runResourceMutation(
-				client,
-				commentMutations.delete,
-				id,
-				config.headers,
-			) as Promise<{ success: boolean }>,
-		onSettled: () => {
-			queryClient.invalidateQueries({
-				queryKey: queries.comments.list._def,
-			});
-			queryClient.invalidateQueries({
-				queryKey: queries.commentCount.byResource._def,
-			});
-			// Also invalidate the infinite thread cache so deletions are reflected there.
-			queryClient.invalidateQueries({ queryKey: ["commentsThread"] });
+export function useDeleteComment() {
+	const { client, headers, queries, queryClient } = useCommentsRuntime();
+
+	return useMutation(
+		{
+			mutationFn: (id: string) =>
+				runResourceMutation(
+					client,
+					commentMutations.delete,
+					id,
+					headers,
+				) as Promise<{ success: boolean }>,
+			onSettled: () => {
+				queryClient.invalidateQueries({
+					queryKey: queries.comments.list._def,
+				});
+				queryClient.invalidateQueries({
+					queryKey: queries.commentCount.byResource._def,
+				});
+				// Also invalidate the infinite thread cache so deletions are reflected there.
+				queryClient.invalidateQueries({ queryKey: ["commentsThread"] });
+			},
 		},
-	});
+		queryClient,
+	);
 }
 
 /**
@@ -624,24 +635,19 @@ export function useDeleteComment(config: CommentsClientConfig) {
  * so the optimistic update targets InfiniteData<CommentListResult> instead of
  * a plain CommentListResult cache entry.
  */
-export function useToggleLike(
-	config: CommentsClientConfig,
-	params: {
-		resourceId: string;
-		resourceType: string;
-		/** parentId of the comment being liked — must match the parentId used by
-		 *  useComments so the optimistic setQueryData hits the correct cache entry.
-		 *  Pass `null` for top-level comments, or the parent comment ID for replies. */
-		parentId?: string | null;
-		currentUserId?: string;
-		/** When the comment lives in an infinite thread, pass the thread's query key
-		 *  so the optimistic update targets the correct InfiniteData cache entry. */
-		infiniteKey?: readonly unknown[];
-	},
-) {
-	const queryClient = useQueryClient();
-	const client = getClient(config);
-	const queries = createCommentsQueryKeys(client, config.headers);
+export function useToggleLike(params: {
+	resourceId: string;
+	resourceType: string;
+	/** parentId of the comment being liked — must match the parentId used by
+	 *  useComments so the optimistic setQueryData hits the correct cache entry.
+	 *  Pass `null` for top-level comments, or the parent comment ID for replies. */
+	parentId?: string | null;
+	currentUserId?: string;
+	/** When the comment lives in an infinite thread, pass the thread's query key
+	 *  so the optimistic update targets the correct InfiniteData cache entry. */
+	infiniteKey?: readonly unknown[];
+}) {
+	const { client, headers, queries, queryClient } = useCommentsRuntime();
 
 	// For top-level thread comments use the infinite key; for replies (or when no
 	// infinite key is supplied) fall back to the regular list cache entry.
@@ -687,40 +693,43 @@ export function useToggleLike(
 		}
 	}
 
-	return useMutation({
-		mutationFn: (input: { commentId: string; authorId: string }) =>
-			runResourceMutation(
-				client,
-				commentMutations.like,
-				input,
-				config.headers,
-			) as Promise<{ likes: number; isLiked: boolean }>,
-		onMutate: async (input) => {
-			await queryClient.cancelQueries({ queryKey: listKey });
-
-			// Snapshot previous state for rollback.
-			const previous = isInfinite
-				? queryClient.getQueryData<InfiniteData<CommentListResult>>(listKey)
-				: queryClient.getQueryData<CommentListResult>(listKey);
-
-			applyLikeUpdate(input.commentId, (c) => {
-				const wasLiked = c.isLikedByCurrentUser;
-				return {
-					...c,
-					isLikedByCurrentUser: !wasLiked,
-					likes: wasLiked ? Math.max(0, c.likes - 1) : c.likes + 1,
-				};
-			});
+	return useMutation(
+		{
+			mutationFn: (input: { commentId: string }) =>
+				runResourceMutation(
+					client,
+					commentMutations.like,
+					input,
+					headers,
+				) as Promise<{ likes: number; isLiked: boolean }>,
+			onMutate: async (input) => {
+				await queryClient.cancelQueries({ queryKey: listKey });
+
+				// Snapshot previous state for rollback.
+				const previous = isInfinite
+					? queryClient.getQueryData<InfiniteData<CommentListResult>>(listKey)
+					: queryClient.getQueryData<CommentListResult>(listKey);
+
+				applyLikeUpdate(input.commentId, (c) => {
+					const wasLiked = c.isLikedByCurrentUser;
+					return {
+						...c,
+						isLikedByCurrentUser: !wasLiked,
+						likes: wasLiked ? Math.max(0, c.likes - 1) : c.likes + 1,
+					};
+				});
 
-			return { previous };
-		},
-		onError: (_err, _input, context) => {
-			if (context?.previous !== undefined) {
-				queryClient.setQueryData(listKey, context.previous);
-			}
-		},
-		onSettled: () => {
-			queryClient.invalidateQueries({ queryKey: listKey });
+				return { previous };
+			},
+			onError: (_err, _input, context) => {
+				if (context?.previous !== undefined) {
+					queryClient.setQueryData(listKey, context.previous);
+				}
+			},
+			onSettled: () => {
+				queryClient.invalidateQueries({ queryKey: listKey });
+			},
 		},
-	});
+		queryClient,
+	);
 }