fix : useScrapToggle에 낙관적 업데이트를 위해 queryKey를 넘기는 방식으로 수정 #309
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
Closed
3 tasks
…into 306-fix-toggle-scrap-bug
godhyzzang
reviewed
Nov 25, 2024
Comment on lines
-47
to
-50
| // TODO(@smosco): 외부 스크랩 할 때 setQueryData 또는 invalidate 하기 위해 정확한 queryKey가 필요함 | ||
| // null 값으로 오면 queryKey가 이상하므로 임시 방편으로 filter를 적용함 | ||
| // 다만 나중에 sort, direction, categoryId가 들어오는 경우 순서가 유지 되지 않으므로 문제 발생 | ||
| // 따라서 어디서든지 간에 default 값을 넘길 필요가 있음 |
There was a problem hiding this comment.
네넴 이제 queryKey 자체로 변경해서 서치 컴포넌트에서도 할 수 있게 되었습니다~ 아직 추가는 안했지만요!
godhyzzang
reviewed
Nov 25, 2024
Comment on lines
+92
to
110
| queryClient.setQueryData(queryKey, (old: any) => { | ||
| if (old?.data?.contents && Array.isArray(old.data.contents)) { | ||
| return { | ||
| ...old, | ||
| data: { | ||
| ...old.data, | ||
| contents: old.data.contents.map((content: any) => | ||
| content.contentId === contentId | ||
| ? { ...content, isScrapped: !isScrapped } | ||
| : content, | ||
| ), | ||
| }, | ||
| }; | ||
| } | ||
| return old; | ||
| }); | ||
| break; | ||
|
|
||
| case 'paginatedListeningPreview': |
There was a problem hiding this comment.
querykey[0]가 listeningPreview, readingPreview라는 타입을 구별하는 것이군요
godhyzzang
reviewed
Nov 25, 2024
Comment on lines
+51
to
+77
| // 경로별 queryKey 구성 | ||
| if (pathname === '/') { | ||
| // 메인 페이지 | ||
| return contentType === 'READING' | ||
| ? ['readingPreview'] | ||
| : ['listeningPreview']; | ||
| } | ||
|
|
||
| if (pathname.startsWith('/learn')) { | ||
| // 학습 페이지 | ||
| const type = pathname.includes('/reading') | ||
| ? 'paginatedReadingPreview' | ||
| : pathname.includes('/listening') | ||
| ? 'paginatedListeningPreview' | ||
| : null; | ||
|
|
||
| if (!type) { | ||
| throw new Error('Invalid path: unable to determine query type'); | ||
| } | ||
|
|
||
| return [type, page, size, sort, direction, categoryId].filter( | ||
| (item) => item !== null, | ||
| ); // 기본값(categoryId)이 null인 경우 제거 | ||
| } | ||
|
|
||
| throw new Error('Invalid path: no matching query key logic'); | ||
| }; |
There was a problem hiding this comment.
이 코드는 optimistic update가 굳이 모든 경로에 다 적용될 필요없이 내가 현재 있는 그 화면에만 적용되면 되게 만들어주는 일종의 최적화 코드군요~
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.
📄 Description of the PR
🔧 What has been changed?
📸 Screenshots / GIFs (if applicable)
✅ Checklist