How to `includeEmpty` for React Native GroupChannelListFragment

[Kris]

[Problem/Question]
I’m trying to customize the query for the GroupChannelListFragment so that it will includeEmpty chats. No matter what I try it seems to run into an error. The docs didn’t seem to have anything on it and I also tried asking the docs bot but their suggestions also gave errors.

Things I’ve tried:

const GroupChannelListScreen = () => {
  const navigation = useNavigation();
  const defaultQuery = GroupChannel.createMyGroupChannelListQuery({includeEmpty: true});

  return (
    <GroupChannelListFragment
      collectionCreator={{queryCreator: defaultQuery}}
      ...
    />
  );
};

  const {sdk} = useSendbirdChat();
  const defaultQuery = sdk.GroupChannel.createMyGroupChannelListQuery({includeEmpty: true});

[Kris]

Another thing I tried:

const GroupChannelListScreen = () => {
  const {sdk} = useSendbirdChat();
  function collectionCreator() {
    return sdk.groupChannel.createMyGroupChannelListQuery({
      includeEmpty: true,
    });
  }

  return (
    <GroupChannelListFragment
      collectionCreator={{queryCreator: collectionCreator}}
      ...
    />
  );
};

Error:

Possible Unhandled Promise Rejection (id: 31):
TypeError: Object is not a function

Also tried this:

const GroupChannelListFragment = createGroupChannelListFragment({
  Fragment: {
    collectionCreator: () => ({
      queryCreator: {
        includeEmpty: true,
      },
    }),
  },
});

which has no errors but doesn’t seem to show any empty channels

[rahul]

Hello @Kris ,

You can set includeEmpty to query using queryCreator or collectionCreator props in the GroupChannelListFragment.

[Kris]

@rahul Didn’t work for me:

Also tried:

And tried:

const GroupChannelListScreen = () => {
  const {sdk} = useSendbirdChat();
  const navigation = useNavigation();
  const filter = sdk.groupChannel.createMyGroupChannelListQuery({
    includeEmpty: true,
  });
  const test = () => {
    return sdk.groupChannel.createGroupChannelCollection({
      filter,
      limit: 20,
      order: 'latest_last_message',
    });
  };

  return (
    <GroupChannelListFragment
      collectionCreator={test}
      onPressCreateChannel={channelType => {
        navigation.navigate('GroupChannelCreate', {channelType});
      }}
      onPressChannel={channel => {
        navigation.navigate('GroupChannel', {channelUrl: channel.url});
      }}
    />
  );
};

Dashboard has like 5 group channels, none of which are showing. Added a console.log(query) and it didn’t even seem like that was even being hit. queryCreator doesn’t seem to be a valid prop when i click to find the reference

[Kris]

Finally figured it out HAHAH

collectionCreator={() => {
  const groupChannelFilter = new GroupChannelFilter();
  groupChannelFilter.includeEmpty = true;

  const params = {
    filter: groupChannelFilter,
    order: 'latest_last_message',
  };
  return sdk.groupChannel.createGroupChannelCollection(params);
}}