BA-2234 Optimistic updates

Author: tsl-ps2

packages/components/__generated__/useMessagesListSubscription.graphql.ts

@@ -77,7 +77,7 @@ const MessagesList: FC<MessagesListProps> = ({
     }
   }, [room?.id, room?.unreadMessages?.count, currentProfile])
 
-  useMessagesListSubscription(room?.id)
+  useMessagesListSubscription(room.id, currentProfile!.id)
 
   const renderLoadingState = () => {
     if (!isLoadingNext) return <Box sx={{ height: 50 }} />

packages/components/modules/messages/MessagesList/index.tsx

@@ -3,7 +3,7 @@
 import { forwardRef } from 'react'
 
 import { useCurrentProfile } from '@baseapp-frontend/authentication'
-import { setFormRelayErrors } from '@baseapp-frontend/utils'
+import { setFormRelayErrors, useNotification } from '@baseapp-frontend/utils'
 
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
@@ -15,6 +15,7 @@ import {
   SOCIAL_UPSERT_FORM_VALIDATION_SCHEMA,
 } from '../../__shared__/constants'
 import { SocialUpsertForm } from '../../__shared__/types'
+import { MESSAGE_TYPE } from '../constants'
 import { useSendMessageMutation } from '../graphql/mutations/SendMessage'
 import { SendMessageProps } from './types'
 
@@ -76,6 +77,7 @@ let nextClientMutationId = 0
 const SendMessage = forwardRef<HTMLInputElement, SendMessageProps>(
   ({ roomId, SocialInput = DefaultSocialInput, SocialInputProps = {} }, ref) => {
     const { currentProfile } = useCurrentProfile()
+    const { sendToast } = useNotification()
 
     const form = useForm<SocialUpsertForm>({
       defaultValues: DEFAULT_SOCIAL_UPSERT_FORM_VALUES,
@@ -90,32 +92,57 @@ const SendMessage = forwardRef<HTMLInputElement, SendMessageProps>(
       const clientMutationId = nextClientMutationId.toString()
 
       const connectionID = ConnectionHandler.getConnectionID(roomId, 'chatRoom_allMessages')
+      const content = data.body
 
       commitMutation({
         variables: {
           input: {
-            content: data.body,
+            content,
             profileId: currentProfile?.id,
             roomId,
             clientMutationId,
           },
           connections: [connectionID],
         },
+        optimisticResponse: {
+          chatRoomSendMessage: {
+            message: {
+              node: {
+                id: `client:new_message:${Date.now()}`,
+                content,
+                created: new Date(Date.now()).toISOString(),
+                extraData: null,
+                messageType: MESSAGE_TYPE.user,
+                inReplyTo: null,
+                isRead: true,
+                profile: {
+                  id: currentProfile.id,
+                },
+                verb: 'SENT_MESSAGE',
+              },
+            },
+          },
+        },
         onCompleted: (response, errors) => {
           if (errors) {
             // TODO: handle errors
             console.error(errors)
+            sendToast('Your last message could not be sent. Please try again.', { type: 'error' })
           }
           const mutationErrors = response?.chatRoomSendMessage?.errors
-          setFormRelayErrors(form, mutationErrors)
-
-          if (!mutationErrors?.length) {
-            form.reset()
+          if (mutationErrors) {
+            console.log(mutationErrors)
+            setFormRelayErrors(form, mutationErrors)
+            sendToast('Your last message could not be sent. Please try again.', { type: 'error' })
           }
         },
         // TODO: handle errors
-        onError: console.error,
+        onError: (errors) => {
+          console.error(errors)
+          sendToast('Your last message could not be sent. Please try again.', { type: 'error' })
+        },
       })
+      form.reset()
     }
 
     return (

packages/components/modules/messages/SendMessage/index.tsx

@@ -5,7 +5,8 @@ import { Disposable, UseMutationConfig, graphql, useMutation } from 'react-relay
 import { SendMessageMutation } from '../../../../__generated__/SendMessageMutation.graphql'
 
 export const SendMessageMutationQuery = graphql`
-  mutation SendMessageMutation($input: ChatRoomSendMessageInput!, $connections: [ID!]!) {
+  mutation SendMessageMutation($input: ChatRoomSendMessageInput!, $connections: [ID!]!)
+  @raw_response_type {
     chatRoomSendMessage(input: $input) {
       message @prependEdge(connections: $connections) {
         node {

packages/components/modules/messages/graphql/mutations/SendMessage.ts

@@ -3,8 +3,8 @@ import { useMemo } from 'react'
 import { ConnectionHandler, graphql, useSubscription } from 'react-relay'
 
 export const newMessageSubscription = graphql`
-  subscription useMessagesListSubscription($roomId: ID!, $connections: [ID!]!) {
-    chatRoomOnNewMessage(roomId: $roomId) {
+  subscription useMessagesListSubscription($roomId: ID!, $profileId: ID!, $connections: [ID!]!) {
+    chatRoomOnNewMessage(roomId: $roomId, profileId: $profileId) {
       message @prependEdge(connections: $connections) {
         node {
           ...MessageItemFragment
@@ -17,13 +17,14 @@ export const newMessageSubscription = graphql`
   }
 `
 
-const useMessagesListSubscription = (roomId: string) => {
+const useMessagesListSubscription = (roomId: string, profileId: string) => {
   const config = useMemo(() => {
     const connectionID = ConnectionHandler.getConnectionID(roomId, 'chatRoom_allMessages')
     return {
       subscription: newMessageSubscription,
       variables: {
         roomId,
+        profileId,
         connections: [connectionID],
       },
       onError: console.error,

packages/components/modules/messages/graphql/subscriptions/useMessagesListSubscription.tsx

@@ -1648,7 +1648,7 @@ type RoleUpdatePayload {
 }
 
 type Subscription {
-  chatRoomOnNewMessage(roomId: ID!): ChatRoomOnNewMessage
+  chatRoomOnNewMessage(profileId: ID!, roomId: ID!): ChatRoomOnNewMessage
   chatRoomOnRoomUpdate(profileId: ID!): ChatRoomOnRoomUpdate
   chatRoomOnMessagesCountUpdate(profileId: ID!): ChatRoomOnMessagesCountUpdate
   onNotificationChange: OnNotificationChange