fix: chat example frontend race condition (#2219)

_examples/chat/.gitignore

@@ -5,6 +5,7 @@
 
 # testing
 /coverage
+/corpus
 
 # production
 /build

_examples/chat/package.json

@@ -4,15 +4,14 @@
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.2.3",
-    "apollo-cache-inmemory": "^1.3.11",
     "apollo-utilities": "^1.0.26",
     "graphql": "^14.0.2",
     "graphql-tag": "^2.10.0",
+    "graphql-ws": "^5.8.1",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
     "react-scripts": "^2.1.1",
     "styled-components": "^5.2.0",
-    "graphql-ws": "^5.8.1",
     "subscriptions-transport-ws": "^0.9.5"
   },
   "scripts": {

_examples/chat/src/Room.js

@@ -3,6 +3,7 @@ import gql from 'graphql-tag';
 import { useQuery, useMutation } from '@apollo/client';
 import { Chat, ChatContainer, Message, MessageReceived } from './components/room';
 
+let queuedMessages = []
 export const Room = ({ channel, name }) => {
     const messagesEndRef = useRef(null)
     const [ text, setText ] = useState('');
@@ -13,12 +14,25 @@ export const Room = ({ channel, name }) => {
         }
     });
 
-    const { loading, error, data, subscribeToMore } = useQuery(QUERY, {
+    let { loading, error, data, subscribeToMore } = useQuery(QUERY, {
         variables: {
             channel
         },
     });
 
+    if (data && data.room) {
+        data = Object.assign({}, data, {
+            room: Object.assign({}, data.room, {
+                messages: [
+                    ...data.room.messages,
+                    ...queuedMessages.filter((queuedMessage) => (
+                        !data.room.messages.find((msg) => msg.id === queuedMessage.id)
+                    )),
+                ],
+            })
+        });
+    }
+
     // subscribe to more messages
     useEffect(() => {
         const subscription = subscribeToMore({
@@ -32,16 +46,29 @@ export const Room = ({ channel, name }) => {
                     return prev;
                 }
                 const newMessage = subscriptionData.data.messageAdded;
+                if (!prev.room) {
+                    queuedMessages.push(newMessage)
+                    return prev;
+                }
 
                 if (prev.room.messages.find((msg) => msg.id === newMessage.id)) {
                     return prev
                 }
 
-                return Object.assign({}, prev, {
+                prev = Object.assign({}, prev, {
                     room: Object.assign({}, prev.room, {
-                        messages: [...prev.room.messages, newMessage],
-                    })
+                        messages: [
+                            ...prev.room.messages,
+                            ...queuedMessages.filter((queuedMessage) => (
+                                newMessage.id !== queuedMessage.id
+                                && !prev.room.messages.find((msg) => msg.id === queuedMessage.id)
+                            )),
+                            newMessage,
+                        ],
+                    }),
                 });
+                queuedMessages = [];
+                return prev;
             },
         });
 
@@ -88,8 +115,7 @@ export const Room = ({ channel, name }) => {
                         channel: channel,
                         name: name,
                     }
-                    })
-                } >
+                })}>
                 send
             </button>
         </p>

_examples/chat/src/index.js

@@ -5,8 +5,8 @@ import {
     ApolloProvider,
     HttpLink,
     split,
+    InMemoryCache,
 } from '@apollo/client';
-import { InMemoryCache } from 'apollo-cache-inmemory';
 import { WebSocketLink as ApolloWebSocketLink} from '@apollo/client/link/ws';
 import { getMainDefinition } from 'apollo-utilities';
 import { App } from './App';