InfiniteScrollPaginator not working as expected

[alexlopezit]

We are using the infinite scroll feature to try and get all the channels for the user.

The expected is that the ChannelList will load channels automatically.

It appears the component is not doing multiple chunk request of 30 channels at the time as when checking the network traffic, there is only one request and for some reason the API is returning only 28 channels out of 100 that my user has.

The code I used to replicate the issue is:

import React from 'react'
import { ChannelSort, StreamChat } from 'stream-chat'
import {
  Channel,
  ChannelHeader,
  ChannelList,
  Chat,
  InfiniteScrollPaginator,
  MessageInput,
  MessageList,
  Thread,
  useChannelStateContext,
  Window,
} from 'stream-chat-react'
import 'stream-chat-react/dist/css/index.css'

const appId = 'hhraee329mye'
const messagingUserId =
  '00010e42-8a60-45f9-be6e-4dda93c8683d@sk_1d8b120bc51d4ce7af222bd63f385155'

const baseFilters = {
  type: 'CHANNEL',
  members: { $in: [messagingUserId] },
  team: teamId,
}

const channelFilters = {
  ...baseFilters,
  category: 'CHANNEL',
}

const sort = {
  name: 1,
} as ChannelSort

const chatUser = {
  id: messagingUserId,
  name: 'Alex Lopez CP',
  role: 'admin',
}

const options = {
  limit: 30,
  state: true,
  watch: true,
  presence: true,
}
function App() {
  const [client, setClient] = React.useState<StreamChat | null>(null)

  React.useEffect(() => {
    const newClient = StreamChat.getInstance(appId)
    setClient(newClient)
    newClient.connectUser(chatUser, userToken)
  }, [])

  if (!client) {
    return <div>Connecting</div>
  }

  return (
    <Chat client={client} theme='team light'>
      <ChannelList
        filters={channelFilters}
        sort={sort}
        options={options}
        Paginator={InfiniteScrollPaginator}
      />
      <Channel>
        <Window>
          <ChannelHeader />
          <MessageList />
          <MessageInput />
        </Window>
        <Thread />
      </Channel>
    </Chat>
  )
}

[petyosi]

Hi @alexlopezit,

I'm afraid that the InfiniteScrollPaginator component is indeed a stale implementation that does not work correctly in the scenario you have described. It's not documented and not part of our regular regression testing.

Given the convenience (and the ubiquity) of the infinite scroll UI pattern, we are going to implement it as the default behavior for the channel list. It's in our backlog but I don't have an ETA for it.

[alexlopezit]

Thanks @petyosi , do you guys have a suggestion or work around other that us having to build a custom ChannelsList component so users can see all the channels?

[petyosi]

You may try implementing your own custom infinite scroll paginator component, following the interface of the load more one.

[artdevgame]

@alexlopezit Did you get any further with this? I'm looking to achieve the same thing.

[petyosi]

:tada: This issue has been resolved in version 10.3.0 :tada:

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot :package::rocket: