Skip to content
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

Merged
merged 2 commits into from
Jul 1, 2023

Conversation

yoopark
Copy link
Contributor

@yoopark yoopark commented Jun 30, 2023

Summary

Jotai를 활용한 Query 횟수를 줄이는 방식을 고안하여 한 카드에 대해서만 작성해보았습니다.

Describe your changes

Query를 페이지단에서 하고 아래에서 받아보는 방법에 대해 고민을 해보았습니다.

  1. jotai를 쓴다.
  2. Props로 내린다.

두 방법이 있습니다.
Props로 내리는것도 불가능하진 않을 것 같은데, jotai로 했을 때의 로직이 더 깔끔한 것 같아 이걸로 작성해보았습니다.

이번 건 한번 보시고 의견 주시면 감사하겠습니다.

그리고, 해당 방식이 적용된다면 전체 페이지에 대해 변경해야 할지도 궁금합니다.
아래 링크에서 말씀하신대로 만약 가로로 긴 카드가 빠진다면 Overfetching 문제가 있을 것 같습니다. (지금은 따로 빼고 있지는 않음)

References

그리고 지금 페이지에서 어떤 컴포넌트를 렌더링하고 안하고 이런 구분이 없는 것 같은데,
이런 경우는 graphql query를 하나로 줄이는게 낫지 않을까 싶습니다.
아무리 underfetch 가 영향이 적다곤 하지만...

Issue number and link

@yoopark yoopark added the enhancement New feature or request label Jun 30, 2023
@yoopark yoopark requested a review from jpham005 June 30, 2023 17:39
@yoopark yoopark self-assigned this Jun 30, 2023
@yoopark
Copy link
Contributor Author

yoopark commented Jun 30, 2023

- 외부에서 쿼리를 하니까, 잘하면 loading, error, !data 로직을 HOC로 뺄 수 있을 것 같기도 합니다.

- Props로 내리는 방식으로 짠다면, 아마 id - content 매핑하던 곳에 loading 컴포넌트, error 컴포넌트, !data 컴포넌트들을 어떤 걸로 할지 함께 적은 다음에 content 렌더링할 때 외부에 감싸는 방식...일 것 같네요. (대시보드 카드가 아닌 컴포넌트들을 짤 때는 오히려 복잡해질 것 같기도 하네요.

Copy link
Member

@jpham005 jpham005 left a comment

Choose a reason for hiding this comment

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

혹시 useQuery에 같은 인자를 넣고 여러 컴포넌트에서 사용하면 요청이 여러번 발생하나요?
굳이 jotai에 넣지 않고도 가능해야할 것 같은데용

그런 방법이 없다면 지금처럼 해야겠네요

@yoopark
Copy link
Contributor Author

yoopark commented Jul 1, 2023

@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를 집어넣는 방식이라 타입이 뭉개질 것 같습니다.

@yoopark
Copy link
Contributor Author

yoopark commented Jul 1, 2023

혹시 useQuery에 같은 인자를 넣고 여러 컴포넌트에서 사용하면 요청이 여러번 발생하나요?

페이지 공통 쿼리를 각 컴포넌트에서 각각 던지는 것에 대해 말씀하시는 건가요?
아마 요청이 여러번 발생할 것 같은데, 한번 해보겠습니다.

@yoopark
Copy link
Contributor Author

yoopark commented Jul 1, 2023

ㅋㅋㅋㅋㅋㅋㅋ 한번만 가네요.... 캐싱이 되네.... 하하 너무 감사합니다!

@yoopark yoopark changed the title ♻️ [Refactor] 제안: jotai 활용 쿼리 횟수 감축 ♻️ [Refactor] Apollo 캐싱 이용 쿼리 횟수 감축 Jul 1, 2023
@yoopark yoopark merged commit 8178d14 into main Jul 1, 2023
@yoopark yoopark deleted the refactor/query-count-suggestion branch July 1, 2023 10:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

2 participants