Inconsistent data being returned from Reactions to Comment Add and Remove Feature

SDK: "@amityco/js-sdk": "^5.1.0"
strong text
Hey Team,

I am currently facing issue with Comment Add and remove Feature.

I am getting inconsistent data and dataUpdated is being fired multiple times with various inconsitent results, and the final result is still wrong.

What do I mean by this?
For example if I like a post,i can see my reaction, but I decide to remove the like from the post, here is what happens:

  1. i click the button on the post
  2. it fires the CommentRepository.removeReaction(Id)
  3. it fires up dataUpdated 3 times, and the final result will still have my Reaction on it.

And sometimes the data is inconsistent, I still can see my Reactions but the count and reactions array are empty as below

Here is the relevant code I used, this is run in an isolated environment and no re-renders from parents:

  useEffect(() => {
    collection.current = CommentRepository.queryComments({
      referenceType: COMMENT_REFERENCE_TYPE,
      referenceId: post.id,
      last: currentLimit,
      isDeleted: false,
      filterByParentId: true,
    });

    setLoading(collection.current.loadingStatus === 'loading');

    collection.current.on('dataUpdated', (data) => {
      const curated = data.map(({ myReactions, reactions, reactionsCount }) => ({
        myReactions,
        reactions,
        reactionsCount,
      }));
      console.log('>>> dataUpdated', curated[0]);
      setComments(data); // reload comment table
      setHasMore(collection.current.hasMore);
      setLoading(false);
    });

    collection.current.on('dataError', (error) => {
      setLoading(false);
      if (error.message === 'EkoSDK: Some post not found') return;
      console.error('Comment LiveCollections can not query/get/sync data from server', { error });
    });

    return () => collection.current.dispose();
  }, [post, referenced]);
      const handleReaction = useCallback(
        async (reactionName) => {
            setIsProcessing(true);

            try {
              const addResponse = await CommentRepository.addReaction({
                commentId: amityContent.commentId,
                reactionName,
              });
              if (!addResponse) throw new Error('Cannot add Reaction');
              setReactionType(reactionName);

            } catch (e) {
              tracking.trackEvent({...              });
          } finally {
...
       }
        },
        [isProcessing, amityContent, reactionType]
      );


      const handleRemoveReaction = useCallback(
        async (ev) => {
            setIsProcessing(true);
            try {
              const removeResponse = await CommentRepository.removeReaction({
                commentId: amityContent.commentId,
                reactionName: reactionType,
              });
              if (!removeResponse) throw new Error('Cannot remove Reaction');

             setReactionType('');
            } catch (e) {
              tracking.trackEvent({ 
                 ...
              });
            } finally {
                ...
            }
          }
        },
        [isProcessing, amityContent, reactionType]
      );

Please help provide some insight on this. We are currently blocked by not being able to display the reaction count and my reactions correctly.

Any suggestion or solution is much appreciated.
Thanks

Just FYI, the issue is with only the comments, for posts everything is smooth so far

Hi @sijanshs Thank you for the inquiry, we are investigating and update the information to you soon.

1 Like

Hello,

As seen together in our session, if you could provide a minimal reproductible case, that could help us into inquirying the issue.

You can provide either a git repository or a codesandbox url up to your liking.

Hi @Julien , thanks for checking up, i tried to test this in a isolated environment, and was not able to replicate it.
I will get back if I am able to replicate.

However, i would like to know, is there some special conditions it is possible that the dataUpdated is triggered multiple times?
Is it some way to debug if it is coming from the server ?

Here is some logs, for 1 Reaction Remove, could this help identify what might be causing the multiple trigger of data?

Hey @sijanshs,

is there some special conditions it is possible that the dataUpdated is triggered multiple times?

Reactions are handled optimistically for faster time to response, so you’ll have a first event emitted from client side, and a second one emitted from the response of server as confirmation.

Is it some way to debug if it is coming from the server ?

It’s expected to have multiple events, so i’m not sure if that could help particularly identifying where it’s coming from.

could this help identify what might be causing the multiple trigger of data?

Not really ; we’d need reproducible case to be able to pinpoint where it comes from.

I’m also facing the same issue.

When I remove the reaction on comment using

 CommentRepository.removeReaction({
    commentId: 'Comment123',
    reactionName: 'like',
 })

I got multiple result (around 3 times) from the dataUpdated by

CommentRepository.queryComments({
  referenceType: 'content',
  referenceId: 'Reference123',
  last: 20,
  filterByParentId: true,
  isDeleted: false,
 });

And the reaction from result is incorrect and inconsistent.

1st result: { commentId: ‘Comment123’, myReactions: [], reactions: {}, reactionsCount: 0} (CORRECT)
2nd result: { commentId: ‘Comment123’, myReactions: [“like”], reactions: {like: 1}, reactionsCount: 1}
3rd result: { commentId: ‘Comment123’, myReactions: [“like”], reactions: {}, reactionsCount: 0}

in the end, my result got wrong data.

btw, if I reload or fetch again, the result from *dataUpdated is correct.

Hi @Kamolla, thank you for the information.
We will check again and update you soon.

Any update for my comment?

Hello @Kamolla ,

We’ve acknowledged this as a bug and are addressing the issue. We’ll propose a fix in the coming days/weeks. I’ll update you once this properly published.

Thank you for your patience,
J.

Hi @Kamolla, please allow us to update you on this issue.
We fixed it on SDK(web) version 5.4.3 and already released it last Friday(27/09/2021).

Sorry for the late update and thank you for your patience,

Thank you for the updates.

After I upgraded SDK(web) to latest version 5.5.1.

Unfortunately, the issue is still happening. when user remove reaction on comment (Using CommentRepository.removeReaction() ).

Let’s me clarify there are 2 issues:

  1. I got React re-render issue because after user clicking remove reaction, the comment has been sent 3 times by CommentRepository.queryComments() during on(‘dataUpdated’).

2.The result from on(‘dataUpdated’), each of them is inconsistent.

1st result: { commentId: ‘Comment123’, myReactions: [‘like’, ‘dislike’], reactions: { like: 1}, reactionsCount: 1}
2nd result: { commentId: ‘Comment123’, myReactions: [‘like’, ‘dislike’], reactions: {}, reactionsCount: 0}
3rd result: { commentId: ‘Comment123’, myReactions: [“like”], reactions: {}, reactionsCount: 0}

Hello @Kamolla thank you for informing us, we will check this case on our end and will get back to you asap when there is an update.