https://github.com/joreilly/MortyComposeKMM

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

android apollographql graphql graphql-client ios jetpack-compose kotlin kotlin-multiplatform kotlin-multiplatform-mobile kotlin-native multiplatform swift swiftui

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/joreilly/MortyComposeKMM
• Owner: joreilly
• License: apache-2.0
• Created: 2020-12-21T21:05:18.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-03-24T15:29:34.000Z (3 months ago)
• Last Synced: 2024-03-24T16:35:24.849Z (3 months ago)
• Topics: android, apollographql, graphql, graphql-client, ios, jetpack-compose, kotlin, kotlin-multiplatform, kotlin-multiplatform-mobile, kotlin-native, multiplatform, swift, swiftui
• Language: Kotlin
• Homepage:
• Size: 604 KB
• Stars: 340
• Watchers: 9
• Forks: 26
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-kotlin-multiplatform - MortyComposeKMM

README

        
# MortyCompose

![kotlin-version](https://img.shields.io/badge/kotlin-1.9.20-blue)

Kotlin Multiplatform sample that demonstrates use of GraphQL + Jetpack Compose and SwiftUI (based on https://github.com/Dimillian/MortyUI SwiftUI project).

Makes use of [Apollo library's Kotlin Multiplatform support](https://www.apollographql.com/docs/android/essentials/get-started-multiplatform/) and is also included as one of the samples for that project.

Related Posts:

* [Jetpack Compose and GraphQL, a very merry combination!](https://johnoreilly.dev/posts/jetpack-compose-graphql/)

![Characters Android Screenshot](/art/characters_screenshot.png?raw=true)

The project also makes use of Jetpack Compose's [Paging library](https://developer.android.com/jetpack/androidx/releases/paging#paging_compose_version_100_2)

that allows setting up `LazyColumn` for example that's driven from `PagingSource` as shown below (that source in our case invokes Apollo GraphQL queries). (UPDATE: have started to use [multiplatform-paging](https://github.com/kuuuurt/multiplatform-paging) library for managing paging within the Kotlin Multiplatform shared code).

```kotlin

class CharacterListsViewModel(private val repository: MortyRepository): ViewModel() {

    

    val characters: Flow> = Pager(PagingConfig(pageSize = 20)) {

        CharactersDataSource(repository)

    }.flow

}

@Composable

fun CharactersListView() {

    val characterListsViewModel = getViewModel()

    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)

![Characters iOS Screenshot](/art/characters_screenshot_ios.png?raw=true)