[compose multiplatform 中級チュートリアル6]supabaseからデータを読む

はじめに

前回はsupabaseとの接続の準備のために、アーキテクチャを整えたり、DIを導入したり、インターフェースを作成したりしました。
今回は実際にsupabaseとアプリを接続して、データを表示するところまでやっていきましょう。

supabaseのデータベースからデータを取得する処理を実装

まずは前回作った、TaskApi.ktを編集して、supabaseのデータベースからデータを取得する処理を実装します。

インターフェースを作成する

TaskApi.ktのsealed interface MessageApiを以下のように修正します。

TaskApi.kt

sealed interface TaskApi {
    suspend fun fetchAll(): List<Task>
}

実装する

次にTaskApiImplを以下のように修正します。

TaskApi.kt

internal class TaskApiImpl(
    private val client: SupabaseClient
) : TaskApi {
    private val table = client.postgrest["tasks"]
    override suspend fun fetchAll(): List<Task> {
        return table.select().decodeList()
    }
}

呼び出してみる

使えるかわからないけれど、一旦データを取得する処理を実装したので、使ってみましょう。
流れとしては、ListScreenModel内部で、データ取得処理を呼び出して、データを取得したら、ListScreenModelのtasksにデータをセットして、ListScreenに表示するようにします。
ui/List/ListScreenModel.ktを以下のように修正します。

ListScreenModel.kt

import androidx.compose.runtime.State
import androidx.compose.runtime.mutableStateOf
import cafe.adriel.voyager.core.model.ScreenModel
import cafe.adriel.voyager.core.model.coroutineScope
import co.touchlab.kermit.Logger
import kotlinx.coroutines.launch
import org.company.saikyotodo.net.Task
import org.company.saikyotodo.net.TaskApi

class ListScreenModel(
    private val taskApi: TaskApi // TaskApiのインスタンスを注入。API呼び出し用
) : ScreenModel { // VoyagerのScreenModelを継承。画面固有のロジックやデータを保持

    private val _tasks = mutableStateOf<List<Task>>(emptyList()) // タスクのリストを保持する内部状態
    val tasks: State<List<Task>> = _tasks // _tasksの公開状態。UIからアクセスされる

    init {
        coroutineScope.launch { // コルーチンを開始。非同期処理を行う
            kotlin.runCatching {
                taskApi.fetchAll() // APIを呼び出して全タスクを取得
            }.onSuccess {
                _tasks.value = it // 取得成功時、タスクリストを更新
            }.onFailure {
                Logger.e(it) { "Error while fetching tasks" } // エラー発生時、ログに記録
            }
        }
    }
}

次にListScreen内で、ListScreenModelを呼び出して、tasksを表示するようにします。
ui/List/ListScreen.ktを以下のように修正します。

ListScreen.kt

import cafe.adriel.voyager.core.screen.Screen
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import org.company.saikyotodo.di.getScreenModel
import org.company.saikyotodo.ui.Common.Composable.Category

class ListScreen(): Screen { // VoyagerのScreenインターフェースを実装。画面のコンポーザブルを提供
    @Composable
    override fun Content() {
        val screenModel = getScreenModel<ListScreenModel>() // ListScreenModelを取得
        var tasks = screenModel.tasks.value // タスクのリストをStateから取得
        val categories = listOf("バックログ", "対応中", "完了") // カテゴリのリストを定義

        Column(modifier = Modifier.padding(20.dp).fillMaxSize()) { // 縦に要素を配置するColumn
            // 各カテゴリに対して、Categoryコンポーザブルを呼び出す
            categories.forEach { category ->
                Category(category, tasks) // カテゴリとタスクを渡してUIを生成
            }
        }
    }
}

これで実行してみてください。
自分の環境だとiOSもdesktopもAndroidも動きましたが、もし何かエラーが起きたらコメントで教えていただけるとありがたいです。

まとめ

これでsupabaseとの接続が出来ました。
次の記事では、読み取りだけではなく、書き込みと更新の処理を実装して行きましょう。