GraphQL based Jetpack Compose and SwiftUI Kotlin Multiplatform project

Related tags

Jetpack Compose android kotlin graphql-client graphql swift ios apollographql multiplatform kotlin-native kotlin-multiplatform swiftui jetpack-compose hilt
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.

Related Posts:

Characters Android Screenshot

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)

Characters iOS Screenshot

Comments
  • Doesn't compile on AGP `7.0.0-alpha03`

    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

    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

    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

    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

    [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
John O'Reilly
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

Alex 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

Ali Rezaiyan 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

null 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

Felix Kariuki 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

Stream 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

Aaron Oertel 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

Grégory Lureau 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

Adam Kobus 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

Smart Tool Factory 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

Chetan Gupta 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!

Md. Mahmudul Hasan Shohag 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.

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.

MindOrks 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

BHAVNA THACKER 3 Dec 31, 2022
Jetpack-Compose-Demo - Instagram Profile UI using Jetpack Compose

Jetpack-Compose-Demo Instagram Profile UI using Jetpack Compose

omar 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

Canopas Software 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

Mori Atsushi 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

Areg Petrosyan 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

Marcos Paulo Farias 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.

Airbnb 1.7k Jan 2, 2023