SwiftUI SearchBar keyword not publishing value to viewModel

Question

I made a custom SearchBar with SwiftUI and put it in the view, having BookListViewModel as @ObservedObject, but how do it call fetchBooks() from BookListViewModel and show as list?

Here is my SearchView()

struct SearchView: View {
    @ObservedObject var bookListVM : BookListViewModel
    
    var body: some View {
        VStack {
            SearchBar(searchText: $bookListVM.keyword)
            Text("\(bookListVM.keyword)")
        
            if bookListVM.keyword.count > 0 {
                List(bookListVM.books, id: \.id) { bookVM in
                    NavigationLink(
                        destination: BookDetailView(id: bookVM.id),
                        label: {
                            Text("\(bookVM.title)")
                        })
                }                
            } else {
                Text("Please Search Your Item")
                Spacer()
            }
        }
    }
}

and in the BookListViewModel,

class BookListViewModel: ObservableObject {
    @Published public private(set) var books: [BookViewModel] = []
    private var cancellable: AnyCancellable?
    @Published var keyword : String = ""
    
    init() {
        self.keyword = keyword
        self.fetchBooks()
    }
    
    func fetchBooks() {
        self.cancellable = Webservice().getSearchBooks(keyword: self.keyword).map { books in
            books.map { BookViewModel(book: $0) }
        }
            .sink(receiveCompletion: { completion in
                if case .failure(let err) = completion {
                    print("Retrieving data failed with error \(err)")
                }
            }, receiveValue: { bookViewModel in
                self.books = bookViewModel
                print(bookViewModel)
            })
    }
}

class BookViewModel: ObservableObject {
    let book: Book
    let id: String
    var title: String
    
    init(book: Book){
        self.book = book
        self.id = book.isbn13
        self.title = book.title
    }
}

and my Webservice, function getSearchBooks()

func getSearchBooks(keyword: String) -> AnyPublisher<[Book], Error> {
        URLSession.shared.dataTaskPublisher(for: EndPoint.books(keyword).url)
            .receive(on: RunLoop.main)
            .map{ $0.data }
            .decode(type: BooksData.self, decoder: JSONDecoder())
            .map{$0.books}
            .catch { _ in Empty<[Book], Error>()}
            .eraseToAnyPublisher()
    
    }

What did I do wrong? Any advice will be appreciated. Thanks in advance!

Unrelated but an `ObservableObject` class (`BookViewModel`) which doesn't publish anything is pointless. A plain struct might be sufficient. — vadian, Aug 25 '21 at 12:59

staticVoidMan · Answer 1 · 2021-08-25T13:28:35.640

There is no action being performed after the keyword is updated.
One way is to observe $keyword for changes & do something when it updates.

Example Solution:

class BookListViewModel: ObservableObject {
    //...
    private var searchSubscription: AnyCancellable?
    
    init() {
        searchSubscription = self.$keyword
            .debounce(for: 0.3, scheduler: DispatchQueue.main)
            .sink(receiveValue: { newValue in
                self.fetchBooks(searchTerm: newValue)
            })
    }

    func fetchBooks(searchTerm: String) {
        self.cancellable = Webservice().getSearchBooks(keyword: searchTerm)
                                       .map { books in
        //...
}

NOTE:

Not related to the core problem but having a .debounce(for:scheduler:) is good for optimization; we don't want the request being sent for every keystroke. Lets wait 0.3s instead.

will "fetchBooks()" be called for every single character typed into the search bar? — workingdog support Ukraine, Aug 25 '21 at 13:18
@workingdog yup. thanks for highlighting that. it would be wise to use .debounce for optimization. — staticVoidMan, Aug 25 '21 at 13:33

score 0 · Answer 2 · answered Aug 25 '21 at 13:08

If I understand your question correctly, how to call "fetchBooks()" when you have a keyword from your SearchBar.

You could try this approach with your SearchBar (simulated here with a TextField):

struct SearchView: View {
    @ObservedObject var bookListVM : BookListViewModel
    
    var body: some View {
        VStack {
            //   SearchBar(searchText: $bookListVM.keyword)
            TextField("book search", text: $bookListVM.keyword) // <-- for testing
                .onSubmit {
                    if !bookListVM.keyword.isEmpty {
                        bookListVM.fetchBooks()
                    }
                }
            
            Text("\(bookListVM.keyword)")
            
            if bookListVM.keyword.count > 0 {
                List(bookListVM.books, id: \.id) { bookVM in
                    NavigationLink(
                        destination: BookDetailView(id: bookVM.id),
                        label: {
                            Text("\(bookVM.title)")
                        })
                }
            } else {
                Text("Please Search Your Item")
                Spacer()
            }
        }
    }
}

SwiftUI SearchBar keyword not publishing value to viewModel

2 Answers2

Example Solution: