Bug · ChannelList not always up to date

[charltongroves]

Describe the bug Hello, We've released our Chat app to a bunch of users and they have all reported that sometimes new messages / Channels are not appearing in the app (in this case, ChannelList)

I believe there seems to be some issue where ChannelList isn't rerendering with the latest data. So while the app is minimised, new messages come through, but channelList ignores them and doesn't rerender.

My solution at the moment has been to implement a onRefresh for the ChannelList

additionalFlatListProps={{
                refreshing,
                onRefresh: () => {
                  setRefreshing(true);
                  ChatHelper.refreshChat(chatClient, chatUser).then(() =>
                    setRefreshing(false),
                  );
                },
              }}

This unmounts our entire chat component while we run client.disconnect() and client.setUser()

 {refreshing && <LoadingState />}
 {!refreshing && (
    <Chat client={chatClient} style={theme}>
    ...

This seems to fix it, as it forces a rerender and requery of ChannelList.

However this issue should not be happening in the first place, any ideas on how to properly fix this?

Dev environment info (please complete/provide the following information):

• Package version: ^0.6.0
• react-native or expo version: 0.61.5
• Device/Emulator (android/ios) and OS version: Android & IOS, all versions

To Reproduce Steps to reproduce the behavior:

1. Open chat on one device (i used a physical iphone 7)
2. minimise your app, and screen lock your device
3. Use another device to talk to the first device ( i used an android simulator), and create new channels
4. Open the app on the first device (iphone 7)
5. Notice that there are no new messages / channels. You have to fully close the app and reopen it to see the new messages / channels

Expected behavior ChannelList should show latest information

Additional context

Screenshots

[vishalnarkhede]

Hey @charltongroves , let me check and get back to you!!

[familywiser1]

I am also noticing the same problem whenever a user is added/removed to a channel by making a backend call (using server-side API). We have livestream channels and allow user to add/remove themself to channels by making a backend call.

I also noticed the following exception whenever a channel is updated via backend (server side API).

0, [TypeError: undefined is not an object (evaluating 'channels[channelIndex].data = Immutable(e.channel)')] Because of this exception, channel list is not updated -

channels[channelIndex].data = Immutable(e.channel);
//this set state is not called because of exception thrown by previous line
        this.setState({
          channels: [...channels],
        });

[kgstaley]

We are also having this problem regarding the ChannelList component not being most up-to-date with latest data. But Charlton's workaround would not work in our case. We have tried passing extraData through to the underlying Flatlist using the additonalFlatListProps prop to force a rerender of the list but as the other two have found, it seems as though the listener / query aren't correctly receiving and updating the dataset entirely.

[vishalnarkhede]

Hey @charltongroves @kgstaley @familywiser1 sorry for delays on this one.

Ok here is how it is supposed to work ideally:

1. App goes to background
2. After 10-15 seconds websocket connection breaks
3. App comes to foreground
4. Websocket connection recovers in client
5. client emits connection.recovered event
6. ChannelList has listener for this event. Once the event is received, we refetch/re-query the channels - https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/ChannelList.js#L356

So if you don' see updated data, that means maybe you don't ever receive connection.recovered event. Can you please confirm if you receive connection.recovered event, once your app comes back to foreground?

Way to do that would be to add listener for it on client on your side:

const client = new StreamChat(...);
client.on(''connection.recovered', () => {
    console.log('got the event "connection.recovered"');
})

[kgstaley]

Hi @vishalnarkhede, thanks for getting back. I added an event listener for the connection.recovered event type and it seems as though it never fires. Still seeing stale data / no refresh on when a user is added to a newly created conversation / new messages to channels.

I should add that we are also having a problem with stale / no refetch of data regarding switching users for the chat client. Our app also allows for multiple user accounts and switching between accounts, and that after a user switches accounts (call client.disconnect(), then await client.setUser() with new user), the data for our ChannelList does not change and still shows the stale data of the previously logged in user, as well. The only way to get fresh data for the correct user is to unmount and remount our chat component.

[vishalnarkhede]

I should add that we are also having a problem with stale / no refetch of data regarding switching users for the chat client. Our app also allows for multiple user accounts and switching between accounts, and that after a user switches accounts (call client.disconnect(), then await client.setUser() with new user), the data for our ChannelList does not change and still shows the stale data of the previously logged in user, as well. The only way to get fresh data for the correct user is to unmount and remount our chat component.

Ok that might be an issue. I will test this scenario in our sample app get back to you early next week.

Hi @vishalnarkhede, thanks for getting back. I added an event listener for the connection.recovered event type and it seems as though it never fires. Still seeing stale data / no refresh on when a user is added to a newly created conversation / new messages to channels.

Regarding this. can you provide me with some logs - that will help me debug the issue.

const client = new StreamChat(api_key, {
    logger: (type, msg, extraData) => {
        if (extraData.tags.indexOf('connection') > -1) {
            console.log(msg),
            // or reactotron.log(msg);
        }
    }
});

And then please do the steps to reproduce the issue and post here the logs :)

[kgstaley]

Ok after running it again today, everything seems to work as it should and both ChannelLists and new messages are loading appropriately. Was there something that changed on the backend for Stream that may have been the fix to this issue?

[virdesai]

closing as this seems to no longer be an issue