2.0 KiB
PocketBase SDK Auto-Cancellation
The Problem
PocketBase JS SDK enables auto-cancellation by default. Every create() and update() call to the same collection shares a default requestKey derived from method + URL. When two calls to the same collection happen simultaneously (double-click, race condition, rapid re-submission), the second call auto-cancels the first and throws:
Error: The request was autocancelled.
This is surfaced to the user as "Error creating repair order: The request was autocancelled."
The Fix
Pass { requestKey: null } to ALL mutating PocketBase calls in pocketbase.js:
// addDoc
const record = await pb.collection(collName).create(pbData, { requestKey: null });
// updateDoc
const record = await pb.collection(collName).update(docId, pbData, { requestKey: null });
// setDoc (both branches)
return pb.collection(collName).update(records[0].id, pbData, { requestKey: null });
return pb.collection(collName).create(pbData, { requestKey: null });
The getDocs and getFullListLegacy functions already pass { requestKey: null } in their options.
Belt-and-Suspenders: Double-Submission Guard
Even with requestKey: null, prevent duplicate form submissions by disabling the submit button on first click:
function handleFormSubmit() {
const submitBtn = document.getElementById('submit-btn');
if (submitBtn && submitBtn.disabled) return; // guard
if (submitBtn) {
submitBtn.disabled = true;
submitBtn.textContent = 'Saving...';
}
// ... submission logic ...
// Re-enable after success:
if (submitBtn) {
submitBtn.disabled = false;
submitBtn.textContent = 'Create Repair Order';
}
// ... success cleanup (clear form, collapse section) ...
} catch (error) {
// Re-enable in catch block:
if (submitBtn) {
submitBtn.disabled = false;
submitBtn.textContent = 'Create Repair Order';
}
// ... error handling ...
}
This guards against: double-clicks, keyboard double-Enter, and accidental double-taps on mobile.