swiftuionappear

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


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

Solution

  • 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
    }