Asynchronous Hooks
useStartFinishErrors
const { updateAddress, ...updateStatus } = useCustomerUpdateAddress();
// Main status helpers
const { started, finished, success, errors, reset, } = updateStatus;
status | | initial | onSuccess | onError | |
started | true or false | false | true | true | Request started |
finished | true or false | false | true | true | Request finished |
success | true or false | false | true | false | Request finished without errors |
errors | [] or [..'error'] | [] | [] | [...'error'] | Request errors |
setStarted | fn | | | | overwrite started |
setFinished | fn | | | | overwrite finished |
setErrors | fn | | | | append error(s) |
setSuccess | fn | | | | overwrite success |
reset | fn | | | | reset statuses to initial |
resetTimer | ref | | | | helper ref setTimeout |
| | |
autoReset | ms | auto resets "success" and "errors" states ms after completed |
autoReset hook option
// With autoReset
const { updateAddress, ...status } = useCustomerUpdateAddress({ autoReset: 2000 });
// status.success lifecycle example (autoReset)
false -> true || false -> 2000ms -> false
// status.errors lifecycle example (autoReset)
[] -> ['error one'] || [] -> 2000ms -> []
// Without autoreset
const { updateAddress, ...status } = useCustomerUpdateAddress();
// status.success lifecycle example
false -> true || false
// status.errors lifecycle example
[] -> ['error one'] || []
AddressEdit.jsx - Pseudo code example
import { useCustomerUpdateAddress } from '@backpackjs/storefront';
const AddressEdit = ({ address ) => {
const { updateAddress, ...updateStatus } = useCustomerUpdateAddress();
// fake updated form data
const [editedData, setEditedData] = useState(...) // fictional fields data
const [isDefault, setIsDefault] = useState(...) // fictional fields data
// reset on finish — see autoReset hooks API prop for a short hand
useEffect(() => {
if (!updateStatus?.finished) return;
updateStatus.ref = setTimeout(() => {
updateStatus.reset();
clearTimeout(updateStatus.ref.current);
}, 2000)
}, [updateStatus?.finished])
// handle form submit
const updateAddressOnSubmit = async (event) => {
event.preventDefault();
// update address
const updatedAddress = await updateAddress({
id: address.id,
isDefault: isDefault,
address: editedData
});
if (updatedAddress) {
console.log('Address updated ✅')
}
}
return (
<div class='AddressEdit'>
<EditForm onSubmit={updateAddressOnSubmit}>
<Fields...>
</EditForm>
// Fictional status display
<Status>
{ updateStatus?.started && <Loader /> }
{ updateStatus?.success && <Success /> }
{ updateStatus?.errors && <Errors errors={updateStatus?.errors} /> }
</Status>
</div>
)
}
Last modified 8mo ago