Using PATCH Method in hmm-api
Basic Usage
1. Import and Create API Client
import ApiClient from "hmm-api";
// Create an API client
const api = new ApiClient();
2. Simple PATCH Request
// Partially update a user's profile
const updateData = {
email: "newemail@example.com",
};
const response = await api.patch("/users/123", updateData);
// Check if request was successful
if (response.success) {
console.log("Profile updated successfully");
} else {
// Handle any errors
console.error(response.error);
}
Advanced Usage
With Type Safety
// Define interfaces for update request and response
interface UserUpdateRequest {
email?: string;
name?: string;
}
interface UserUpdateResponse {
id: number;
email: string;
updatedAt: string;
}
const updateData: UserUpdateRequest = {
email: "john.doe@example.com",
name: "John Doe",
};
const response = await api.patch<UserUpdateResponse>("/users/123", updateData);
if (response.success) {
// TypeScript knows the exact shape of the response
const updatedUser = response.data;
console.log(updatedUser.updatedAt);
}
Custom Options
Add Headers
const response = await api.patch("/users/123", updateData, {
headers: {
"X-Update-Source": "ProfileSettings",
Authorization: `Bearer ${yourAuthToken}`,
},
});
Control Error Toasts
// Disable error notifications for this request
const response = await api.patch("/users/123", updateData, {
showErrorToast: false,
});
Add a Cleanup Function
const response = await api.patch("/users/123", updateData, {
finally: () => {
// This runs after the request, whether it succeeds or fails
resetFormState();
hideLoadingSpinner();
},
});
Full Example Scenario
import ApiClient from "hmm-api";
// Assuming you have a toast library configured
const api = new ApiClient({
toast: yourToastLibrary,
});
async function updateUserProfile() {
// Partial update of user profile
const profileUpdates = {
preferences: {
theme: "dark",
notifications: true,
},
contactInfo: {
phone: "+1234567890",
},
};
const response = await api.patch<UserProfile>("/profile", profileUpdates, {
headers: {
Authorization: `Bearer ${yourAuthToken}`,
},
showErrorToast: true,
finally: () => {
clearFormChanges();
},
});
if (response.success) {
// Update local state with new profile data
updateLocalProfile(response.data);
showSuccessNotification("Profile updated");
}
}
Practical Use Cases
Partial Updates
// Update only specific fields
const partialUpdate = {
// Only update these specific fields
status: "active",
lastLogin: new Date().toISOString(),
};
const response = await api.patch("/users/current", partialUpdate);
Complex Nested Updates
// Update nested object properties
const nestedUpdate = {
settings: {
preferences: {
language: "en",
timezone: "UTC",
},
},
};
const response = await api.patch("/account", nestedUpdate);
Quick Tips
- Use PATCH for partial updates (unlike PUT which replaces entire resource)
- Always include only the fields you want to modify
- Leverage type safety for precise update definitions
- Handle both success and failure scenarios
- Use
finally
callback for consistent UI updates