Implementing Pagination with ArkTS Using Remote Communication Kit

#api #typescript #mobile #tutorial

Read the original article：Implementing Pagination with ArkTS Using Remote Communication Kit

Introduction

When developing connected applications, fetching and displaying data from remote devices can become tricky especially when the data is large. HarmonyOS provides the Remote Communication Kit (RCK) to help developers invoke remote methods and share data between devices efficiently.

In this article, I’ll walk you through how to implement pagination in a HarmonyOS application using RCK. We’ll build a character viewer using the Game of Thrones API, allowing users to browse data page by page with Next and Previous controls. This approach ensures better performance and smoother UX by fetching data in chunks.

What is Pagination?

In simple terms, pagination is the process of dividing large datasets into smaller, more manageable pages. This improves:

Performance: Only part of the data is loaded at once.
User Experience: Users can focus on smaller sets of information.
Scalability: Reduces memory and network overhead.

What is Remote Communication Kit (RCK)?

RCK is a framework in HarmonyOS that enables devices to communicate with each other or invoke remote methods. In this project, we use RCK to fetch paginated data over HTTP from a remote API endpoint.

1️⃣ Required Imports

To get started, make sure you import the following modules:

import { rcp } from '@kit.RemoteCommunicationKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { Characters } from '../viewmodel/PaginationModel';
import { ComponentContent } from '@kit.ArkUI';

2️⃣ Define a Header Component

We’ll create a reusable header that displays the title of the page:

@Builder
function header() {
  Column() {
    Text(" Game of Thrones Characters")
      .fontSize(16)
      .fontWeight(FontWeight.Bold)
      .textAlign(TextAlign.Center)
      .margin({ bottom: 8 })
  }
}

3️⃣ Build the Pagination Component

This is the core structure where we define states, load data, and display characters.

@Entry
@Component
struct PaginationPage {
  @State private items: string = ''
  @State private currentPage: number = 1
  private readonly pageSize: number = 10
  @State chars: Characters[] = []
  context: UIContext = this.getUIContext()
  header: ComponentContent<object> = new ComponentContent(this.context, wrapBuilder(header))

4️⃣ Load Characters on aboutToAppear()

When the page appears, we call loadPage() to fetch data for the current page.

aboutToAppear(): void {
  this.loadPage()
}

5️⃣ Build the UI Layout

This part renders the refresh button, page controls, and the list of characters.

build() {
  Flex({ justifyContent: FlexAlign.Center, wrap: FlexWrap.Wrap, alignItems: ItemAlign.Center }) {
    Button("🔄 Refresh Characters") /* ... */
    Row() { /* Previous and Next buttons */ }
    Text(`📄 Characters Page ${this.currentPage}`) /* ... */
    Flex({ justifyContent: FlexAlign.Center }) {
      List() {
        ForEach(this.chars, (char: Characters) => { /* Character items */ })
      }
    }
  }
}

6️⃣ Fetch Data from Remote API

Using RCK’s session API, we perform a GET request to the Game of Thrones API:

loadPage() {
  const url = `https://anapioficeandfire.com/api/characters?page=${this.currentPage}&pageSize=${this.pageSize}`
  const request = new rcp.Request(url, 'GET')
  const session = rcp.createSession()

  session.fetch(request)
    .then((rep) => rep.toJSON() as Characters[])
    .then((data) => { this.chars = data /* ... */ })
    .catch((err) => { this.items = 'Fetch error' })
}

7️⃣ Delete a Character (Optional)

Here’s how to delete a character by ID using the DELETE method:

deletePage() {
  const characterId = 583
  const url = `https://anapioficeandfire.com/api/characters/${characterId}`
  const request = new rcp.Request(url, 'DELETE')
  const session = rcp.createSession()

  session.fetch(request)
    .then((rep) => { if (rep) this.loadPage() })
    .catch((err) => { console.error(err) })
}