Pack Documentation
  • Welcome to the Pack!
  • Guides
    • Getting started
    • Creating your first Storefront
    • Previewing your Storefront
    • Editing your Storefront
    • Scheduling Content
    • Start developing
  • Fundamentals
    • Organization
    • Storefronts
    • Customizer
  • For Merchants
    • Creating Organizations
    • Creating Storefronts
    • Deploys
    • Product Bundles
    • Product Groupings
    • Inviting Teammates
    • Redirects
    • Editing Storefront Settings
  • For Marketers
    • Creating Pages
    • Sections
    • Publishing/Unpublishing
    • Managing Media
  • For Developers
    • Storefront Hooks
      • Settings Hooks
      • Page Hooks
      • Product Hooks
      • Collection Hooks
      • Blog Hooks
      • Article Hooks
    • Section API
      • Schema
      • Fields
        • Text
        • Color
        • Text Area
        • Markdown
        • Image
        • Number
        • Link
        • Product
        • Product Bundle
        • HTML
        • Group
        • List
        • Group List
        • Toggle
        • Select
        • Radio Group
        • Tags
    • Creating Storefront Settings
    • Shopify Hooks
      • Cart
        • useCart
        • useCartClear
        • useCartCheckout
        • useCartUpdateNote
        • useCartAddItems
        • useCartUpdateItems
        • useCartRemoveItems
        • useCartAddAttributes
        • useCartUpdateAttributes
        • useCartRemoveAttributes
        • useCartAddDiscount
        • useCartRemoveDiscount
        • useCartAddGiftCard
        • useCartRemoveGiftCard
      • Customer
        • useCustomer
        • useCustomerCreate
        • useCustomerLogin
        • useCustomerLogout
        • useCustomerCreateAddress
        • useCustomerUpdateAddress
        • useCustomerDeleteAddress
        • useCustomerUpdateDetails
        • useCustomerRecoverPassword
        • useCustomerResetPassword
      • Hydrogen Framework
    • Asynchronous Hooks
    • Pack API
      • Queries
    • Transform Specification
    • Adding Tailwind CSS
Powered by GitBook
On this page
  • Asynchronous hooks status interface
  • Async hooks options
  • Using async hook status
  1. For Developers

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>     
  )
}
PreviousHydrogen FrameworkNextPack API

Last updated 2 years ago