the id of the chats and messages is generated by the client, optimis…

…tic response removechat

package.json

@@ -23,6 +23,7 @@
     "@types/react-dom": "16.8.5",
     "@types/react-router-dom": "4.3.4",
     "@types/styled-components": "4.1.18",
+    "@types/uuid": "3.4.5",
     "apollo-cache-inmemory": "1.6.2",
     "apollo-client": "2.6.3",
     "apollo-link": "1.2.12",
@@ -43,7 +44,7 @@
     "styled-components": "4.3.2",
     "subscriptions-transport-ws": "0.9.16",
     "typescript": "3.5.3",
-    "@wora/apollo-offline": "0.1.1"
+    "@wora/apollo-offline": "0.1.2"
   },
   "scripts": {
     "prebuild": "yarn codegen",

src/components/ChatCreationScreen/index.tsx

@@ -8,6 +8,7 @@ import ChatCreationNavbar from './ChatCreationNavbar';
 import { History } from 'history';
 import { useAddChatMutation } from '../../graphql/types';
 import { writeChat } from '../../services/cache.service';
+import { v4 as uuid } from "uuid";
 
 // eslint-disable-next-line
 const Container = styled.div`
@@ -21,8 +22,8 @@ const StyledUsersList = styled(UsersList)`
 `;
 
 gql`
-  mutation AddChat($recipientId: ID!) {
-    addChat(recipientId: $recipientId) {
+  mutation AddChat($id: ID!, $recipientId: ID!) {
+    addChat(id: $id, recipientId: $recipientId) {
       ...Chat
     }
   }
@@ -37,20 +38,21 @@ const ChatCreationScreen: React.FC<ChildComponentProps> = ({ history }) => {
   const [addChat] = useAddChatMutation();
 
   const onUserPick = useCallback(
-    user => addChat({
+    user => {
+      const id: string = uuid();
+      addChat({
         optimisticResponse: {
           __typename: 'Mutation',
           addChat: {
             __typename: 'Chat',
-            id: Math.random()
-              .toString(36)
-              .substr(2, 9),
+            id,
             name: user.name,
             picture: user.picture,
             lastMessage: null,
           },
         },
         variables: {
+          id,
           recipientId: user.id,
         },
         update: (client, { data: { addChat } }) => {
@@ -60,7 +62,8 @@ const ChatCreationScreen: React.FC<ChildComponentProps> = ({ history }) => {
         if (result && result.data !== null) {
           history.push(`/chats/${result.data!.addChat!.id}`);
         }
-      }),
+      })
+    },
     [addChat, history]
   );
 

src/components/ChatRoomScreen/ChatNavbar.tsx

@@ -68,6 +68,10 @@ const ChatNavbar: React.FC<ChatNavbarProps> = ({ chat, history }) => {
     variables: {
       chatId: chat.id,
     },
+    optimisticResponse: {
+      __typename: 'Mutation',
+      removeChat: chat.id,
+    },
     update: (client, { data: { removeChat } }) => {
       eraseChat(client, removeChat);
     },

src/components/ChatRoomScreen/index.tsx

@@ -17,6 +17,8 @@ import {
 } from '../../graphql/types';
 import * as fragments from '../../graphql/fragments';
 import { writeMessage } from '../../services/cache.service';
+import { v4 as uuid } from "uuid";
+
 
 const Container = styled.div`
   background: url(/assets/chat-background.jpg);
@@ -37,8 +39,8 @@ const getChatQuery = gql`
 
 // eslint-disable-next-line
 const addMessageMutation = gql`
-  mutation AddMessage($chatId: ID!, $content: String!) {
-    addMessage(chatId: $chatId, content: $content) {
+  mutation AddMessage($id: ID!, $chatId: ID!, $content: String!) {
+    addMessage(id: $id, chatId: $chatId, content: $content) {
       ...Message
     }
   }
@@ -122,17 +124,16 @@ const [addMessage] = useAddMessageMutation();
         return null;
       }
       const chat = data.chat;
+      const id:string = uuid();
       if (chat === null) return null;
 
       addMessage({
-        variables: { chatId, content },
+        variables: { id, chatId, content },
         optimisticResponse: {
           __typename: 'Mutation',
           addMessage: {
             __typename: 'Message',
-            id: Math.random()
-              .toString(36)
-              .substr(2, 9),
+            id,
             createdAt: new Date(),
             isMine: true,
             chat: {

yarn.lock

@@ -1759,6 +1759,13 @@
     "@types/react-native" "*"
     csstype "^2.2.0"
 
+"@types/[email protected]":
+  version "3.4.5"
+  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-3.4.5.tgz#d4dc10785b497a1474eae0ba7f0cb09c0ddfd6eb"
+  integrity sha512-MNL15wC3EKyw1VLF+RoVO4hJJdk9t/Hlv3rt1OL65Qvuadm4BYo6g9ZJQqoq7X8NBFSsQXgAujWciovh2lpVjA==
+  dependencies:
+    "@types/node" "*"
+
 "@types/[email protected]":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@types/valid-url/-/valid-url-1.0.2.tgz#60fa435ce24bfd5ba107b8d2a80796aeaf3a8f45"
@@ -1954,10 +1961,10 @@
   dependencies:
     "@wora/cache-persist" "^1.0.2"
 
-"@wora/[email protected].1":
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/@wora/apollo-offline/-/apollo-offline-0.1.1.tgz#b83335b705317857b23b5ac1cefd6e2925c86222"
-  integrity sha512-rwkodZME7MLUXhDSbfDsyQAYSssKUhC07a7tZ05FB88Xq0XVVJ3untuFM2DwgxTsf7eDKwQaAM1XNOw+919eDw==
+"@wora/[email protected].2":
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/@wora/apollo-offline/-/apollo-offline-0.1.2.tgz#d80a23d3e8985e4db4b69e682a95ddd69d63fb7b"
+  integrity sha512-3Ydc2uPNodtiZA7Rzhu1fPKQu3UQgAz05irjnF6eT/tp0CxZBytm/kwfyP7tSeAz+u/Dw1+LiBnTBSOzle2pOg==
   dependencies:
     "@wora/apollo-cache" "^0.0.3"
     "@wora/cache-persist" "^1.1.0"