RepositoryのSSoT化

モバチキ 〜Mobile Tips 共有会〜 #7
https://lycorptech-jp.connpass.com/event/345858/

レファレンス
https://proandroiddev.com/loading-initial-data-in-launchedeffect-vs-viewmodel-f1747c20ce62
https://developer.android.com/training/data-storage/room/async-queries
https://firebase.google.com/docs/reference/kotlin/com/google/firebase/firestore/Query
https://at-sushi.work/blog/7/
https://github.com/mikanIchinose/ssot-repository-sample

Transcript

1. Repository のSSoT 化 モバチキ 〜Mobile Tips 共有会〜 #7 mikan( 一瀬喜弘)
2. 自己紹介 object Mikan { val name = " 一瀬喜弘" val company = "karabiner.tech" val work = Engineer.Android val hobby = listOf( " 漫画", " アニメ", " ゲーム", " 折り紙", "OSS 開発・コントリビュート", ) }
3. UI 層におけるデータフェッチに 関する課題
4. 1. いつ開始するか
5. ViewModel.init() class LatestNewsViewModel( private val newsRepository: NewsRepository ) : ViewModel() { private val _uiState = MutableStateFlow(LatestNewsUiState.Success(emptyList())) val uiState: StateFlow<LatestNewsUiState> = _uiState init { viewModelScope.launch { newsRepository.favoriteLatestNews .collect { favoriteNews -> _uiState.value = LatestNewsUiState.Success(favoriteNews) } } } }
6. onResume class LatestNewsViewModel( private val newsRepository: NewsRepository ) : ViewModel(), DefaultLifecycleObserver { private val _uiState = MutableStateFlow(LatestNewsUiState.Success(emptyList())) val uiState: StateFlow<LatestNewsUiState> = _uiState override fun onResume(owner: LifecycleOwner) { viewModelScope.launch { newsRepository.favoriteLatestNews .collect { favoriteNews -> _uiState.value = LatestNewsUiState.Success(favoriteNews) } } } }
7. 2. 最新の状態にどうやって更新 するか
8. 副作用実行後に更新 class LatestNewsViewModel( private val newsRepository: NewsRepository ) : ViewModel(), DefaultLifecycleObserver { private val _uiState = MutableStateFlow(LatestNewsUiState.Success(emptyList())) val uiState: StateFlow<LatestNewsUiState> = _uiState fun onClickAddFavorite(newsId: String) { // お気に入り追加処理... fetchLatestnews() } private fun fetchLatestnews() { viewModelScope.launch { newsRepository.favoriteLatestNews .collect { favoriteNews -> _uiState.value = LatestNewsUiState.Success(favoriteNews) } } } }
9. onResume class LatestNewsViewModel( private val newsRepository: NewsRepository ) : ViewModel(), DefaultLifecycleObserver { private val _uiState = MutableStateFlow(LatestNewsUiState.Success(emptyList())) val uiState: StateFlow<LatestNewsUiState> = _uiState override fun onResume(owner: LifecycleOwner) { // 別の画面から復帰してきたときとかでも最新の状態を保てる fetchLatestnews() } private fun fetchLatestnews() { viewModelScope.launch { newsRepository.favoriteLatestNews .collect { favoriteNews -> _uiState.value = LatestNewsUiState.Success(favoriteNews) } } } }
10. 理想: データソースが変更を検知 して最新の状態を配信してほし い
11. ex. Room, Firestore
12. 自動更新型のデータソースを使えばこんな実装でよくなる class LatestNewsViewModel( private val newsRepository: NewsRepository ) : ViewModel(), DefaultLifecycleObserver { val uiState = newsRepository.favoriteLatestNews // 状態が更新されたら新しい値をemit する .map { LatestNewsUiState.Success(it) } // 勝手に更新処理が実行される .stateIn( viewModelScope, SharingStarted.WhileSubscribed(5_000), LatestNewsUiState.Success(emptyList()), ) } @Composable fun NewsScreen( // ... ) { val news by viewModel.uiState.collectAsStateWithLifecycle() // --------------------------- // collect し始めたタイミングで通信が始まる // ... }
13. Room や​ Firestore は​ 標準で​ サポートしてくれているが、​ 自分の​ ところの​ エンドポイントに​ そんな​ 機能などない
14. 自作します
15. @Singleton class TrendRepository @Inject internal constructor( private val apolloClient: ApolloClient, private val refreshTrigger: RefreshTrigger, ) { private var cache: TrendQuery.Data? = null fun fetchTrendData(): Flow<TrendQuery.Data> = flow { cache?.let { emit(it) } ?: run { val data = apolloClient.query(TrendQuery()).execute().dataAssertNoErrors cache = data emit(data) } refreshTrigger.refreshEvent.collect { val data = apolloClient.query(TrendQuery()).execute().dataAssertNoErrors cache = data emit(data) } } suspend fun addStar(repoId: String) { val mutation = AddStarMutation(AddStarInput(starrableId = repoId)) apolloClient.mutation(mutation).execute() refreshTrigger.refresh() } d f St ( Id St i ) {
16. REST っぽい書き方にして単純化させます ) { fun fetchTrendData(): Flow<TrendQuery.Data> = flow { val data = apolloClient.fetchTrendData() emit(data) refreshTrigger.refreshEvent.collect { val data = apolloClient.fetchTrendData() emit(data) } } suspend fun addStar(repoId: String) { apolloClient.addStar(repoId) refreshTrigger.refresh() } suspend fun removeStar(repoId: String) { apolloClient.removeStar(repoId) refreshTrigger.refresh() } suspend fun refresh() { refreshTrigger.refresh()
17. class TrendRepository @Inject internal constructor( private val apiClient: ApiClient, private val refreshTrigger: RefreshTrigger, ) { fun fetchTrendData(): Flow<TrendQuery.Data> = flow { // 初回のデータ取得 val data = apolloClient.fetchTrendData() emit(data) refreshTrigger.refreshEvent.collect { // 次回以降のデータ更新 val data = apolloClient.fetchTrendData() emit(data) } }
18. リフレッシュを誘発させるための機構としてRefreshTrigger というやつを作っています interface RefreshTrigger { val refreshEvent: Flow<Unit> suspend fun refresh() } internal class DefaultRefreshTrigger @Inject constructor() : RefreshTrigger { private val _refreshEvent = MutableSharedFlow<Unit>() override val refreshEvent: Flow<Unit> = _refreshEvent.asSharedFlow() override suspend fun refresh() { _refreshEvent.emit(Unit) } }
19. 副作用による内部からのリフレッシュ suspend fun addStar(repoId: String) { apolloClient.addStar(repoId) // 副作用発生 refreshTrigger.refresh() // リフレッシュを要求 } fun fetchTrendData(): Flow<TrendQuery.Data> = flow { val data = apolloClient.fetchTrendData() emit(data) refreshTrigger.refreshEvent.collect { // リフレッシュ開始 val data = apolloClient.fetchTrendData() emit(data) } }
20. 副作用による内部からのリフレッシュ fun fetchTrendData(): Flow<TrendQuery.Data> = flow { val data = apolloClient.fetchTrendData() emit(data) refreshTrigger.refreshEvent.collect { // リフレッシュ開始 val data = apolloClient.fetchTrendData() emit(data) } } suspend fun addStar(repoId: String) { apolloClient.addStar(repoId) // 副作用発生 refreshTrigger.refresh() // リフレッシュを要求 }
21. 副作用による外部からのリフレッシュ onClickAdd = { scope.launch { trendViewModel.addStar(it) // 副作用 myAccountViewModel.refresh() // リフレッシュ } }, onClickRemove = { scope.launch { trendViewModel.removeStar(it) // 副作用 myAccountViewModel.refresh() // リフレッシュ } }, HomeScreen( myAccountUiState = myAccountUiState, trendUiState = trendUiState, navigateToRepositoryDetail = navigateToRepositoryDetail, modifier = modifier, )
22. 課題はどう改善したのか 1. いつ開始するか collect し始めたときに通信が始まる @HiltViewModel class TrendViewModel @Inject constructor( private val trendRepository: TrendRepository ) : ViewModel() { val uiState = trendRepository.fetchTrendData() .map { TrendUiState(it, null) } .catch { emit(TrendUiState(null, Error(it))) } .stateIn( scope = viewModelScope, started = SharingStarted.WhileSubscribed(5_000), initialValue = TrendUiState.Initial ) // UI val trendUiState by trendViewModel.uiState.collectAsStateWithLifecycle()
23. 課題はどう改善したのか 2. 最新の状態にどうやって更新するか リフレッシュしたら勝手に更新される
24. まとめ リフレッシュ機構を組込むのはそこまで複雑ではなさそう 注意点 暗黙的密結合 ある副作用が異なるコンテキストのリフレッシュを誘発させたりすると結合度が上ってしまうことが知 られています(n=1) 状態の部分更新が必要になったらどうしよう? debounce? thread-safe? testable?
25. Reference https://proandroiddev.com/loading-initial-data-in-launchedeffect-vs-viewmodel-f1747c20ce62 https://developer.android.com/training/data-storage/room/async-queries https://firebase.google.com/docs/reference/kotlin/com/google/firebase/firestore/Query https://at-sushi.work/blog/7/ https://github.com/mikanIchinose/ssot-repository-sample