Androidx Paging Library with GraphQL

lightning talk about the new paging library

Transcript

1. How we implemented the new paging library in Spontacts Leon Füßner @leon_fuessner
2. What is paging? Loading data in small chunks
3. What we already had: - RecyclerView with ListAdapter - one initial request when starting the fragment - MVVM Architecture with databinding enabled What we needed: - Paging functionality
4. Getting started Dependencies: "com.apollographql.apollo:apollo-runtime:$apollo_version" "com.apollographql.apollo:apollo-android-support:$apollo_version" "com.apollographql.apollo:apollo-coroutines-support:$apollo_version" "androidx.paging:paging-runtime:2.1.0" Paging: Apollo Client for GraphQL Requests: apply plugin: 'com.apollographql.android'
5. Different ways of implementing
6. Components ‣ PagedList ‣ DataSource + DataSource.Factory ‣ PagedListAdapter ‣ LiveListPageBuilder ‣ ApolloClient for GraphQL (not required)
8. GraphQL Schema query GetAllGroups($cursor: String) { getAll(cursor: $cursor) { page { total nextCursor hasNextPage } groups { ...GroupField } } } fragment GroupField on Group { id title description category { id title } location { title } owner { id } }
9. DataSource abstract class GroupDataSource(val repository: GroupsRepository) : PageKeyedDataSource<String, Group>() { override fun loadInitial(params: LoadInitialParams<String>, callback: LoadInitialCallback<String, Group>) { } override fun loadAfter(params: LoadParams<String>, callback: LoadCallback<String, Group>) { } override fun loadBefore(params: LoadParams<String>, callback: LoadCallback<String, Group>) { } companion object { const val PAGE_SIZE = 10 } }
10. DataSource abstract class GroupDataSource(val repository: GroupsRepository) : PageKeyedDataSource<String, Group>() { override fun loadInitial(params: LoadInitialParams<String>, callback: LoadInitialCallback<String, Group>) { GlobalScope.launch(Dispatchers.IO) { try { val groups = fetchNetwork() callback.onResult(groups.first, null, groups.second) } catch(e: Exception) { Timber.e(e) } } } override fun loadAfter(params: LoadParams<String>, callback: LoadCallback<String, Group>) { GlobalScope.launch(Dispatchers.IO) { try { val groups = fetchNetwork(params.key) callback.onResult(groups.first, groups.second) } catch (e: Exception) { Timber.e(e) } } } override fun loadBefore(params: LoadParams<String>, callback: LoadCallback<String, Group>) { } abstract suspend fun fetchNetwork(cursor: String? = null): Pair<List<Group>, String?> companion object { const val PAGE_SIZE = 10 } }
11. DataSource class AllGroupsDataSource(repository: GroupsRepository) : GroupDataSource(repository) { override suspend fun fetchNetwork(cursor: String?): Pair<List<Group>, String?> = repository.getAllGroups(cursor) } class GroupsRepository(private val apolloClient: ApolloClient) { suspend fun getAllGroups(cursor: String? = null): Pair<List<Group>, String?> { val query: GetAllGroupsQuery = GetAllGroupsQuery.builder().cursor(cursor).build() val response = apolloClient.query(query).toDeferred().await() return Pair(response.data()?.all?.groups()?.map { it.toGroup() }.orEmpty(), response.data()?.all?.page()?.nextCursor()) } } query GetAllGroups($cursor: String) { getAll(cursor: $cursor) { page { total nextCursor hasNextPage } groups { ...GroupField } } }
12. DataSource abstract class GroupDataSource(val repository: GroupsRepository) : PageKeyedDataSource<String, Group>() { override fun loadInitial(params: LoadInitialParams<String>, callback: LoadInitialCallback<String, Group>) { GlobalScope.launch(Dispatchers.IO) { try { val groups = fetchNetwork() callback.onResult(groups.first, null, groups.second) } catch(e: Exception) { Timber.e(e) } } } override fun loadAfter(params: LoadParams<String>, callback: LoadCallback<String, Group>) { GlobalScope.launch(Dispatchers.IO) { try { val groups = fetchNetwork(params.key) callback.onResult(groups.first, groups.second) } catch (e: Exception) { Timber.e(e) } } } override fun loadBefore(params: LoadParams<String>, callback: LoadCallback<String, Group>) { } abstract suspend fun fetchNetwork(cursor: String? = null): Pair<List<Group>, String?> companion object { const val PAGE_SIZE = 10 } } List of Groups Cursor
13. DataSource.Factory class AllGroupDataSourceFactory(private val repository: GroupsRepository) : DataSource.Factory<String, Group>() { override fun create(): DataSource<String, Group> = AllGroupsDataSource(repository) }
14. Groups ViewModel class GroupsViewModel(val repository: GroupsRepository) : ViewModel() { val allGroupsDataSourceFactory = AllGroupDataSourceFactory(repository) private val pagedListConfig: PagedList.Config = PagedList.Config.Builder() .setEnablePlaceholders(false) .setPageSize(GroupDataSource.PAGE_SIZE).build() val groups: LiveData<PagedList<Group>> = LivePagedListBuilder(allGroupDataSourceFactory, pagedListConfig).build() }
15. <?xml version="1.0" encoding="utf-8"?> <layout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools"> <data> <variable name="viewModel" type="com.conceptworks.spontacts.groups.overview.GroupsViewModel" /> <import type="com.conceptworks.spontacts.groups.Status" /> <import type="android.view.View" /> </data> <androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent"> <androidx.swiperefreshlayout.widget.SwipeRefreshLayout android:id="@+id/swipe_container" android:layout_width="match_parent" android:layout_height="match_parent"> <androidx.recyclerview.widget.RecyclerView android:id="@+id/list" android:layout_width="0dp" android:layout_height="0dp" app:groupItems="@{viewModel.groups}" app:spanCount="2" app:layoutManager="androidx.recyclerview.widget.GridLayoutManager" tools:listitem="@layout/group_list_item" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"/> </androidx.swiperefreshlayout.widget.SwipeRefreshLayout> </androidx.constraintlayout.widget.ConstraintLayout>
16. Adapter: class GroupsAdapter : PagedListAdapter<Group, GroupsAdapter.GroupViewholder>(DIFF_UTIL) { override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): GroupViewholder = GroupViewholder( GroupListItemBinding.inflate( LayoutInflater.from(parent.context), parent, false ) ) override fun onBindViewHolder(holder: GroupViewholder, position: Int) { getItem(position)?.let { holder.bind(it) } } class GroupViewholder(private val binding: GroupListItemBinding) : RecyclerView.ViewHolder(binding.root) { fun bind(item: Group) { binding.group = item binding.executePendingBindings() } } companion object { val DIFF_UTIL = object : DiffUtil.ItemCallback<Group>() { override fun areItemsTheSame(oldItem: Group, newItem: Group) = oldItem == newItem override fun areContentsTheSame(oldItem: Group, newItem: Group) = oldItem == newItem } @JvmStatic @BindingAdapter("groupItems") fun RecyclerView.bindItems(items: PagedList<Group>?) { (adapter as GroupsAdapter).submitList(items) } }
17. Fragment: private val viewModel by sharedViewModel<GroupsViewModel>() private val adapter = GroupsAdapter() override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?) = OverviewGroupsFragmentBinding .inflate(inflater) .apply { lifecycleOwner = this@OverviewFragment viewModel = this@OverviewFragment.viewModel.apply { groups.observe(viewLifecycleOwner, Observer { adapter.submitList(it) }) } setHasOptionsMenu(true) list.adapter = adapter } .root MVP
18. What to display while you’re waiting for the response?
19. DataSource.Factory class AllGroupDataSourceFactory(private val repository: GroupsRepository) : DataSource.Factory<String, Group>() { val allGroupsSource = MutableLiveData<AllGroupsDataSource>() override fun create(): DataSource<String, Group> = AllGroupsDataSource(repository).apply { allGroupsSource.postValue(this) } } abstract class GroupDataSource(val repository: GroupsRepository) : PageKeyedDataSource<String, Group>() { val loadingStatus = MutableLiveData<Status>() override fun loadInitial(params: LoadInitialParams<String>, callback: LoadInitialCallback<String, Group>) { GlobalScope.launch(Dispatchers.IO) { try { loadingStatus.postValue(Status.Loading) val groups = fetchNetwork() callback.onResult(groups.first, null, groups.second) loadingStatus.postValue(Status.Success) } catch(e: Exception) { Timber.e(e) loadingStatus.postValue(Status.Error) } } } DataSource
20. <ProgressBar android:layout_width="0dp" android:layout_height="wrap_content" android:indeterminate="true" android:visibility="@{viewModel.status instanceof Status.Loading ? View.VISIBLE : View.GONE}" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> XML val status: LiveData<Status> = Transformations.switchMap(allGroupDataSourceFactory.allGroupsSource) { it.loadingStatus } ViewModel
21. What if the data is being changed? fun refresh() { allGroupDataSourceFactory.allGroupsSource.value?.invalidate() }
22. Resources that I used: https://www.raywenderlich.com/6948-paging-library-for-android-with-kotlin-creating-infinite-lists https://codelabs.developers.google.com/codelabs/android-paging https://developer.android.com/topic/libraries/architecture/paging
23. Thanks for listening! Questions?