Live messages caching not working in ts-sdk

Web
1

I’ve created a hook that should be receiving live messages based on a subChannelId:

export function useMessages(subChannelId: string) {
  const [data, setMessages] = useState<Amity.LiveCollection<Amity.Message>>({
    data: [],
    onNextPage: () => {},
    hasNextPage: false,
    loading: true,
  } as Amity.LiveCollection<Amity.Message>);
  const unsubscribeRef = useRef<Amity.Unsubscriber>();

  useEffect(() => {
    return liveMessages({ subChannelId }, setMessages);
  }, [subChannelId]);

  useEffect(() => {
    queryRunner(createQuery(getSubChannel, subChannelId)).then(({ data }) => {
      unsubscribeRef.current = subscribeTopic(getSubChannelTopic(data));
    });

    return unsubscribeRef.current;
  }, [subChannelId]);

  return {
    ...data,
    data: data.data.sort((a, b) => dayjs(a.createdAt).diff(b.createdAt)),
  };
}

In my app, each chat component uses this hook to fetch messages. It works for the initial query, after which the data is cached. But, when trying to retrieve the cached data, the liveMessages function doesn’t fire the callback. It seems that this line on line 110 of the liveMessages.ts file is blocking the responder.

if (messages.length > 0 && !collection?.params?.page) return;

The collection params page variable is undefined, which is causing the function to return without retrieving the cached data. I’m not sure what I’m doing wrong, perhaps a bug in the source code? Any help would be good.

2

Hey @tahmeednabi,

When calling liveMessages for the second time, you are actually trying to fetch the prevPage.
The line below, checks if there are more pages before calling the fetcher

if (messages.length > 0 && !collection?.params?.page) return;

Looking at your code, data should have messages that you have fetched already.