Step 7.3: Replace fetch() calls with Apollo useQuery()

Urigo · May 20, 2020 · c911119 · c911119
1 parent aa22ee7
commit c911119
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 42 deletions.
diff --git a/src/components/ChatRoomScreen/index.tsx b/src/components/ChatRoomScreen/index.tsx
@@ -1,5 +1,7 @@
+import gql from 'graphql-tag';
 import React from 'react';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback } from 'react';
+import { useApolloClient, useQuery } from '@apollo/react-hooks';
 import styled from 'styled-components';
 import ChatNavbar from './ChatNavbar';
 import MessageInput from './MessageInput';
@@ -13,7 +15,7 @@ const Container = styled.div`
   height: 100vh;
 `;
 
-const getChatQuery = `
+const getChatQuery = gql`
   query GetChat($chatId: ID!) {
     chat(chatId: $chatId) {
       id
@@ -52,24 +54,11 @@ const ChatRoomScreen: React.FC<ChatRoomScreenParams> = ({
   history,
   chatId,
 }) => {
-  const [chat, setChat] = useState<OptionalChatQueryResult>(null);
-
-  useMemo(async () => {
-    const body = await fetch(`${process.env.REACT_APP_SERVER_URL}/graphql`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
-        query: getChatQuery,
-        variables: { chatId },
-      }),
-    });
-    const {
-      data: { chat },
-    } = await body.json();
-    setChat(chat);
-  }, [chatId]);
+  const client = useApolloClient();
+  const { data } = useQuery<any>(getChatQuery, {
+    variables: { chatId },
+  });
+  const chat = data?.chat;
 
   const onSendMessage = useCallback(
     (content: string) => {
@@ -79,14 +68,21 @@ const ChatRoomScreen: React.FC<ChatRoomScreenParams> = ({
         id: (chat.messages.length + 10).toString(),
         createdAt: new Date(),
         content,
+        __typename: 'Chat',
       };
 
-      setChat({
-        ...chat,
-        messages: chat.messages.concat(message),
+      client.writeQuery({
+        query: getChatQuery,
+        variables: { chatId },
+        data: {
+          chat: {
+            ...chat,
+            messages: chat.messages.concat(message),
+          },
+        },
       });
     },
-    [chat]
+    [chat, chatId, client]
   );
 
   if (!chat) return null;

diff --git a/src/components/ChatsListScreen/ChatsList.tsx b/src/components/ChatsListScreen/ChatsList.tsx
@@ -2,8 +2,10 @@ import React from 'react';
 import moment from 'moment';
 import { List, ListItem } from '@material-ui/core';
 import styled from 'styled-components';
-import { useCallback, useState, useMemo } from 'react';
+import { useCallback } from 'react';
 import { History } from 'history';
+import gql from 'graphql-tag';
+import { useQuery } from '@apollo/react-hooks';
 
 const Container = styled.div`
   height: calc(100% - 56px);
@@ -57,7 +59,7 @@ const MessageDate = styled.div`
   font-size: 13px;
 `;
 
-const getChatsQuery = `
+const getChatsQuery = gql`
   query GetChats {
     chats {
       id
@@ -77,21 +79,7 @@ interface ChatsListProps {
 }
 
 const ChatsList: React.FC<ChatsListProps> = ({ history }) => {
-  const [chats, setChats] = useState<any[]>([]);
-
-  useMemo(async () => {
-    const body = await fetch(`${process.env.REACT_APP_SERVER_URL}/graphql`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ query: getChatsQuery }),
-    });
-    const {
-      data: { chats },
-    } = await body.json();
-    setChats(chats);
-  }, []);
+  const { data } = useQuery<any>(getChatsQuery);
 
   const navToChat = useCallback(
     (chat) => {
@@ -100,10 +88,15 @@ const ChatsList: React.FC<ChatsListProps> = ({ history }) => {
     [history]
   );
 
+  if (data === undefined || data.chats === undefined) {
+    return null;
+  }
+  let chats = data.chats;
+
   return (
     <Container>
       <StyledList>
-        {chats.map((chat) => (
+        {chats.map((chat: any) => (
           <StyledListItem
             key={chat.id}
             data-testid="chat"