Hooks - Crud

List Query with Infinite Scroll

function UserList() {
  const { items: users, query } = userQueryManager.useList({
    filters: { status: 'active' },
    limit: 20,
    staleTime: 5 * 60 * 1000
  })

  const {
    data,
    error,
    isLoading,
    isFetchingNextPage,
    fetchNextPage,
    hasNextPage
  } = query

  if (isLoading) return <div>Loading users...</div>
  if (error) return <div>Error: {error.message}</div>

  return (
    <div>
      {users.map(user => (
        <UserCard key={user.id} user={user} />
      ))}
      
      {hasNextPage && (
        <button 
          onClick={() => fetchNextPage()}
          disabled={isFetchingNextPage}
        >
          {isFetchingNextPage ? 'Loading more...' : 'Load More'}
        </button>
      )}
    </div>
  )
}

Retrieve Single Item

function UserProfile({ userId }: { userId: string }) {
  const { item: user, query } = userQueryManager.useRetrieve(userId, {
    enabled: !!userId,
    staleTime: 10 * 60 * 1000
  })

  if (query.isLoading) return <div>Loading user...</div>
  if (query.error) return <div>Error: {query.error.message}</div>
  if (!user) return <div>User not found</div>

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
      <p>Status: {user.status}</p>
    </div>
  )
}

Create with Optimistic Updates

function CreateUserForm() {
  const createMutation = userQueryManager.useCreate({
    optimistic: true,
    appendTo: 'start',
    listFilters: { status: 'active' },
    onSuccess: (user) => {
      toast.success(`User ${user.name} created successfully!`)
    },
    onError: (error) => {
      toast.error(`Failed to create user: ${error.message}`)
    }
  })

  const handleSubmit = (formData: Partial<User>) => {
    createMutation.mutate({
      name: formData.name,
      email: formData.email,
      status: 'active'
    })
  }

  return (
    <form onSubmit={(e) => {
      e.preventDefault()
      const formData = new FormData(e.target as HTMLFormElement)
      handleSubmit({
        name: formData.get('name') as string,
        email: formData.get('email') as string
      })
    }}>
      <input name="name" placeholder="Name" required />
      <input name="email" type="email" placeholder="Email" required />
      <button 
        type="submit" 
        disabled={createMutation.isPending}
      >
        {createMutation.isPending ? 'Creating...' : 'Create User'}
      </button>
    </form>
  )
}

Update with Optimistic Updates

function UserEditForm({ user }: { user: User }) {
  const updateMutation = userQueryManager.useUpdate({
    optimistic: true,
    onSuccess: (updatedUser) => {
      toast.success(`User ${updatedUser.name} updated successfully!`)
    },
    onError: (error) => {
      toast.error(`Failed to update user: ${error.message}`)
    }
  })

  const handleUpdate = (updates: Partial<User>) => {
    updateMutation.mutate({
      id: user.id,
      ...updates
    })
  }

  return (
    <div>
      <button onClick={() => handleUpdate({ status: 'inactive' })}>
        Deactivate User
      </button>
      <button onClick={() => handleUpdate({ name: 'New Name' })}>
        Update Name
      </button>
    </div>
  )
}

Delete with Optimistic Updates

function UserActions({ user }: { user: User }) {
  const deleteMutation = userQueryManager.useDelete({
    optimistic: true,
    onSuccess: () => {
      toast.success('User deleted successfully!')
    },
    onError: (error) => {
      toast.error(`Failed to delete user: ${error.message}`)
    }
  })

  const handleDelete = () => {
    if (confirm('Are you sure you want to delete this user?')) {
      deleteMutation.mutate(user.id)
    }
  }

  return (
    <button 
      onClick={handleDelete}
      disabled={deleteMutation.isPending}
    >
      {deleteMutation.isPending ? 'Deleting...' : 'Delete User'}
    </button>
  )
}