Skip to main content

​
Function Signature

async function deleteMessage(
  prevState: MessagePrevState,
  formData: FormData
): Promise<MessagePrevState>
Source: src/lib/actions/message/deleteMessage.ts:9

​
Parameters

​
prevState
MessagePrevState
required
Previous state object returned from the last invocation. Used by React’s useActionState hook.
​
formData
FormData
required
Form data containing the message identifier

​
Return Value

​
MessagePrevState
object

​
Validation

This function performs simple validation without Zod: 
const id = formData.get("id");
if (!id) {
  return {
    success: false,
    error: "ID is required",
  };
}

​
Behavior

  1. Validation: Checks that the ID field is present
  2. API Call: Makes a POST request to {BACKEND_URL}/messages/delete-one/{id}
  3. Authentication: Uses Basic Auth with environment credentials
  4. Revalidation: Calls revalidatePath("/") on success to refresh the home page
  5. Error Handling: Returns structured error messages with success: false flag

​
Usage Example

import { useActionState } from "react";
import deleteMessage from "@/lib/actions/message/deleteMessage";

function DeleteMessageButton({ messageId }: { messageId: string }) {
  const [state, formAction] = useActionState(deleteMessage, {});
  
  return (
    <form action={formAction}>
      <input type="hidden" name="id" value={messageId} />
      <button type="submit">Delete Message</button>
      {state.error && <p>{state.error}</p>}
      {state.success && <p>Message deleted!</p>}
    </form>
  );
}

​
Alternative Usage with FormAction

function MessageList({ messages }) {
  const handleDelete = async (messageId: string) => {
    const formData = new FormData();
    formData.set("id", messageId);
    const result = await deleteMessage({}, formData);
    
    if (result.success) {
      console.log("Message deleted");
    } else {
      console.error(result.error);
    }
  };
  
  return (
    <ul>
      {messages.map((msg) => (
        <li key={msg.id}>
          {msg.content}
          <button onClick={() => handleDelete(msg.id)}>Delete</button>
        </li>
      ))}
    </ul>
  );
}

​
Backend Endpoint

POST /messages/delete-one/:id Headers:
  • Authorization: Basic authentication
Body: None (ID is in the URL path)

​
Note on Error Responses

Unlike createMessage and updateMessage, this function explicitly sets success: false in error responses, making it easier to check the operation status without relying solely on the presence of an error message.

Build docs developers (and LLMs) love

Get started for freeTalk to us