Using @Query with ForEach list to pass to child views.

[haIIux]

I want to preface my questions with an apology as one of my biggest hurdles with SwiftUI is the passing of data. I don't know why... it just is so this may be something in which is related to that however I am also extremely new to GRDB (less than 24hrs).

I have a list view as outlined below, I query in all of the journal entires then allow the user to select one, and from the SelectedEntryView they can toggle an edit state which simply changes the view from Text view objects to a TextField and TextEditor object. The issue I'm running into is passing the entry from the ForEach down to the children to appropriately save. Once again, I'm unsure if this is a SwiftUI understanding issue or something I'm doing wrong with GRDBQuery.

// Parent View
struct JournalEntryListView: View {
    @Query<QueryJournalEntries> var entries: [Entries]

    init() {
        _entries = Query(QueryJournalEntries())
    }
    
    var body: some View {
        List {
                Section {
                    ForEach(entries, id: \.self) { entry in
                        EntryListItem(entry: entry)
                            .overlay {
                                NavigationLink {
                                    SelectedEntryView(entry: entry)
                                } label: {
                                    EmptyView()
                                }
                            }
                    }
                } header: {
                    Text("Recent Entries")
                }
            }
        }
    }
}

// List Display View (Child 1?)
struct EntryListItem: View {
    @Binding var entry: Entries
    
    var body: some View {
        VStack(alignment: .leading) {
            VStack(alignment: .leading) {
                Text(entry.title)
                Text(entry.entryBody)
            }

            HStack {
                Text("\(Image(systemName: "calendar")) \(entry.entryDate.formatted(date: .numeric, time: .omitted))")
                Text(firstMoodAndCount)
            }
        }
    }
}

// SelectedEntryView (Child 2? - Main concern as the other view simply displays the queried information and is non-editable.)
struct SelectedEntryView: View {
    @Binding var entry: Entries
    @State private var isEditing = false
    
    let columns = [
        GridItem(.flexible()),
        GridItem(.flexible()),
        GridItem(.flexible()),
        GridItem(.flexible())
    ]
    
    var body: some View {
        VStack {
            if isEditing {
                EntryEditView(entry: $entry)
            } else {
                entryView
            }
        }
        .toolbar {
            ToolbarItem(placement: .topBarTrailing) {
                Button {
                    withAnimation {
                        isEditing.toggle()
                    }
                    if isEditing {
                        Task {
                            #warning("Save after editing.")
                            try await harmony.save(record: entry)
                        }
                    }
                } label: {
                    Text(isEditing ? "Save" : "Edit")
                }
            }
        }
    }
}

[groue]

Hello @haIIux,

The issue I'm running into is passing the entry from the ForEach down to the children to appropriately save.

I'm not sure I understand the issue. Is it a compiler error, or an app that misbehave at runtime? I can't really tell.

But maybe I can help anyway. Something is strange in your sample code: it is the use of a Binding in EntryListItem. I'm far from any computer but it looks like the sample code does not compile.

Binding can be used for editing a value that is stored in a mutable storage such as a @State property of an enclosing view, or the property of an observable object, etc.

There is one important word in the above paragraph: mutable. One can't build a binding out database values fetched by @Query. Those are immutable Swift values.

To make changes, you have to copy the immutable entry fetched from the database into a mutable storage (such as a @State property of SelectedEntryView, because it is this view that deals with edition, persistence, and needs something that can change). Now you have an in-memory copy that you can modify at will, for example by passing EntryEditView a binding to this mutable entry with $entry.

When the Save button is pressed, and the modified entry is persisted on disk, @Query detects the change (I assume you use ValueObservation in QueryJournalEntries), a fresh list of entries is fetched from the database, and the updated value should be displayed on screen.

[groue]

OK, we'll have a closer look. Please be patient: I'm still in vacations for a few days 😎

[haIIux]

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2024-03-08.at.00.17.04.mp4

This is a video of the issue itself. You can see that it saves after editing and when going to the parent then it suddenly changes back. I should note that I am using this open-source GRDB / CloudKit wrapper however that handles add / deleting but leans on GRDBQuery for reading. With that said I'm not sure what's going on...

One question I have about GRDBQuery is when building the Queryable struct, do I build 1 per query? Meaning, do I need to create a struct QueryAllJournalEntires: Queryable and a struct QuerySingleEntry: Queryable for their respective purposes? This is how mine looks currently to fetch all in an effort to display them in my main list. Do I need to create a new one to query the single entry the user selects?

struct QueryJournalEntries: Queryable {
    static var defaultValue: [Entries] { [] }
    
    func publisher(in databaseReader: DatabaseReader) -> AnyPublisher<[Entries], Error> {
        ValueObservation
            .tracking(fetchAllEntries(_:))
            .publisher(in: databaseReader, scheduling: .immediate)
            .eraseToAnyPublisher()
    }
    
    func fetchAllEntries(_ db: Database) throws -> [Entries] {
        try Entries
            .fetchAll(db)
            .sorted { entry1, entry2 in
                entry1.cloudKitCreationDate ?? .distantFuture < entry2.cloudKitCreationDate ?? .distantFuture
            }
    }
}

[groue]

Weird indeed.

I recommend figuring out what is happening:

• Trace executed database statements with maximum debugging information: see https://swiftpackageindex.com/groue/grdb.swift/v6.25.0/documentation/grdb/configuration#Tracing-SQL-Statements and https://swiftpackageindex.com/groue/grdb.swift/v6.25.0/documentation/grdb/configuration#Public-Statement-Arguments
• Trace ValueObservation activity: see https://swiftpackageindex.com/groue/grdb.swift/v6.25.0/documentation/grdb/valueobservation/print(_:to:)

You should see the SELECT performed by the observation, the values it fetches, and the UPDATE that writes in the database with the updated values. This may help understanding what's going on. If what you see at the database level looks correct (good values fetched, good write performed in time, good fresh values fetched afterward), then probably something is wrong at the SwiftUI level, some state is not properly updated.

[haIIux]

Well it turns out, as expected GRDB was working as designed 🥳 and the issue was due to the wonderful Apple EditButton(). While using .onChange the code was syncing using Harmony on both changes of said wrapped value. I believe I have fixed it by implementing a designated Save button which eliminates that and adds more control to said view.

                Button {
                    withAnimation {
                        isEditing.toggle()
                    }
                    if isEditing {
                        Task {
                            #warning("Save after editing.")
                            try await harmony.save(record: entry)
                        }
                    }
                } label: {
                    Text(isEditing ? "Save" : "Edit")
                }

This is how I am passing said data now which seems to work just fine...

// List View
       ForEach(entries, id: \.self) { entry in
           EntryListItem(entry: entry)
               .overlay {
                   NavigationLink {
                       SelectedEntryView(entry: entry)
                   } label: {
                       EmptyView()
                   }
                   .opacity(0)
               }
       }

// Selected Entry View
@State var entry: Entries

The next hurdle for me to figure out is how to properly handle my @Query as I need to use it in two different views. One view displays all journal entries, the other is going to offer the user to select a timeframe such as 7 days, 30 days, 6 months. Any advice on the best method to handle this?

[groue]

I believe I have fixed it

Well done :)

The next hurdle for me to figure out is how to properly handle my @Query as I need to use it in two different views. One view displays all journal entries, the other is going to offer the user to select a timeframe such as 7 days, 30 days, 6 months. Any advice on the best method to handle this?

Each @Query property accepts its own queryable type. If two distinct views need two distinct database observations, you'll better create two distinct types.

Now it is well acknowledged that some views must perform different databases queries depending on user input (a timeframe in your app). Check out https://swiftpackageindex.com/groue/grdbquery/0.8.0/documentation/grdbquery/queryableparameters