Practical Examples

Prefetching

function UserCard({ user }: { user: User }) {
  const handleMouseEnter = () => {
    // Prefetch user details when hovering
    userQueryManager.prefetchRetrieve(user.id, {
      staleTime: 5 * 60 * 1000
    })
  }

  return (
    <div onMouseEnter={handleMouseEnter}>
      <h3>{user.name}</h3>
      <p>{user.email}</p>
    </div>
  )
}

Custom Optimistic Update Pattern

function useOptimisticUserUpdate() {
  const { mutations, queryKeys } = userQueryManager

  const optimisticUpdate = async (userId: string, updates: Partial<User>) => {
    // Cancel ongoing queries
    await queryKeys.cancelListQueries()

    // Get current data
    const previousUser = queryKeys.getRetrieveData(userId)
    if (!previousUser) return null

    // Apply optimistic update
    const optimisticUser = { ...previousUser, ...updates }
    mutations.updateItems(optimisticUser)

    return {
      rollback: () => mutations.updateItems(previousUser),
      optimisticUser
    }
  }

  return { optimisticUpdate }
}