Chat JavaScript v4
Chat JavaScript
Local caching
This is the new Docs for Chat SDK v4 beta for JavaScript. To see the previous Docs, click here.

Group channel collection

A GroupChannelCollection allows you to swiftly create a channel list view that doesn’t miss any channel-related events. This page explains how to draw a view using the collection.

Note: To learn more about the differences between local caching and SyncManager, and migration, see Group channel collection.

Create a collection

You can create a groupChannelCollection instance through the createGroupChannelCollection() method. When creating the instance, you can also determine how to filter and order the group channel list.

Once the collection is created, you should call the loadMore()).

const groupChannelFilter = new GroupChannelFilter();
groupChannelFilter.includeEmpty = true;

const collection = sb.groupChannel.createGroupChannelCollection({
    filter: groupChannelFilter,
    order: GroupChannelListOrder.LATEST_LAST_MESSAGE,


A groupChannelCollection retrieves more channels to display in the channel list view through the loadMore() method.

Whenever a scroll reaches the bottom of the channel list view, the hasMore() method will first check if there are more channels to load. If true, the loadMore() method will fetch them.

The hasMore() method should also be called after you've created a groupChannelCollection.

if (collection.hasMore) {
    const channels = await collection.loadMore();

Channel events

Use groupChannelCollectionHandler to determine how the client app would react to channel-related events.

This is called whenever a new channel is created as a real-time event or changelog sync is prompted when the client app is back online.

The following table shows possible cases where each event handler can be called.

EventInvoked when


- New group channels are added to the view.
-The new group channels come from background sync, changelog sync, and real-time event.


- Group channels are updated in the view.
- The updated channels' information come from changelog sync and real-time event.


- Group channels are deleted from the view.
- The deleted channels come from changelog sync and real-time event.

const handler: GroupChannelCollectionEventHandler = {
    onChannelsAdded: (context: GroupChannelEventContext, channels: GroupChannel[]) => {
        // Add new channels to your data source.
    onChannelsUpdated: (context: GroupChannelEventContext, channels: GroupChannel[]) => {
        // Update the existing channels in your data source.
    onChannelsDeleted: (context: GroupChannelEventContext, channelUrls: string[]) => {
        // Delete the channels with the matching channelUrls from your data source.

Dispose of the collection

The dispose() method should be called when you need to clear the current channel list view.