SwiftUI .onAppear not firing as expected when I load a new page of visible JSON data

Question

Edited from an earlier post to include a working subset of code: I'm apparently not understanding how .onAppear works in SwiftUI with respect to Views inside of Navigation Links. I'm trying to use it to get paged JSON (in this case from the Pokemon API at pokeapi.co.

A minimal reproducible bit of code is below. As I scroll through the list, I see all of the Pokemon names for the first page print out & when I hit the last Pokemon on the page, I get the next page of JSON (I can see the # jump from 20, one page, to 40, two pages). My API call seems to be working fine & I'm loading a second page of Pokemon. I see their names appear & they print to the console when running in the simulator. However, even though the JSON is properly loaded into my list & I go from 20 to 40 Pokemon - a correct array of the first two pages - as I scroll past 40 it looks like the third page has loaded, creatures through 60 are visible in the List, but the console only occasionally shows an index name printing (also shown a sample of the output, below, note the values printing past 40 don't all show). The .onAppear doesn't seem to be firing as I expected past the 40th element, even though I can see 60 names showing up in the List. I was hoping to use .onAppear to detect when a new page needs to load & call it, but this method doesn't seem sound. Any hints why .onAppear isn't working as I expect & how I might more soundly handle recognizing when I need to load the next page of JSON? Thanks!

struct Creature: Hashable, Codable {
    var name: String
    var url: String
}
 
@MainActor
class Creatures: ObservableObject {
    private struct Returned: Codable {
        var count: Int
        var next: String?
        var results: [Creature]
    }
    
    var count = 0
    var urlString = "https://pokeapi.co/api/v2/pokemon/"
    @Published var creatureArray: [Creature] = []
    var isFetching = false
    
    func getData() async {
        guard !isFetching else { return }
        isFetching = true
        
        print(" We are accessing the url \(urlString)")
        
        // Create a URL
        guard let url = URL(string: urlString) else {
            print(" ERROR: Could not create a URL from \(urlString)")
            isFetching = false
            return
        }
        
        do {
            let (data, _) = try await URLSession.shared.data(from: url)
            if let returned = try? JSONDecoder().decode(Returned.self, from: data) {
                self.count = returned.count
                self.urlString = returned.next ?? ""
                DispatchQueue.main.async {
                    self.creatureArray = self.creatureArray + returned.results
                }
               isFetching = false
            } else {
                isFetching = false
                print(" JSON ERROR: Could not decode returned data.")
            }
        } catch {
            isFetching = false
            print(" ERROR: Could not get URL from data at \(urlString). \(error.localizedDescription)")
        }
    }
}
 
struct ContentView: View {
    @StateObject var creatures = Creatures()
    
    var body: some View {
        NavigationStack {
            List {
                ForEach(0..<creatures.creatureArray.count, id: \.self) { index in
                    NavigationLink {
                        Text(creatures.creatureArray[index].name)
                    } label: {
                        Text("\(index+1). \(creatures.creatureArray[index].name)")
                    }
                    .onAppear() {
                        print("index = \(index+1)")
                        if index == creatures.creatureArray.count-1 && creatures.urlString.hasPrefix("http") {
                            Task {
                                await creatures.getData()
                            }
                        }
                    }
                }
            }
            .toolbar {
                ToolbarItem (placement:.status) {
                    Text("\(creatures.creatureArray.count) of \(creatures.count)")
                }
            }
        }
        .task {
            await creatures.getData()
        }
    }
}

Here's a sample of the output. The triple dots simply indicate order printed as expected:

 We are accessing the url https://pokeapi.co/api/v2/pokemon/
index = 1
index = 2
index = 3

…
index = 37
index = 38
index = 39
index = 40
 We are accessing the url https://pokeapi.co/api/v2/pokemon/?offset=40&limit=20
index = 41
index = 44

Answer 1

Try my fully functional example code that fetches the pokemons data as required.

The code gets the server response with the results when the PokeListView first appears (in .task {...}). Then, as the user scrolls to the bottom of the current list, another page is fetched, until all data is presented.

The new page fetching is triggered by checking for the last creature id displayed and if more data is available. This is the crux of the paging. Note, you can adjust to trigger before the last creature is displayed.

As the user tap on any one of the creatures name, the details view is presented. As the PokeDetailsView appears, the details are fetched from the server or from cache. This alleviates the server burden.

The ApiService manages all server processing. With this approach you are not fetching all the details before hand, only as required.

Since you are fetching data from a remote server, there will be times when you will see the progress view, as it takes somethimes to download the data.

struct ContentView: View {
    @StateObject var apiService = ApiService()

    var body: some View {
        PokeListView()
            .environmentObject(apiService)
    }
}

struct PokeListView: View {
    @EnvironmentObject var apiService: ApiService
    
    var body: some View {
        NavigationStack {
            List(apiService.pokeList.results) { pokemon in
                NavigationLink(pokemon.name, value: pokemon.url)

                // check if need to paginate
                if let lastPoke = apiService.pokeList.results.last {
                    if pokemon.id == lastPoke.id && apiService.pokeList.next.hasPrefix("https") {
                        ProgressView()
                            .task {
                                do {
                                    try await apiService.getPokemonList()
                                } catch {
                                    print("---> refresh error: \(error)")
                                }
                            }
                    }
                }
 
            }
            .navigationDestination(for: String.self) { urlString in
                PokeDetailsView(urlString: urlString)
            }
        }
        .environmentObject(apiService)
        .task {
            do {
                try await apiService.getPokemonList()
            } catch{
                print(error)
            }
        }
    }
}

struct PokeDetailsView: View {
    @EnvironmentObject var apiService: ApiService
    @State var urlString: String
    @State var poky: Pokemon?
    
    var body: some View {
        VStack {
            Text(poky?.name ?? "no name")
            Text("height: \(poky?.height ?? 0)")
            // ... other info
        }
        .task {
            do {
                poky = try await apiService.getPokemon(from: urlString)
            } catch{
                print(error)
            }
        }
    }
}

class ApiService: ObservableObject {
    
    var serverUrl = "https://pokeapi.co/api/v2/pokemon?limit=20&offset=0"
    
    // the response from the server with the list of names and urls in `results`
    @Published var pokeList: PokemonList = PokemonList(count: 0, results: [])
    // dictionary store of Pokemons details [urlString:Pokemon]
    @Published var pokemonStore: [String : Pokemon] = [:]
    
    func getPokemonList() async throws {
        guard let url = URL(string: serverUrl) else { return }
        let (data, _) = try await URLSession.shared.data(from: url)
        Task{@MainActor in
            let morePoke = try JSONDecoder().decode(PokemonList.self, from: data)
            self.pokeList.count = morePoke.count  // <-- here
            self.pokeList.next = morePoke.next
            self.serverUrl = morePoke.next
            self.pokeList.results.append(contentsOf: morePoke.results)
        }
    }
 
    func getPokemon(from urlString: String) async throws -> Pokemon? {
        if let poky = pokemonStore[urlString] {
            // if already have it
            return poky
        } else {
            // fetch it from the server
            guard let url = URL(string: urlString) else { return nil }
            let (data, _) = try await URLSession.shared.data(from: url)
            do {
                let poky = try JSONDecoder().decode(Pokemon.self, from: data)
                Task{@MainActor in
                    // store it for later use
                    pokemonStore[urlString] = poky
                }
                return poky
            } catch {
                return nil
            }
        }
    }
    
}

// MARK: - PokemonList
struct PokemonList: Codable {
    var count: Int  // <-- here 
    var next: String
    var results: [ListItem]  // <-- don't use the word Result
    
    init(count: Int, results: [ListItem], next: String = "") {
        self.count = count
        self.results = results
        self.next = next
    }
}

// MARK: - ListItem
struct ListItem: Codable, Identifiable {
    let id = UUID()
    let name: String
    let url: String
    enum CodingKeys: String, CodingKey {
        case name, url
    }
}

struct HeldItem: Codable {
    let item: Species
    let versionDetails: [VersionDetail]
    
    enum CodingKeys: String, CodingKey {
        case item
        case versionDetails = "version_details"
    }
}

struct VersionDetail: Codable {
    let rarity: Int
    let version: Species
}

// MARK: - Pokemon
struct Pokemon: Codable, Identifiable {
    let abilities: [Ability]
    let baseExperience: Int
    let forms: [Species]
    let gameIndices: [GameIndex]
    let height: Int
    let heldItems: [HeldItem]
    let id: Int
    let isDefault: Bool
    let locationAreaEncounters: String
    let moves: [Move]
    let name: String
    let order: Int
    let pastTypes: [String]
    let species: Species
    let sprites: Sprites
    let stats: [Stat]
    let types: [TypeElement]
    let weight: Int
    
    enum CodingKeys: String, CodingKey {
        case abilities
        case baseExperience = "base_experience"
        case forms
        case gameIndices = "game_indices"
        case height
        case heldItems = "held_items"
        case id
        case isDefault = "is_default"
        case locationAreaEncounters = "location_area_encounters"
        case moves, name, order
        case pastTypes = "past_types"
        case species, sprites, stats, types, weight
    }
}

// MARK: - Ability
struct Ability: Codable {
    let ability: Species
    let isHidden: Bool
    let slot: Int
    
    enum CodingKeys: String, CodingKey {
        case ability
        case isHidden = "is_hidden"
        case slot
    }
}

// MARK: - Species
struct Species: Codable {
    let name: String
    let url: String
}

// MARK: - GameIndex
struct GameIndex: Codable {
    let gameIndex: Int
    let version: Species
    
    enum CodingKeys: String, CodingKey {
        case gameIndex = "game_index"
        case version
    }
}

// MARK: - Move
struct Move: Codable {
    let move: Species
    let versionGroupDetails: [VersionGroupDetail]
    
    enum CodingKeys: String, CodingKey {
        case move
        case versionGroupDetails = "version_group_details"
    }
}

// MARK: - VersionGroupDetail
struct VersionGroupDetail: Codable {
    let levelLearnedAt: Int
    let moveLearnMethod, versionGroup: Species
    
    enum CodingKeys: String, CodingKey {
        case levelLearnedAt = "level_learned_at"
        case moveLearnMethod = "move_learn_method"
        case versionGroup = "version_group"
    }
}

// MARK: - GenerationV
struct GenerationV: Codable {
    let blackWhite: Sprites
    
    enum CodingKeys: String, CodingKey {
        case blackWhite = "black-white"
    }
}

// MARK: - GenerationIv
struct GenerationIv: Codable {
    let diamondPearl, heartgoldSoulsilver, platinum: Sprites
    
    enum CodingKeys: String, CodingKey {
        case diamondPearl = "diamond-pearl"
        case heartgoldSoulsilver = "heartgold-soulsilver"
        case platinum
    }
}

// MARK: - Versions
struct Versions: Codable {
    let generationI: GenerationI
    let generationIi: GenerationIi
    let generationIii: GenerationIii
    let generationIv: GenerationIv
    let generationV: GenerationV
    let generationVi: [String: Home]
    let generationVii: GenerationVii
    let generationViii: GenerationViii
    
    enum CodingKeys: String, CodingKey {
        case generationI = "generation-i"
        case generationIi = "generation-ii"
        case generationIii = "generation-iii"
        case generationIv = "generation-iv"
        case generationV = "generation-v"
        case generationVi = "generation-vi"
        case generationVii = "generation-vii"
        case generationViii = "generation-viii"
    }
}

// MARK: - Sprites
class Sprites: Codable {
    let backDefault: String
    let backFemale: String?
    let backShiny: String
    let backShinyFemale: String?
    let frontDefault: String
    let frontFemale: String?
    let frontShiny: String
    let frontShinyFemale: String?
    let other: Other?
    let versions: Versions?
    let animated: Sprites?
    
    enum CodingKeys: String, CodingKey {
        case backDefault = "back_default"
        case backFemale = "back_female"
        case backShiny = "back_shiny"
        case backShinyFemale = "back_shiny_female"
        case frontDefault = "front_default"
        case frontFemale = "front_female"
        case frontShiny = "front_shiny"
        case frontShinyFemale = "front_shiny_female"
        case other, versions, animated
    }
    
}

// MARK: - GenerationI
struct GenerationI: Codable {
    let redBlue, yellow: RedBlue
    
    enum CodingKeys: String, CodingKey {
        case redBlue = "red-blue"
        case yellow
    }
}

// MARK: - RedBlue
struct RedBlue: Codable {
    let backDefault, backGray, backTransparent, frontDefault: String
    let frontGray, frontTransparent: String
    
    enum CodingKeys: String, CodingKey {
        case backDefault = "back_default"
        case backGray = "back_gray"
        case backTransparent = "back_transparent"
        case frontDefault = "front_default"
        case frontGray = "front_gray"
        case frontTransparent = "front_transparent"
    }
}

// MARK: - GenerationIi
struct GenerationIi: Codable {
    let crystal: Crystal
    let gold, silver: Gold
}

// MARK: - Crystal
struct Crystal: Codable {
    let backDefault, backShiny, backShinyTransparent, backTransparent: String
    let frontDefault, frontShiny, frontShinyTransparent, frontTransparent: String
    
    enum CodingKeys: String, CodingKey {
        case backDefault = "back_default"
        case backShiny = "back_shiny"
        case backShinyTransparent = "back_shiny_transparent"
        case backTransparent = "back_transparent"
        case frontDefault = "front_default"
        case frontShiny = "front_shiny"
        case frontShinyTransparent = "front_shiny_transparent"
        case frontTransparent = "front_transparent"
    }
}

// MARK: - Gold
struct Gold: Codable {
    let backDefault, backShiny, frontDefault, frontShiny: String
    let frontTransparent: String?
    
    enum CodingKeys: String, CodingKey {
        case backDefault = "back_default"
        case backShiny = "back_shiny"
        case frontDefault = "front_default"
        case frontShiny = "front_shiny"
        case frontTransparent = "front_transparent"
    }
}

// MARK: - GenerationIii
struct GenerationIii: Codable {
    let emerald: Emerald
    let fireredLeafgreen, rubySapphire: Gold
    
    enum CodingKeys: String, CodingKey {
        case emerald
        case fireredLeafgreen = "firered-leafgreen"
        case rubySapphire = "ruby-sapphire"
    }
}

// MARK: - Emerald
struct Emerald: Codable {
    let frontDefault, frontShiny: String
    
    enum CodingKeys: String, CodingKey {
        case frontDefault = "front_default"
        case frontShiny = "front_shiny"
    }
}

// MARK: - Home
struct Home: Codable {
    let frontDefault: String
    let frontFemale: String?
    let frontShiny: String
    let frontShinyFemale: String?
    
    enum CodingKeys: String, CodingKey {
        case frontDefault = "front_default"
        case frontFemale = "front_female"
        case frontShiny = "front_shiny"
        case frontShinyFemale = "front_shiny_female"
    }
}

// MARK: - GenerationVii
struct GenerationVii: Codable {
    let icons: DreamWorld
    let ultraSunUltraMoon: Home
    
    enum CodingKeys: String, CodingKey {
        case icons
        case ultraSunUltraMoon = "ultra-sun-ultra-moon"
    }
}

// MARK: - DreamWorld
struct DreamWorld: Codable {
    let frontDefault: String
    let frontFemale: String?
    
    enum CodingKeys: String, CodingKey {
        case frontDefault = "front_default"
        case frontFemale = "front_female"
    }
}

// MARK: - GenerationViii
struct GenerationViii: Codable {
    let icons: DreamWorld
}

// MARK: - Other
struct Other: Codable {
    let dreamWorld: DreamWorld
    let home: Home
    let officialArtwork: OfficialArtwork
    
    enum CodingKeys: String, CodingKey {
        case dreamWorld = "dream_world"
        case home
        case officialArtwork = "official-artwork"
    }
}

// MARK: - OfficialArtwork
struct OfficialArtwork: Codable {
    let frontDefault: String
    
    enum CodingKeys: String, CodingKey {
        case frontDefault = "front_default"
    }
}

// MARK: - Stat
struct Stat: Codable {
    let baseStat, effort: Int
    let stat: Species
    
    enum CodingKeys: String, CodingKey {
        case baseStat = "base_stat"
        case effort, stat
    }
}

// MARK: - TypeElement
struct TypeElement: Codable {
    let slot: Int
    let type: Species
}