From 18a92d11451c0a97d38557010e2ff75e5078d305 Mon Sep 17 00:00:00 2001
From: leegwae <leegwae@gmail.com>
Date: Wed, 23 Nov 2022 17:19:58 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20`Followings`=EC=97=90=EC=84=9C=20`Suspen?=
 =?UTF-8?q?se`=20=EC=A0=9C=EA=B1=B0=20#100?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

다음과 같은 문제가 있음
- `Suspense` 부모 컴포넌트도 렌더링 블록되는 문제
- 같은 레벨의 `Followers`에서 `useQuery`에 `suspense: true` 옵션 주면 다음과 같은 에러 발생

```
Uncaught Error: A component suspended while responding to synchronous input
```
---
 client/src/hooks/useFollowingsQuery.ts  | 12 +++++------
 client/src/layouts/Followings/index.tsx | 28 ++++++++++++-------------
 2 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/client/src/hooks/useFollowingsQuery.ts b/client/src/hooks/useFollowingsQuery.ts
index 3fc1e4f6..1d6cd0af 100644
--- a/client/src/hooks/useFollowingsQuery.ts
+++ b/client/src/hooks/useFollowingsQuery.ts
@@ -1,13 +1,11 @@
-import {
-  getFollowings,
-  GetFollowingsResponse,
-  GetFollowingsResult,
-} from '@apis/user';
+import type { GetFollowingsResponse, GetFollowingsResult } from '@apis/user';
+
+import { getFollowings } from '@apis/user';
 import { useQuery } from '@tanstack/react-query';
 
 import queryKeyCreator from '@/queryKeyCreator';
 
-type FollowingQueryData = {
+type FollowingsQueryData = {
   statusCode: number;
 } & GetFollowingsResult;
 
@@ -19,7 +17,7 @@ const useFollowingsQuery = (
   const query = useQuery<
     GetFollowingsResponse,
     unknown,
-    FollowingQueryData,
+    FollowingsQueryData,
     [string]
   >(key, getFollowings, {
     ...options,
diff --git a/client/src/layouts/Followings/index.tsx b/client/src/layouts/Followings/index.tsx
index 3bc4ccc9..394e3944 100644
--- a/client/src/layouts/Followings/index.tsx
+++ b/client/src/layouts/Followings/index.tsx
@@ -3,15 +3,13 @@ import SearchInput from '@components/searchInput';
 import UserList from '@components/UserList';
 import useDebouncedValue from '@hooks/useDebouncedValue';
 import useFollowingsQuery from '@hooks/useFollowingsQuery';
-import React, { useState, Suspense } from 'react';
+import React, { useState } from 'react';
 
 const Followings = () => {
   const DEBOUNCE_DELAY = 500;
   const [filter, setFilter] = useState('');
   const debouncedFilter = useDebouncedValue(filter, DEBOUNCE_DELAY);
-  const followingsQuery = useFollowingsQuery(debouncedFilter, {
-    suspense: true,
-  });
+  const followingsQuery = useFollowingsQuery(debouncedFilter);
 
   return (
     <div>
@@ -22,17 +20,17 @@ const Followings = () => {
           placeholder="검색하기"
         />
       </div>
-      <Suspense fallback={<div>loading...</div>}>
-        {followingsQuery.data?.followings.length ? (
-          <UserList>
-            {followingsQuery.data.followings.map((user) => (
-              <FollowingUserItem key={user._id} user={user} />
-            ))}
-          </UserList>
-        ) : (
-          '일치하는 사용자가 없습니다.'
-        )}
-      </Suspense>
+      {followingsQuery.isLoading ? (
+        <div>loading...</div>
+      ) : followingsQuery.data?.followings.length ? (
+        <UserList>
+          {followingsQuery.data.followings.map((user) => (
+            <FollowingUserItem key={user._id} user={user} />
+          ))}
+        </UserList>
+      ) : (
+        '일치하는 사용자가 없습니다.'
+      )}
     </div>
   );
 };