尝试使用Apollo Kotlin的compose支持（第一部分）

从apollo-kotlin 3.8.0开始，添加了Jetpack Compose对Apollo查询的扩展支持，使其更易于使用。

我打算试试看使用的感觉。

进行安装

我会找一个合适的GraphQL API的示例。我会去看一下Apollo的博客文章，其中介绍了一个可以用于演示的GraphQL API。

有一个公开的API供应图鉴和动画清单的使用，真有意思。让我们尝试使用经常被使用的星球大战的API。

我将下载模式。

 ./gradlew :app:downloadApolloSchema --endpoint='https://swapi-graphql.netlify.app/.netlify/functions/index' --schema=app/src/main/graphql/schema.graphqls

DL完成后，我会简单地添加一些查询作为测试用途。

query Test {
    allFilms {
        films {
            title
        }
    }
}

考试代码

我会简单地写一个投入测试查询并显示结果的程序。

val apolloClient = ApolloClient.Builder()
    .serverUrl("https://swapi-graphql.netlify.app/.netlify/functions/index")
    .build()

@OptIn(ApolloExperimental::class)
@Composable
private fun FilmList(apolloClient: ApolloClient) {
    val response by apolloClient.query(TestQuery()).toState()
    val data = response?.data
    val exception = response?.exception

    when {
        response == null -> CircularProgressIndicator()
        exception != null || response?.hasErrors() == true -> {
            Text(text = "Error!")
        }
        data != null -> {
            FilmList(films = data.allFilms?.films ?: emptyList())
        }
    }
}

@Composable
private fun FilmList(
    films: List<TestQuery.Film?>,
    modifier: Modifier = Modifier,
) {
    LazyColumn(modifier = modifier) {
        items(items = films) { film ->
            Text(text = film?.title ?: "")
        }
    }
}

一旦这样就可以得到电影的标题列表。

由于读取状态也可以为空，因此还会显示加载指示器。

当您编写了一个混乱的查询并出现错误时，您也可以处理错误情况。

query Test {
    allFilms {
        films {
            title
        }
    }

    node(id: "aaaaaaa") { # Error!
        ... on Film {
            title
        }
    }
}

在使用上，因为库能够将其作为状态进行处理，所以通过组合的方式直接查询并传递是非常方便的。

虽然如此，考试如何进行，如何适应屏幕旋转等常见话题似乎很多。
我打算另外调查一下这些方面。

接下来，我希望能够考虑到分页的机制，因此我想看看能够如何去实现这一部分。