-
Notifications
You must be signed in to change notification settings - Fork 2
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
♻️ [Refactor] Apollo 캐싱 이용 쿼리 횟수 감축 #130
Conversation
|
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.
혹시 useQuery에 같은 인자를 넣고 여러 컴포넌트에서 사용하면 요청이 여러번 발생하나요?
굳이 jotai에 넣지 않고도 가능해야할 것 같은데용
그런 방법이 없다면 지금처럼 해야겠네요
@jpham005 Props로 넘기는 것도 하다보면 방법이 있을 것 같기는 한데, Overfetching을 막을 수 있는 이점이 있는 것도 아닌데 로직만 더 복잡해질 것 같아 고민입니다. 상황을 약간 설명해드리자면, import {
AveragePassFinalMark,
ClosedTeamCount,
CurrRegisteredTeamCount,
Difficulty,
EstimateTime,
Objectives,
PastEvaluationLink,
ProjectUrl,
Skills,
UserCount,
ValidatedRate,
} from '../contents';
export const projectDetailPageDashboardContents = [
{
id: 0,
content: UserCount,
},
{
id: 1,
content: EstimateTime,
},
... const ProjectDetailPage = () => {
const { projectName } = useParams() as { projectName: string };
const setProjectDetailPageQueryAtom = useSetAtom(projectDetailPageQueryAtom);
const result = useQuery(GET_PROJECT_INFO_BY_PROJECT_NAME, {
variables: { projectName },
});
useEffect(() => {
setProjectDetailPageQueryAtom({
loading: result.loading,
error: result.error,
data: result.data,
});
}, [result, setProjectDetailPageQueryAtom]);
return (
<VStack w="100%" spacing="4rem">
<ProjectIntroduction />
<Dashboard {...useProjectDetailPageDashboard()} />
</VStack>
);
}; export const DesktopDashboard = ({ rows, contents }: DesktopDashboardProps) => {
return (
<DesktopDashboardLayout>
{rows.map(({ row, col, items }, rowIdx) => (
<DesktopDashboardRow key={rowIdx} row={row} col={col}>
{items.map(({ row, col, rowSpan, colSpan, elementId }, itemIdx) => (
<DashboardItem
key={itemIdx}
row={row}
col={col}
rowSpan={rowSpan}
colSpan={colSpan}
content={contents[elementId].content}
/>
))}
</DesktopDashboardRow>
))}
</DesktopDashboardLayout>
);
}; 이런 느낌인데, map으로 DashboardItem에 content를 집어넣는 방식이라 타입이 뭉개질 것 같습니다. |
페이지 공통 쿼리를 각 컴포넌트에서 각각 던지는 것에 대해 말씀하시는 건가요? |
ㅋㅋㅋㅋㅋㅋㅋ 한번만 가네요.... 캐싱이 되네.... 하하 너무 감사합니다! |
Summary
Jotai를 활용한 Query 횟수를 줄이는 방식을 고안하여 한 카드에 대해서만 작성해보았습니다.
Describe your changes
Query를 페이지단에서 하고 아래에서 받아보는 방법에 대해 고민을 해보았습니다.
두 방법이 있습니다.
Props로 내리는것도 불가능하진 않을 것 같은데, jotai로 했을 때의 로직이 더 깔끔한 것 같아 이걸로 작성해보았습니다.
이번 건 한번 보시고 의견 주시면 감사하겠습니다.
그리고, 해당 방식이 적용된다면 전체 페이지에 대해 변경해야 할지도 궁금합니다.
아래 링크에서 말씀하신대로 만약 가로로 긴 카드가 빠진다면 Overfetching 문제가 있을 것 같습니다. (지금은 따로 빼고 있지는 않음)
References
Issue number and link