A DELETE request is used to remove an existing resource from a REST API. In a React Native application, Fetch can send a DELETE request to a PHP REST API, which can then validate the request and delete the corresponding record from the MySQL database.
DELETE is an HTTP method commonly used to remove an existing resource.
React Native
↓
DELETE Request
↓
PHP REST API
↓
Authentication
↓
Authorization
↓
MySQL DELETE
↓
JSON ResponseDELETE can be used for operations such as:
fetch(API_URL, {
method: "DELETE"
});The API must know which resource should be deleted.
A common approach is to send the record ID as a query parameter.
DELETE /api/students.php?id=10Here, 10 identifies the student that should be deleted.
const studentId = 10;
const response = await fetch(
`${API_URL}?id=${studentId}`,
{
method: "DELETE"
}
);Headers can be used when the API requires authentication or other request information.
const response = await fetch(
`${API_URL}?id=10`,
{
method: "DELETE",
headers: {
"Accept": "application/json"
}
}
);const response = await fetch(
`${API_URL}?id=10`,
{
method: "DELETE"
}
);
const result =
await response.json();
console.log(result);The PHP API can return a JSON response after successful deletion.
{
"success": true,
"message": "Student deleted successfully"
}const result =
await response.json();
if (result.success) {
console.log(
result.message
);
} else {
console.log(
result.message
);
}const response = await fetch(
`${API_URL}?id=10`,
{
method: "DELETE"
}
);
if (!response.ok) {
console.log(
"HTTP Error:",
response.status
);
}
const result =
await response.json();async function deleteStudent() {
try {
const response = await fetch(
`${API_URL}?id=10`,
{
method: "DELETE"
}
);
const result =
await response.json();
console.log(result);
} catch (error) {
console.log(
"Network Error:",
error.message
);
}
}PHP can read the ID from the query string and validate it.
$studentId = filter_input(
INPUT_GET,
'id',
FILTER_VALIDATE_INT
);
if (!$studentId) {
http_response_code(400);
echo json_encode([
"success" => false,
"message" =>
"Valid student ID is required"
]);
exit;
}Use a PDO prepared statement to delete the record.
$stmt = $pdo->prepare(
"DELETE FROM students
WHERE id = ?"
);
$stmt->execute([
$studentId
]);Prepared statements help protect the database from SQL injection.
If the record was already checked before DELETE, this can be used to confirm that the DELETE operation actually removed a row.
An API can return HTTP 200 with a JSON message after a successful delete.
http_response_code(200);
echo json_encode([
"success" => true,
"message" =>
"Student deleted successfully"
]);Another valid approach is HTTP 204 No Content when the server does not return a response body.
http_response_code(204);If the API returns 204, React Native should not attempt to parse an empty response body with response.json().
Sensitive DELETE operations should normally be protected.
const response = await fetch(
`${API_URL}?id=${studentId}`,
{
method: "DELETE",
headers: {
"Accept":
"application/json",
"Authorization":
`Bearer ${token}`
}
}
);Authentication verifies who the user is. Authorization determines whether that user has permission to delete the resource.
JWT Token
↓
Verify User
↓
Check Role / Permission
↓
Check Resource Ownership
↓
DELETE Record<Button
title="Delete Student"
onPress={() =>
deleteStudent(student.id)
}
/>The selected student's ID can be passed to the delete function.
async function deleteStudent(
studentId
) {
try {
const response = await fetch(
`${API_URL}?id=${studentId}`,
{
method: "DELETE"
}
);
const result =
await response.json();
if (result.success) {
console.log(
"Deleted successfully"
);
}
} catch (error) {
console.log(
error.message
);
}
}Deleting data is often irreversible, so the application should ask the user for confirmation.
Alert.alert(
"Delete Student",
"Are you sure you want to delete this student?",
[
{
text: "Cancel"
},
{
text: "Delete",
onPress: () =>
deleteStudent(student.id)
}
]
);After a successful DELETE request, the deleted item should also be removed from the React Native state.
setStudents(
students.filter(
student =>
student.id !== studentId
)
);This allows the screen to update without loading the complete list again.
HTTP 404 means the requested resource could not be found.
if (response.status === 404) {
Alert.alert(
"Not Found",
"Student does not exist."
);
return;
}A protected DELETE endpoint may return different authentication and authorization errors.
if (response.status === 401) {
console.log(
"Please login again."
);
}
if (response.status === 403) {
console.log(
"You do not have permission."
);
}const [deleting, setDeleting] =
useState(false);
async function deleteStudent(
studentId
) {
if (deleting) {
return;
}
setDeleting(true);
try {
const response = await fetch(
`${API_URL}?id=${studentId}`,
{
method: "DELETE"
}
);
const result =
await response.json();
console.log(result);
} catch (error) {
console.log(
error.message
);
} finally {
setDeleting(false);
}
}async function deleteRecord(
id
) {
const response = await fetch(
`${API_URL}?id=${id}`,
{
method: "DELETE",
headers: {
"Accept":
"application/json"
}
}
);
const result =
await response.json();
if (!response.ok) {
throw new Error(
result.message ||
"Delete failed"
);
}
return result;
}const API_URL =
"https://example.com/api/students.php";
async function deleteStudent(
studentId
) {
try {
const response = await fetch(
`${API_URL}?id=${studentId}`,
{
method: "DELETE",
headers: {
"Accept":
"application/json",
"Authorization":
`Bearer ${token}`
}
}
);
if (response.status === 204) {
console.log(
"Deleted successfully"
);
return;
}
const result =
await response.json();
if (!response.ok) {
throw new Error(
result.message ||
"Delete failed"
);
}
if (result.success) {
console.log(
result.message
);
setStudents(
students.filter(
student =>
student.id !== studentId
)
);
}
} catch (error) {
console.log(
"DELETE Error:",
error.message
);
}
}React Native Student List
↓
Press Delete
↓
Confirm Action
↓
fetch()
↓
DELETE Request
↓
PHP API
↓
Authenticate User
↓
Authorize Action
↓
Validate ID
↓
Check Record
↓
PDO DELETE
↓
MySQL
↓
JSON Response
↓
React Native
↓
Update UI ListThis is the basic pattern for safely deleting resources from a React Native application through a PHP and MySQL REST API.
Question: Which HTTP method is commonly used to delete an existing resource?