-
Notifications
You must be signed in to change notification settings - Fork 40
[오병훈] Sprint12 #348
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[오병훈] Sprint12 #348
The head ref may contain hidden characters: "Next-\uC624\uBCD1\uD6C8-sprint12"
Conversation
arthurkimdev
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
수고하셨습니다~ 🙏
| }; | ||
| const { data, fetchNextPage, hasNextPage, isFetching, isLoading, refetch } = | ||
| useInfiniteQuery( | ||
| ['allArticles', { orderBy, keyword }], |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이런 key 값들은 보통 queries.ts 파일 하나 생성 수 그 곳에 객체로 관리합니다.
const DEFAULT_KEY = ['']
const QUERY_KEYS = {
ALL_ARTICLES = [...DEFAULT_KEY, 'allArticles'] as const
...
}
| /> | ||
| </div> | ||
| {!loading && articles.length === 0 && ( | ||
| {!isFetching && data?.pages[0]?.list.length === 0 && ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이렇게 data?.pages[0].list 로 접근하기 보다는 변수로 만들어서 접근하면 가독성이 더 좋을 것 같아요~
const queryData = ata?.pages[0]?.list;
| if (entry.isIntersecting && hasNextPage && !isFetching) { | ||
| fetchNextPage(); | ||
| } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
사용방법에 맞춰서 잘 하셨습니다. 👍
| const { data: article = INITIAL_ARTICLE, isLoading: isArticleLoading } = | ||
| useQuery(['article', id], () => getArticles(id), { | ||
| enabled: !!id, | ||
| onError: (error) => console.error('Error fetching article:', error), | ||
| }); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
해당 쿼리 같은 경우 아래처럼 useArticle.ts 파일에 useQuery를 사용한 커스텀 훅으로 별도로 분리해서 만들게되면 재사용성도 올라가겠죠!?
const useArticle = (id: string) => {
return useQuery<Article, Error>({
queryKey: QUERY_KEYS.article(id),
queryFn: () => getArticles(id),
enabled: !!id,
...defaultOptions,
});
};
| import { QueryClient, QueryClientProvider } from 'react-query'; | ||
|
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
아래와 같은 공통 옵션들을 설정해서 넣을 수 있어요!
const defaultOptions = {
staleTime: 5 * 60 * 1000,
cacheTime: 30 * 60 * 1000,
retry: 3,
// ... 기타 공통 옵션
};
ea6e463
into
codeit-bootcamp-frontend:Next-오병훈
요구사항
주요 변경사항
'/board'페이지와 관련된 파일들을 수정했습니다.스크린샷
멘토에게