SyncManager JS v1
SyncManager JS
SyncManager
JS
Home
/
SyncManager
/
JavaScript
/
Local caching

Group channel collection

A groupChannelCollection retrieves group channels from both the local cache and Sendbird server and lets you quickly create a channel list view without missing any channel-related updates. This page explains how to make a channel list view using the collection and serves as a migration guide.

Create a collection

The groupChannelCollectionis the local caching equivalent of SyncManager’s ChannelCollection. The groupChannelCollection instance can be created through the createChannelCollection() method. When creating the instance, you can also determine how to filter and order the group channel list.

Create a GroupChannelListQuery instance through the createMyGroupChannelListQuery() method and query setters. This will determine the number of channels to retrieve for the channel list.

Local cachingSyncManager
const groupChannelFilter = new sendbird.GroupChannelFilter();
groupChannelFilter.includeEmpty = INCLUDE_EMPTY;

const groupChannelCollection = sendbird.GroupChannel.createGroupChannelCollection()
  .setOrder(ORDER)
  .setFilter(groupChannelFilter)
  .setLimit(LIMIT)
  .build();

Channel events

In local caching, the groupChannelCollectionHandler is used to determine how the client app reacts to channel-related events.

The following table shows when to call each event handler.

EventDescription

onChannelAdded

- Called when a new group channel is created as a real-time event.
- New group channels are fetched by changelog sync.
- It replaces SyncManager's insert action.

onChannelUpdated

- Called when the channel information that is included in the user's current chat view is updated as a real-time event.
- Updated channel information is fetched during changelog sync.
- It replaces SyncManager's update and move actions.

onChannelDeleted

- Called when a group channel is deleted as a real-time event.
- A channel deletion event is fetched during changelog sync.
- It replaces SyncManager's remove action.

SyncManager's handler.onChannelEvent, which is used to handle real-time events, should be changed as shown in the code below.

Local cachingSyncManager
channelCollection.setGroupChannelCollectionHandler({
  onChannelsAdded: (context, channels) => {
  },
  onChannelsUpdated: (context, channels) => {
  },
  onChannelsDeleted: (context, channelUrls) => {
  },
});

List channels

SyncManager's fetch() method retrieves channels from the local cache and delivers them to the ChannelCollectionHandler instance. In local caching, the groupChannelCollection can retrieve channels through two new interfaces, hasMore() and loadMore().

By default, cached channels are listed in reverse chronological order, meaning the channel that most recently received a message appears at the top of the list. The channel order is automatically updated in the local cache when a new message arrives.

MethodDescription

hasMore()

- Checks if there are more channels to load.
- Called whenever a user scroll reaches the bottom of the channel list.

loadMore()

- If hasMore() is true, retrieves channels from the local cache to show in the channel list.
- Called whenever a user scroll reaches the bottom of the channel list.

Local cachingSyncManager
if (groupChannelCollection.hasMore) {
  groupChannelCollection.loadMore()
    .then(channels => {
      // ...
    })
    .catch(error => {
      // Handle error.
    });
}

Dispose of the collection

SyncManager's ChannelCollection has the remove() method that clears all the channels managed by the collection and stops the synchronization process of the collection.

On the other hand, local caching uses the dispose() method to clear the existing channel list. This method should be called when the user closes the channel list so that the groupChannelCollectionHandler stops making changes to the channel list view.

Local cachingSyncManager
groupChannelCollection.dispose();