Step 15.6: Apply MessagesResult type

src/components/ChatRoomScreen/index.tsx

@@ -27,7 +27,7 @@ const Container = styled.div`
 
 // eslint-disable-next-line
 const getChatQuery = gql`
-  query GetChat($chatId: ID!) {
+  query GetChat($chatId: ID!, $limit: Int!, $after: Float) {
     chat(chatId: $chatId) {
       ...FullChat
     }

src/graphql/fragments/fullChat.fragment.ts

@@ -1,14 +1,14 @@
 import gql from 'graphql-tag';
 import chat from './chat.fragment';
-import message from './message.fragment';
+import messagesResult from './messagesResult.fragment';
 
 export default gql`
   fragment FullChat on Chat {
     ...Chat
-    messages {
-      ...Message
+    messages(limit: $limit, after: $after) @connection(key: "messages") {
+      ...MessagesResult
     }
   }
   ${chat}
-  ${message}
+  ${messagesResult}
 `;

src/graphql/fragments/messagesResult.fragment.ts

@@ -0,0 +1,13 @@
+import gql from 'graphql-tag';
+import message from './message.fragment';
+
+export default gql`
+  fragment MessagesResult on MessagesResult {
+    cursor
+    hasMore
+    messages {
+      ...Message
+    }
+  }
+  ${message}
+`;

src/services/cache.service.ts

@@ -64,9 +64,9 @@ export const writeMessage = (client: Client, message: MessageFragment) => {
   if (fullChat === null || fullChat.messages === null) {
     return;
   }
-  if (fullChat.messages.some((m: any) => m.id === message.id)) return;
+  if (fullChat.messages.messages.some((m: any) => m.id === message.id)) return;
 
-  fullChat.messages.push(message);
+  fullChat.messages.messages.push(message);
   fullChat.lastMessage = message;
 
   client.writeFragment({