[FE] feat: useSuspendedQuery, useSuspendedInfiniteQuery 추가 #443

Leejin-Yang · 2023-08-14T09:28:12Z

Issue

close [FE] useSuspendedQuery, useSuspendedInfiniteQuery 작성 #431

✨ 구현한 기능

useSuspendedQuery, useSuspendedInfiniteQuery 추가
현재 쿼리들 전부 전환
컴포넌트 내 if문, 옵셔널 체이닝 삭제

📢 논의하고 싶은 내용

x

🎸 기타

리액트 쿼리를 사용할 때 데이터 타입이 Data | undefined로 잡혀 컴포넌트 안에서 타입 가드를 해야했습니다.
두 훅을 만들어 데이터 타입이 Data로만 잡힐 수 있게 했습니다.
자세한 내용은 코멘트에 담을게요
main 브랜치에서 나와서 작업한거 같아 다시 요청 보냅니다...........

⏰ 일정

추정 시간 : 4시간
걸린 시간 : 6시간

v0.1.0

Leejin-Yang · 2023-08-14T09:29:20Z

frontend/src/hooks/queries/useSuspendedQuery.ts

+export type UseSuspendedQueryResult<TData> = Omit<
+  UseQueryResult<TData, never>,
+  'error' | 'isLoading' | 'isError' | 'isFetching' | 'status' | 'data'
+> & { data: TData; status: 'idle' | 'success' };


suspense나 errorboundary로 위의 로딩이나 에러 상태를 잡기 때문에 반환값에서 다음 값들은 없어도 되어서 제거했습니다.

원래 data 와 status가 없는 타입인가요..?

기존에 존재하는 data와 status의 타입은 TData | undefined, idle | success | loading | error 여러 유니온 타입인데요.
로딩과 에러는 Suspense와 ErrorBoundary가 잡고 있기 때문에 해당 상태들은 없어지고 새로 타입을 지정해줘서 추가해줬어요!

github-actions · 2023-08-14T09:29:23Z

Unit Test Results

2 tests 2 ✔️ 5s ⏱️
1 suites 0 💤
1 files 0 ❌

Results for commit 5ed519e.

♻️ This comment has been updated with latest results.

Leejin-Yang · 2023-08-14T09:29:32Z

frontend/src/hooks/queries/useSuspendedQuery.ts

+export type UseSuspendedQueryResultOnIdle = UseSuspendedQueryResult<undefined> & {
+  status: 'idle';
+  isSuccess: false;
+  isIdle: true;
+};


리액트 쿼리에서 idle 상태는 쿼리가 실행되지 않거나 준비되지 않은 상태입니다. 데이터 요청을 하지 않아 데이터가 undefined입니다.

Leejin-Yang · 2023-08-14T09:29:46Z

frontend/src/hooks/queries/useSuspendedQuery.ts

+export type UseSuspendedQueryOptions<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey
+> = Omit<UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'suspense' | 'queryKey' | 'queryFn'>;


기존 쿼리 옵션 인자 타입에서 suspense와 쿼리키, 쿼리함수를 삭제했습니다. suspense는 default true로 들어갈 것이고, 키와 함수는 따로 인자로 받습니다.

따로 인자로 받아서 타입을 삭제했다는 말이 이해가 안가요

원래 옵션(useQuery 사용할 때 중괄호로 해서 넣는 부분)에 queryKey와 queryFn을 넣어서 사용했는데, 아래 구현부에서 보면 옵션에서 받는 것이 아닌 첫번째 인자, 두번째 인자로 두 값을 받고 있어서 옵션에서 해당 속성은 삭제했어요

suspense는 true로 고정할 것이기에 뺐습니다!

Leejin-Yang · 2023-08-14T09:29:57Z

frontend/src/hooks/queries/useSuspendedQuery.ts

+export type UseSuspendedQueryOptionWithoutEnabled<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey
+> = Omit<UseSuspendedQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'enabled'>;


enabled 속성은 쿼리가 데이터를 가져올지 말지 결정하는 속성인데, false로 하면 데이터를 가져오지 않고 idle 상태가 됩니다.

Leejin-Yang · 2023-08-14T09:30:16Z

frontend/src/hooks/queries/useSuspendedQuery.ts

+export function useSuspendedQuery<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey
+>(
+  queryKey: TQueryKey,
+  queryFn: QueryFunction<TQueryFnData, TQueryKey>,
+  options?: UseSuspendedQueryOptionWithoutEnabled<TQueryFnData, TError, TData, TQueryKey>
+): UseSuspendedQueryResultOnSuccess<TData>;


인자로 받는 옵션이 없다면 성공, data 타입은 TData

Leejin-Yang · 2023-08-14T09:30:32Z

frontend/src/hooks/queries/useSuspendedQuery.ts

+export function useSuspendedQuery<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey
+>(
+  queryKey: TQueryKey,
+  queryFn: QueryFunction<TQueryFnData, TQueryKey>,
+  options: UseSuspendedQueryOptionWithoutEnabled<TQueryFnData, TError, TData, TQueryKey> & { enabled?: true }
+): UseSuspendedQueryResultOnSuccess<TData>;


옵션이 있고 enabled가 없거나 true이면 성공, data 타입은 TData

Leejin-Yang · 2023-08-14T09:30:44Z

frontend/src/hooks/queries/useSuspendedQuery.ts

+export function useSuspendedQuery<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey
+>(
+  queryKey: TQueryKey,
+  queryFn: QueryFunction<TQueryFnData, TQueryKey>,
+  options: UseSuspendedQueryOptionWithoutEnabled<TQueryFnData, TError, TData, TQueryKey> & { enabled: false }
+): UseSuspendedQueryResultOnIdle;


enabled 속성이 false면 idle, data 타입은 undefined

Leejin-Yang · 2023-08-14T09:31:09Z

frontend/src/hooks/queries/useSuspendedQuery.ts

+export function useSuspendedQuery<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey
+>(
+  queryKey: TQueryKey,
+  queryFn: QueryFunction<TQueryFnData, TQueryKey>,
+  options?: UseSuspendedQueryOptions<TQueryFnData, TError, TData, TQueryKey>
+) {
+  return useQuery({
+    queryKey,
+    queryFn,
+    suspense: true,
+    ...options,
+  }) as UseSuspendedQueryResult<TData>;
+}


함수 구현부에요.

첫번째 인자로 쿼리키, 두번째 인자로 쿼리 함수, 세번째 인자로 옵션을 받아요. suspense는 true로 두고 enabled에 따라 반환하는 data 타입이 다르게 됩니다.

위랑 아래랑 차이점이 무엇인가요?

위랑 아래가 어떤것을 말하는건가요.??

Leejin-Yang · 2023-08-14T09:31:28Z

frontend/src/hooks/queries/useSuspendedInfiniteQuery.ts

+export type UseSuspendedInfiniteQueryResult<TData = undefined> = Omit<
+  UseInfiniteQueryResult<TData, never>,
+  'error' | 'isLoading' | 'isError' | 'isFetching' | 'status' | 'data'
+>;


useSuspendedQuery와 비슷하지만 반환값이 다르다는 차이가 있습니다

Leejin-Yang · 2023-08-14T09:31:52Z

frontend/src/hooks/queries/useSuspendedInfiniteQuery.ts

+export type UseSuspendedInfiniteQueryResultOnSuccess<TData> = UseSuspendedInfiniteQueryResult<TData> & {
+  data: InfiniteData<TData>;
+  status: 'success';
+  isSuccess: true;
+  isIdle: false;
+};


데이터의 타입도 InfiniteData로 suspended query와 달라요.

나머지 아래 내용은 동일!

Leejin-Yang · 2023-08-14T09:33:29Z

toss/slash 라이브러리를 참고했습니다.
https://slash.page/ko/libraries/react/react-query/src/hooks/usesuspendedquery.i18n/

타입스크립트 함수 오버로딩을 사용해 구현했습니다

https://www.typescriptlang.org/ko/docs/handbook/2/functions.html#function-overloads
https://tecoble.techcourse.co.kr/post/2022-10-15-function-overloading/

hae-on

와 쩌네요,,,
토스 가자

hae-on · 2023-08-14T16:44:17Z

frontend/.eslintrc.js

@@ -102,6 +102,7 @@ module.exports = {
    'import/no-unresolved': 'off',
    '@typescript-eslint/no-empty-function': 'off',
    '@typescript-eslint/ban-types': 'off',
+    'import/export': 'off',


얘는 뭐하는 친구죠??

함수 오버로딩을 사용하려면 같은 이름의 함수를 여러개 선언해야하는데 린트 에러가 나서 껐습니다 ㅎㅎ...

hae-on · 2023-08-14T16:45:44Z

frontend/src/components/Product/ProductOverviewItem/ProductOverviewItem.tsx

@@ -4,18 +4,18 @@ import styled from 'styled-components';
 import PreviewImage from '@/assets/characters.svg';

 interface ProductOverviewItemProps {
+  name: string;
+  image: string | null;


억지로 구겨넣은 '?'가 다 사라졌군요 👍

xodms0309

수고하셨습니다. 사실 UseSuspendedQuery는 이해가 잘 안가네요 나중에 설명해주시면 좋을 것 같습니다.

xodms0309 · 2023-08-15T03:15:26Z

frontend/src/hooks/queries/useSuspendedQuery.ts

+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey


이거는 무슨 뜻인가요?

기존 useQuery가 받는 타입입니다!

export function useQuery< TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey, >( options: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, ): UseQueryResult<TData, TError>

useQuery 사용할 때 제네릭 첫번째 인자로 데이터 반환 타입을 넣는 그 것입니다.

xodms0309 · 2023-08-15T05:04:29Z

frontend/src/hooks/queries/useSuspendedQuery.ts

+export type UseSuspendedQueryResult<TData> = Omit<
+  UseQueryResult<TData, never>,
+  'error' | 'isLoading' | 'isError' | 'isFetching' | 'status' | 'data'
+> & { data: TData; status: 'idle' | 'success' };


원래 data 와 status가 없는 타입인가요..?

xodms0309 · 2023-08-15T05:07:31Z

frontend/src/hooks/queries/useSuspendedQuery.ts

+export type UseSuspendedQueryOptions<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey
+> = Omit<UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'suspense' | 'queryKey' | 'queryFn'>;


따로 인자로 받아서 타입을 삭제했다는 말이 이해가 안가요

xodms0309 · 2023-08-15T05:14:15Z

frontend/src/hooks/queries/useSuspendedQuery.ts

+export function useSuspendedQuery<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey
+>(
+  queryKey: TQueryKey,
+  queryFn: QueryFunction<TQueryFnData, TQueryKey>,
+  options?: UseSuspendedQueryOptions<TQueryFnData, TError, TData, TQueryKey>
+) {
+  return useQuery({
+    queryKey,
+    queryFn,
+    suspense: true,
+    ...options,
+  }) as UseSuspendedQueryResult<TData>;
+}


위랑 아래랑 차이점이 무엇인가요?

xodms0309 · 2023-08-15T05:15:53Z

frontend/src/mocks/handlers/reviewHandlers.ts

@@ -36,7 +36,8 @@ export const reviewHandlers = [

    return res(
      ctx.status(200),
-      ctx.json({ page: sortedReviews.page, reviews: sortedReviews.reviews.slice(page * 5, (page + 1) * 5) })
+      ctx.json({ page: sortedReviews.page, reviews: sortedReviews.reviews }),


여기는 왜 바뀐건가요?

페이지가 오르고 슬라이스 해주니까 데이터가 몇개 없어서 빈배열이 오더라구요. 그래서 화면에 나타나지 않았습니다
그래서 무한스크롤을 할 때 리스트 여러개 오는지 확인하려고 뒷 부분 삭제했습니다

…ue-431-1

Leejin-Yang added 14 commits August 12, 2023 15:59

v0.1.0 (#412)

3b8eeef

v0.1.0

feat: useSuspendedQuery 추가

df9eb68

refactor: 상품 쿼리 useSuspendedQuery로 전환

8077512

refactor: 리뷰 쿼리 서스펜디드 쿼리로 전환

6090dfb

refactor: ProductOverviewItem prop 타입 수정

2732651

refactor: 리뷰 태그 서스팬디드 쿼리로 전환

6294e5f

feat: useSuspendedInfiniteQuery 추가

7904925

refactor: 상품 리뷰 useSuspendedInfiniteQuery로 전환

daf81bb

refactor: 상품 리스트 useSuspendedInfiniteQuery로 전환

387f5d2

refactor: 꿀조합 상세 useSuspendedQuery로 전환

3d540e4

refactor: 상품 검색 useSuspendedInfiniteQuery로 전환

8bb42e4

refactor: 멤버 리뷰 useSuspendedInfiniteQuery로 전환

b52d5ad

refactor: 옵셔널 삭제

91b18b9

style: 타입 임포트 수정

cd2ce6d

Leejin-Yang added 🔑 FE ✨ Feature 🔧 Refactor labels Aug 14, 2023

Leejin-Yang requested review from xodms0309 and hae-on August 14, 2023 09:28

Leejin-Yang self-assigned this Aug 14, 2023

Leejin-Yang commented Aug 14, 2023

View reviewed changes

hae-on approved these changes Aug 14, 2023

View reviewed changes

xodms0309 approved these changes Aug 15, 2023

View reviewed changes

Leejin-Yang added 3 commits August 16, 2023 11:28

Merge branch 'develop', remote-tracking branch 'origin' into feat/iss…

b9cf913

…ue-431-1

refactor: 검색 쿼리 useSuspendedInfiniteQuery로 수정

3058b11

refactor: 꿀조합 목록 쿼리 useSuspendedInfiniteQuery로 수정

5ed519e

Leejin-Yang merged commit fdebc6d into develop Aug 16, 2023
3 checks passed

Leejin-Yang deleted the feat/issue-431-1 branch August 16, 2023 02:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FE] feat: useSuspendedQuery, useSuspendedInfiniteQuery 추가 #443

[FE] feat: useSuspendedQuery, useSuspendedInfiniteQuery 추가 #443

Leejin-Yang commented Aug 14, 2023

Leejin-Yang Aug 14, 2023

xodms0309 Aug 15, 2023

Leejin-Yang Aug 15, 2023

github-actions bot commented Aug 14, 2023 •

edited

Loading

Leejin-Yang Aug 14, 2023

Leejin-Yang Aug 14, 2023

xodms0309 Aug 15, 2023

Leejin-Yang Aug 15, 2023

Leejin-Yang Aug 14, 2023

Leejin-Yang Aug 14, 2023

Leejin-Yang Aug 14, 2023

Leejin-Yang Aug 14, 2023

Leejin-Yang Aug 14, 2023

xodms0309 Aug 15, 2023

Leejin-Yang Aug 15, 2023

Leejin-Yang Aug 14, 2023 •

edited

Loading

Leejin-Yang Aug 14, 2023

Leejin-Yang commented Aug 14, 2023

hae-on left a comment

hae-on Aug 14, 2023

Leejin-Yang Aug 14, 2023

hae-on Aug 14, 2023

xodms0309 left a comment

xodms0309 Aug 15, 2023

Leejin-Yang Aug 15, 2023

xodms0309 Aug 15, 2023

xodms0309 Aug 15, 2023

xodms0309 Aug 15, 2023

xodms0309 Aug 15, 2023

Leejin-Yang Aug 15, 2023

[FE] feat: useSuspendedQuery, useSuspendedInfiniteQuery 추가 #443

[FE] feat: useSuspendedQuery, useSuspendedInfiniteQuery 추가 #443

Conversation

Leejin-Yang commented Aug 14, 2023

Issue

✨ 구현한 기능

📢 논의하고 싶은 내용

🎸 기타

⏰ 일정

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Aug 14, 2023 • edited Loading

Unit Test Results

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Leejin-Yang Aug 14, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Leejin-Yang commented Aug 14, 2023

hae-on left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

xodms0309 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Aug 14, 2023 •

edited

Loading

Leejin-Yang Aug 14, 2023 •

edited

Loading