Skip to content

Conversation

@bhoh032019
Copy link
Collaborator

@bhoh032019 bhoh032019 commented Jan 18, 2025

요구사항

주요 변경사항

  • 기존의 파일들에서 react-query를 이용할만한 부분들을 수정했습니다.
  • '/board'페이지와 관련된 파일들을 수정했습니다.

스크린샷

멘토에게

  • 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

@bhoh032019 bhoh032019 added 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. 미완성🫠 죄송합니다.. and removed 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. labels Jan 18, 2025
@arthurkimdev arthurkimdev reopened this Feb 9, 2025
Copy link
Collaborator

@arthurkimdev arthurkimdev left a 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 }],
Copy link
Collaborator

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 && (
Copy link
Collaborator

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;

Comment on lines +59 to 61
if (entry.isIntersecting && hasNextPage && !isFetching) {
fetchNextPage();
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

사용방법에 맞춰서 잘 하셨습니다. 👍

Comment on lines +43 to +47
const { data: article = INITIAL_ARTICLE, isLoading: isArticleLoading } =
useQuery(['article', id], () => getArticles(id), {
enabled: !!id,
onError: (error) => console.error('Error fetching article:', error),
});
Copy link
Collaborator

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,
  });
};

Comment on lines +5 to 6
import { QueryClient, QueryClientProvider } from 'react-query';

Copy link
Collaborator

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,
  // ... 기타 공통 옵션
};

@arthurkimdev arthurkimdev merged commit ea6e463 into codeit-bootcamp-frontend:Next-오병훈 Feb 9, 2025
1 check failed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

미완성🫠 죄송합니다..

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants