GraphQL based Jetpack Compose and SwiftUI Kotlin Multiplatform project

Last update: Dec 24, 2022

Overview

MortyComposeKMM

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 and is also included as one of the samples for that project.

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). (UPDATE: have started to use multiplatform-paging library for managing paging within the Kotlin Multiplatform shared code).

class CharacterListsViewModel(private val repository: MortyRepository): ViewModel() {
    
    val characters: Flow<PagingData<CharacterDetail>> = 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)

Comments

Doesn't compile on AGP `7.0.0-alpha03`

When trying to upgrade to the latest AGP, this error happens during sync:

Caused by: org.gradle.api.artifacts.UnknownConfigurationException: Configuration with name 'testApi' not found.
        at org.gradle.api.internal.artifacts.configurations.DefaultConfigurationContainer.createNotFoundException(DefaultConfigurationContainer.java:165)
        at org.gradle.api.internal.DefaultNamedDomainObjectCollection.getByName(DefaultNamedDomainObjectCollection.java:333)
        at org.gradle.api.internal.artifacts.configurations.DefaultConfigurationContainer.getByName(DefaultConfigurationContainer.java:155)
        at org.gradle.api.internal.artifacts.configurations.DefaultConfigurationContainer.getByName(DefaultConfigurationContainer.java:64)
        at org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler.add(DefaultDependencyHandler.java:120)
        at org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler.add(DefaultDependencyHandler.java:114)
        at org.jetbrains.kotlin.gradle.utils.GradleConfigurationUtilsKt.addExtendsFromRelation(gradleConfigurationUtils.kt:13)
        at org.jetbrains.kotlin.gradle.utils.GradleConfigurationUtilsKt.addExtendsFromRelation$default(gradleConfigurationUtils.kt:10)
        at org.jetbrains.kotlin.gradle.plugin.AbstractAndroidProjectHandler$addKotlinDependenciesToAndroidSourceSets$1.invoke(KotlinPlugin.kt:865)
        at org.jetbrains.kotlin.gradle.plugin.AbstractAndroidProjectHandler.addKotlinDependenciesToAndroidSourceSets(KotlinPlugin.kt:877)
        at org.jetbrains.kotlin.gradle.plugin.AbstractAndroidProjectHandler.access$addKotlinDependenciesToAndroidSourceSets(KotlinPlugin.kt:742)

Looks like an AGP/Kotlin plugin interop issue.

opened by martinbonnin 1

Convert the GraphQL schema to SDL
SDL is easier to read and more compact than Json. It can be downloaded with

./gradlew downloadApolloSchema --endpoint="https://rickandmortyapi.com/graphql" --schema="schema.sdl"
opened by martinbonnin 0
Episode does not render in SwiftUI

Hi John. I created a pull request for this but do not have permissions. If you grant me permissions I will try again.

in SwiftUI the episode number does not render. This is because episode.episode is in quotes. The fix is straightforward. In EpisodesListRowView.swift on line 13:

change Text("episode.episode") to Text(episode.episode)

opened by palmerhyde 6
Support for local cache + data change listeners

Hello and thanks for this nice sample project,

If I understand correctly, this sample uses the Apollo GraphQL client to load data from the network only. The Apollo client supports multiple types of local caches (memory, SQLite), which would make list scrolling potentially multiple times faster by utilizing the locally cached data.

The other point is regarding the use of subscription queries. I would like to automatically reload the list whenever the underlying data changes. To listen to data changes, the subscription GraphQL queries resulting in Kotlin flows are pretty simple to use. However, the Android paging library (from my understanding), does not really play well with these and the only way to refresh the paging data is to invalidate the whole paging data source, making it load everything again.

I'm interested in a sample for either one of these use cases, ideally a single solution for both of them. Has anyone else already achieved this? So far I have not been able to come up with something that works and is elegant, although I feel like there should be a way to do it.

opened by cvb941 4
[question] Domain objects based on GraphQL types

Hi! First of all, thank you for this repo. I am exploring KMM + GraphQL and this was really helpful and inspirational.

Now the question: Do you think that having repositories and UI layer relying on GraphQL types instead of regular Kotlin data classes could have limitations at some point? There is always the possibility of writing Kotlin extensions if you need anything extra, but for annotations like @Serializable, it could be an overhead.

What's your opinion? If that is the case, I'm happy to work on a PR to showcase the domain classes and how I think the mapping can work between them.

Thank you!

opened by RafaO 0

Owner

John O'Reilly

Android Software Engineer

GitHub

Odyssey it's a declarative multiplatform navigation library for Multiplatform Compose

Odyssey Odyssey it's a declarative multiplatform navigation library for Multiplatform Compose ?? WARNING! It's an early preview, so you use it with yo

168 Jan 5, 2023

Here you can try out Kotlin Multiplatform and Jetpack Compose with some other cutting-edge technologies.

wire The Wire is a Kotlin Multiplatform sample project, currently supporting Android and Windows. Tools And Technolagies Architecture: MVVM MultiThrea

9 Aug 16, 2022

android project based on declarative UI (jetpack compose)

jetpack_compose_mvvm jetpack compose Coroutines and flows Dependency Injection with Koin Library. Model View Intent Architecture - MVI. Clean Architec

1 Apr 8, 2022

A simple authentication application using Jetpack compose to illustrate signin and sign up using Mvvm, Kotlin and jetpack compose

Authentication A simple authentication application using Jetpack compose to illustrate signin and sign up using Mvvm, Kotlin and jetpack compose Scree

5 Dec 29, 2022

📱 WhatsApp clone project demonstrates modern Android development built with Jetpack Compose and Stream Chat SDK for Compose.

This is a WhatsApp clone app built with Jetpack Compose and Stream Chat SDK for Compose. The purpose of this repository is to demonstrate below: Imple

689 Dec 25, 2022

A Sudoku game for Android & Desktop written with Jetpack Compose Multiplatform

?? Compose Arcade A sample Kotlin Multiplatform Compose Sudoku app for Android & Desktop. Most code is shared between Android & Desktop using Kotlin M

42 Dec 30, 2022

Copy of https://github.com/joreilly/MortyComposeKMM to support Android & JVM with Jetpack Compose Multiplatform

Rick&Morty with Compose Multiplatform (Android/Desktop) A copycat of https://github.com/joreilly/MortyComposeKMM to support Android & JVM with Jetpack

19 Sep 19, 2022

Compose-navigation - Set of utils to help with integrating Jetpack Compose and Jetpack's Navigation

Jetpack Compose Navigation Set of utils to help with integrating Jetpack Compose

5 Apr 5, 2022

🚀🏞💪 Collection of Images, Modifiers, utility functions for Jetpack Compose to expand and enrich displaying, manipulating, scaling, resizing, zooming, and getting cropped ImageBitmap based on selection area

Collection of Images, Modifiers, utility functions for Jetpack Compose to expand and enrich displaying, manipulating, scaling, resizing, zooming, and getting cropped ImageBitmap based on selection area, before/after image to with handle to show partial of both images and more is cooking up

207 Dec 26, 2022

Jetpack Compose Boids | Flocking Insect 🐜. bird or Fish simulation using Jetpack Compose Desktop 🚀, using Canvas API 🎨

?? ?? ?? Compose flocking Ants(boids) ?? ?? ?? Jetpack compose Boids | Flocking Insect. bird or Fish simulation using Jetpack Compose Desktop ?? , usi

38 Sep 25, 2022

A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!

Why Not Compose! A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!

186 Jan 1, 2023

Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Compose for Android App Development. Android’s modern toolkit for building native UI.

382 Jan 5, 2023

This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Compose.

JetBMICalculator This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Co

3 Dec 31, 2022

Jetpack-Compose-Demo - Instagram Profile UI using Jetpack Compose

Jetpack-Compose-Demo Instagram Profile UI using Jetpack Compose

1 Aug 11, 2022

Jetpack-compose-animations-examples - Cool animations implemented with Jetpack compose

Jetpack-compose-animations-examples This repository consists of 4 animations: St

180 Jan 2, 2023

Jetpack-compose-uis - A collection of some UIs using Jetpack Compose. built using Katalog

Jetpack Compose UIs This is a collection of some UIs using Jetpack Compose. It i

3 Dec 15, 2022

A sample project in Kotlin to demonstrate Jetpack Compose, MVVM, Coroutines, Hilt, Room, Coil, Retrofit, Moshi, Leak Canary and Repository pattern

Jetpack-Compose-Boilerplate This repository contains a sample project in Kotlin to demonstrate Jetpack Compose, MVVM, Coroutines, Hilt, Room, Coil, Re

14 Dec 12, 2022

📝 Note List app based on MVVM architecture (ViewModel, LiveData, Coroutines, Room and Jetpack Compose)

Note list app built with Jetpack Compose Download Go to the releases page to download the latest available apk. Screenshots Architecture Features Home

45 Dec 25, 2022

🔦 Showkase is an annotation-processor based Android library that helps you organize, discover, search and visualize Jetpack Compose UI elements

Showkase is an annotation-processor based Android library that helps you organize, discover, search and visualize Jetpack Compose UI elements. With minimal configuration it generates a UI browser that helps you easily find your components, colors & typography. It also renders your components in common situations like dark mode, right-to-left layouts, and scaled fonts which help in finding issues early.

1.7k Jan 2, 2023