Maelstroms38 / MortyComposeKMM

GraphQL based Jetpack Compose and SwiftUI Kotlin Multiplatform project (using https://rickandmortyapi.com/graphql)

MortyComposeKMM

Rick & Morty app to demonstrate use of GraphQL + Jetpack Compose (heavily based on https://github.com/Dimillian/MortyUI). This is also a Kotlin Multiplatform project with GraphQL code in shared module (making use of Apollo library's Kotlin Multiplatform support). Right now app shows list of characters and episodes but plan is to update to show detail screens as well.

Related Posts:

• Jetpack Compose and GraphQL, a very merry combination!

The project also makes use of Jetpack Compose's Paging library that allows setting up LazyColumn for example that's driven from PagingSource as shown below (that source in our case invokes Apollo GraphQL queries).

class CharacterListsViewModel(private val repository: MortyRepository): ViewModel() {
    
    val characters: Flow<PagingData<GetCharactersQuery.Result>> = Pager(PagingConfig(pageSize = 20)) {
        CharactersDataSource(repository)
    }.flow

}

@Composable
fun CharactersListView() {
    val characterListsViewModel = getViewModel<CharacterListsViewModel>()
    val lazyCharacterList = characterListsViewModel.characters.collectAsLazyPagingItems()

    LazyColumn {
        items(lazyCharacterList) { character ->
            character?.let {
                CharactersListRowView(character)
            }
        }
    }
}

iOS App

A small SwiftUI iOS app that uses same shared Kotlin Multiplatform code is in the iosApp folder (shows Characters screen using more or less same SwiftUI code that's in https://github.com/Dimillian/MortyUI)