Skip to main content

useComment hooks

These hooks manage comment data across the application, including fetching comments by various filters (building, author), and performing CRUD operations. Built on SWR with automatic cache invalidation on mutations.

Hooks​

HookDescription
useCommentsFetches all comments
useCommentFetches a single comment by ID, with update and delete mutations
useCommentsByBuildingFetches comments associated with a specific building
useCommentsByAuthorFetches comments written by a specific author
useCreateCommentCreates a new comment

useComments​

Fetches all comments from the API.

Signature​

function useComments(): UseCommentsReturn

Parameters​

None.

Returns​

FieldTypeDescription
commentsComment[]Array of comments, defaults to empty array
isLoadingbooleanSWR loading state
isErrorError | undefinedSWR error state

Example​

const { comments, isLoading } = useComments();

if (isLoading) return <Skeleton />;

return (
  <ul>
    {comments.map((c) => (
      <li key={c.id}>{c.content}</li>
    ))}
  </ul>
);

Notes​

Uses SWR key ["comments"]. Automatically revalidated when comments are created, updated, or deleted via related mutation hooks.

useComment​

Fetches a single comment by ID. Also provides updateComment and deleteComment mutation functions.

Signature​

function useComment(id: number | null): UseCommentReturn

Parameters​

ParamTypeRequiredDescription
idnumber | nullYesComment ID to fetch. Pass null to skip fetching.

Returns​

FieldTypeDescription
commentComment | nullThe fetched comment, or null if not loaded
isLoadingbooleanSWR loading state
isErrorError | undefinedSWR error state
updateComment(arg: Partial<Comment>) => Promise<Comment>Mutation trigger to update the comment
isMutatingbooleanTrue while update mutation is in progress
updateErrorError | undefinedError from update mutation
updatedDataComment | undefinedReturned data from successful update
deleteComment() => Promise<Comment>Mutation trigger to delete the comment
isDeletingbooleanTrue while delete mutation is in progress
deleteErrorError | undefinedError from delete mutation

Example​

const { comment, isLoading, updateComment, deleteComment } = useComment(commentId);

const handleUpdate = async () => {
  await updateComment({ content: "Updated content" });
};

const handleDelete = async () => {
  await deleteComment();
};

Notes​

On successful update or delete, the hook invalidates related caches: the single comment key, the all-comments list, and any building-specific or author-specific comment lists if applicable.

useCommentsByBuilding​

Fetches all comments associated with a specific building.

Signature​

function useCommentsByBuilding(buildingId: number | null): UseCommentsByBuildingReturn

Parameters​

ParamTypeRequiredDescription
buildingIdnumber | nullYesBuilding ID to filter by. Pass null to skip fetching.

Returns​

FieldTypeDescription
commentsComment[]Comments for the building, defaults to empty array
isLoadingbooleanSWR loading state
isErrorError | undefinedSWR error state

Example​

const { comments, isLoading } = useCommentsByBuilding(building.id);

Notes​

Uses SWR key ["comments", "building", buildingId]. Cache is invalidated when comments are created or modified with a matching buildingId.

useCommentsByAuthor​

Fetches all comments written by a specific author.

Signature​

function useCommentsByAuthor(authorId: number | null): UseCommentsByAuthorReturn

Parameters​

ParamTypeRequiredDescription
authorIdnumber | nullYesAuthor ID to filter by. Pass null to skip fetching.

Returns​

FieldTypeDescription
commentsComment[]Comments by the author, defaults to empty array
isLoadingbooleanSWR loading state
isErrorError | undefinedSWR error state

Example​

const { comments, isLoading } = useCommentsByAuthor(currentUser.id);

Notes​

Uses SWR key ["commentsByAuthor", authorId]. Cache is invalidated when comments are created or modified with a matching authorId.

useCreateComment​

Creates a new comment.

Signature​

function useCreateComment(): UseCreateCommentReturn

Parameters​

None.

Returns​

FieldTypeDescription
createComment(arg: { commentData: Partial<Comment> }) => Promise<Comment>Mutation trigger to create a comment
isMutatingbooleanTrue while mutation is in progress
createErrorError | undefinedError from create mutation
createdDataComment | undefinedReturned data from successful creation

Example​

const { createComment, isMutating } = useCreateComment();

const handleSubmit = async (content: string) => {
  await createComment({
    commentData: { content, buildingId: 123, authorId: currentUser.id },
  });
};

Notes​

On success, invalidates the all-comments list and any building-specific or author-specific lists based on the created comment's buildingId and authorId.