fix: 🐛 reset send message mutation

src/hooks/UseMutationWithReset.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+export const useMutationResultWithReset = <T extends {}>(
+  data: T | undefined
+): [T | undefined, () => void] => {
+  const current = React.useRef(data);
+  const latest = React.useRef(data);
+  const [, setState] = React.useState(0);
+  const clearCurrentData = () => {
+    current.current = undefined;
+    setState(state => state + 1);
+  };
+
+  if (data !== latest.current) {
+    current.current = data;
+    latest.current = data;
+  }
+
+  return [current.current, clearCurrentData];
+};

src/views/chat/ChatBubble.tsx

@@ -5,6 +5,7 @@ import { Circle } from 'react-feather';
 import ScaleLoader from 'react-spinners/ScaleLoader';
 import { useAccountState } from 'src/context/AccountContext';
 import { useSendMessageMutation } from 'src/graphql/mutations/__generated__/sendMessage.generated';
+import { useMutationResultWithReset } from 'src/hooks/UseMutationWithReset';
 import {
   chatBubbleColor,
   chatSentBubbleColor,
@@ -34,9 +35,10 @@ const SendButton = ({ amount }: SendButtonProps) => {
   const dispatch = useChatDispatch();
   const { account } = useAccountState();
 
-  const [sendMessage, { loading, data }] = useSendMessageMutation({
+  const [sendMessage, { loading, data: _data }] = useSendMessageMutation({
     onError: error => toast.error(getErrorContent(error)),
   });
+  const [data, resetMutationResult] = useMutationResultWithReset(_data);
 
   React.useEffect(() => {
     if (!loading && data && data.sendMessage >= 0) {
@@ -54,8 +56,9 @@ const SendButton = ({ amount }: SendButtonProps) => {
         userId: account.id,
         sender,
       });
+      resetMutationResult();
     }
-  }, [loading, data, amount, dispatch, sender, account]);
+  }, [loading, data, amount, dispatch, sender, account, resetMutationResult]);
 
   return (
     <SecureWrapper

src/views/chat/ChatInput.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { toast } from 'react-toastify';
 import { useAccountState } from 'src/context/AccountContext';
 import { useSendMessageMutation } from 'src/graphql/mutations/__generated__/sendMessage.generated';
+import { useMutationResultWithReset } from 'src/hooks/UseMutationWithReset';
 import { Input } from '../../components/input/Input';
 import { SingleLine } from '../../components/generic/Styled';
 import { SecureButton } from '../../components/buttons/secureButton/SecureButton';
@@ -26,9 +27,10 @@ export const ChatInput = ({
   const { sender } = useChatState();
   const dispatch = useChatDispatch();
 
-  const [sendMessage, { loading, data }] = useSendMessageMutation({
+  const [sendMessage, { loading, data: _data }] = useSendMessageMutation({
     onError: error => toast.error(getErrorContent(error)),
   });
+  const [data, resetMutationResult] = useMutationResultWithReset(_data);
 
   const [formattedMessage, contentType, tokens, canSend] = handleMessage(
     message
@@ -51,6 +53,7 @@ export const ChatInput = ({
         userId: account.id,
         sender: customSender || sender,
       });
+      resetMutationResult();
     }
   }, [
     loading,
@@ -62,6 +65,7 @@ export const ChatInput = ({
     tokens,
     account,
     dispatch,
+    resetMutationResult,
   ]);
 
   return (