diff --git a/_examples/chat/.gitignore b/_examples/chat/.gitignore index d30f40ef442..187e3b436fd 100644 --- a/_examples/chat/.gitignore +++ b/_examples/chat/.gitignore @@ -5,6 +5,7 @@ # testing /coverage +/corpus # production /build diff --git a/_examples/chat/package.json b/_examples/chat/package.json index c387a67eb20..56d9618e61e 100644 --- a/_examples/chat/package.json +++ b/_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": { diff --git a/_examples/chat/src/Room.js b/_examples/chat/src/Room.js index ac018d24c70..0d33697a171 100644 --- a/_examples/chat/src/Room.js +++ b/_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

diff --git a/_examples/chat/src/index.js b/_examples/chat/src/index.js index 66815636589..1b87bb1a113 100644 --- a/_examples/chat/src/index.js +++ b/_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';