홈 화면에서 쓰이는 article api를 연동합니다. #93
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
hhhminme
requested review from
brgndyy,
InSeong-So,
Siihyun and
0uizi0
as code owners
hhhminme
commented
Sep 11, 2023
Comment on lines
+3
to
+5
| export const queryKeys = { | ||
| articles: (params: ArticlesQueryParamsType) => ["articles", params] as const, | ||
| }; |
There was a problem hiding this comment.
휴먼 에러가 잦기 때문에 상수로 queryKey를 관리해주고자 합니다
|
|
||
| export const ArticleAuthorSchema = z.object({ | ||
| username: z.string(), | ||
| bio: z.nullable(z.string()), |
There was a problem hiding this comment.
api 명세에는 string이라고 되어있지만 실제 코드는 null로 내려오기때문에 nullable로 수정해줍니다.
Comment on lines
+10
to
+25
| const queryClient = getQueryClient(); | ||
|
|
||
| await queryClient.prefetchQuery( | ||
| queryKeys.articles({ | ||
| offset: DEFAULT_ARTICLES_OFFSET, | ||
| limit: DEFAULT_ARTICLES_LIMIT, | ||
| }), | ||
| () => | ||
| http.get({ | ||
| url: `/articles?offset=${DEFAULT_ARTICLES_OFFSET}&limit=${DEFAULT_ARTICLES_LIMIT}`, | ||
| schema: ArticlesResponseSchema, | ||
| }) | ||
| ); | ||
|
|
||
| const dehydrateState = dehydrate(queryClient); | ||
|
|
There was a problem hiding this comment.
rsc에서 prefeching 하는 로직입니다.
차후 개발할 컴포넌트에서는 해당 rsc에서 prefetching 한 캐시를 끌어다가 바로 보여줍니다.
Comment on lines
+12
to
+31
| export const httpErrorHandler = (e: unknown, statusCode?: number): never => { | ||
| switch (statusCode) { | ||
| case 400: | ||
| throw new Error(HTTP_ERRORS.BAD_REQUEST); | ||
| case 401: | ||
| throw new Error(HTTP_ERRORS.UNAUTHORIZED); | ||
| case 403: | ||
| throw new Error(HTTP_ERRORS.FORBIDDEN); | ||
| case 404: | ||
| throw new Error(HTTP_ERRORS.NOT_FOUND); | ||
| case 500: | ||
| throw new Error(HTTP_ERRORS.INTERNAL_SERVER_ERROR); | ||
| default: | ||
| if (e instanceof ZodError) { | ||
| throw new Error(`유효성 검사 오류`); | ||
| } else { | ||
| throw new Error(`HTTP 오류`); | ||
| } | ||
| } | ||
| }; |
There was a problem hiding this comment.
데이터 통신때 쓰이는 공통 에러 핸들러 입니다.
zodError를 통해 스키마가 변경되거나 다른 점을 파악합니다.
fetch는 직접 promise error 를 던지지 않기 때문에 tanstack query에서 사용할 수 있도록 에러를 직접 던져줍니다.
https://tanstack.com/query/v4/docs/react/guides/query-functions
There was a problem hiding this comment.
전 단순히 fetch 내에서 res.ok 를 활용했었는데 하나 배웠습니다!
Comment on lines
+38
to
+40
| if (accessToken) { | ||
| headers.Authorization = `Bearer ${accessToken}`; | ||
| } |
There was a problem hiding this comment.
아직 로그인을 구현하지 않아서 차후 jwt로 수정해볼 예정입니다.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
📌 이슈 링크
📖 작업 배경
🛠️ 구현 내용
💡 참고사항
🖼️ 스크린샷
💡 리뷰 노트
에러 위임에 대해 공통 데이터 페칭 함수를 만들며 고민해볼 수 있었어요. 저는 tanstack query 를 사용하기 때문에 useQuery로부터 반환한 error property를 가장 가까운 컴포넌트의 Error boundary가 위임하여 전파되지 않도록 구성해보기로 결정했습니다.
일단 이렇게 하는게 가장 좋다고 생각한 이유는 오류 때문에 다른 부분에 영향을 받지 않는걸 중요하게 생각했습니다. 예전에 회사에서 아주 작은 컴포넌트에서 null값을 접근해서 웹 페이지 하나가 안나온 끔찍한 일이 있었습니다 하하 ㅎ
이를 위해 Fetch 함수에서 스스로 에러를 던져 tanstack query에서 에러를 감지할 수 있도록 공통 로직을 추가해주었습니다. 이렇게 고민하며 개발하니 좋긴한데 회사를 두개 다니는거 같군요