Asynchronous Hooks

Asynchronous hooks status interface

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

Async hooks options

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'] || []

Using async hook status

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>     
  )
}