ray
61 lines
2.0 KiB
Markdown
61 lines
2.0 KiB
Markdown
# 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`:
|
|
|
|
```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:
|
|
|
|
```js
|
|
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.
|