feat: 동물 뽑고나서 포인트 최신화

[hyesungoh]

안녕하세요 ~ 서비스 재밌게 쓰고 있어요 ~

💡 기능

• 갓챠후 포인트를 최신화하도록 해용
• 포인트 렌더링 부분에서 조회된 데이터를 사용하도록 해요
  • 이 부분에 대해서, 같은 책임을 갖는 전역 상태가 있지만 최신의 데이터를 보여주면 어떨까 하는 생각이였어용
  • 전역 상태를 항상 최신화해서 사용하자면 중간 레이어 개발이 필요할 것 같심더

🔎 기타

• 나머지는 코멘트로 남길게용

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
git-animal	❌ Failed (Inspect)			Jun 6, 2024 5:53am

[hyesungoh]

컨플릭 리솔브 이후에 배포 ci가 실패하는데, 로그 확인을 못해서 한 번 봐주셔도 조흘거같아용 🙏

[hyesungoh]

https://github.com/sumi-0011/git-animal-client/pull/17/files

요 PR을 이제 봤네용

제가 파악하지 못한 부분이, invalidate 한다면 zustand 전역 상태가 갱신되는 부분을 찾지 못했는데 공유해 주시면 감사드리겠읍니다 🙏 @sumi-0011

[sumi-0011]

컨플릭 리솔브 이후에 배포 ci가 실패하는데, 로그 확인을 못해서 한 번 봐주셔도 조흘거같아용 🙏

발생한 에러는 다음과 같습니다! 혹시 로컬에서는 정상적으로 빌드되는걸까요?

[sumi-0011]

https://github.com/sumi-0011/git-animal-client/pull/17/files

요 PR을 이제 봤네용

제가 파악하지 못한 부분이, invalidate 한다면 zustand 전역 상태가 갱신되는 부분을 찾지 못했는데 공유해 주시면 감사드리겠읍니다 🙏 @sumi-0011

invalidate 되면 zustand에 있는 user 데이터를 밑과 같은 방식으로 업데이트 하고있습니다. API의 response data가 바뀌고, login 상태라면 전역상태를 업데이트해주고 있어요 _app.tsx에 있는 이유는 hotfix로 수정했기 때문이고.,, 이후에 분리하려고 하였습니다.

생각하신 더 좋은 방법이 있다면 공유해주세요!

src/pages/_app.page.tsx

function UserProvider() {
  const { data } = useGetUser();
  const user = useUser();
  const { setUserData } = useSetUserData();

  useEffect(() => {
    if (!data) return;
    if (!user.isLogin) return;

    const { id, points } = data;
    if (user.id !== id || user.points !== points) {
      setUserData(data);
    }
  }, [data, setUserData]);

  return <></>;
}

[hyesungoh]

https://github.com/sumi-0011/git-animal-client/pull/17/files 요 PR을 이제 봤네용 제가 파악하지 못한 부분이, invalidate 한다면 zustand 전역 상태가 갱신되는 부분을 찾지 못했는데 공유해 주시면 감사드리겠읍니다 🙏 @sumi-0011

invalidate 되면 zustand에 있는 user 데이터를 밑과 같은 방식으로 업데이트 하고있습니다. API의 response data가 바뀌고, login 상태라면 전역상태를 업데이트해주고 있어요 _app.tsx에 있는 이유는 hotfix로 수정했기 때문이고.,, 이후에 분리하려고 하였습니다.

생각하신 더 좋은 방법이 있다면 공유해주세요!

src/pages/_app.page.tsx

function UserProvider() {
  const { data } = useGetUser();
  const user = useUser();
  const { setUserData } = useSetUserData();

  useEffect(() => {
    if (!data) return;
    if (!user.isLogin) return;

    const { id, points } = data;
    if (user.id !== id || user.points !== points) {
      setUserData(data);
    }
  }, [data, setUserData]);

  return <></>;
}

흠흠흠!!

API 응답값에 있는 값들을 전역 상태로 관리하는 것이 옳을지 고민이에요

API 응답값에 대한 핸들링은 리액트 쿼리가 담당하고, 이것에 부수적인 isLogin과 같은 상태는 전역 상태로 관리하도록 해봄직 할 수도 있을 거 같은데

이부분에 대해서는 어떻게 생각하세용??

[sumi-0011]

https://github.com/sumi-0011/git-animal-client/pull/17/files 요 PR을 이제 봤네용 제가 파악하지 못한 부분이, invalidate 한다면 zustand 전역 상태가 갱신되는 부분을 찾지 못했는데 공유해 주시면 감사드리겠읍니다 🙏 @sumi-0011

invalidate 되면 zustand에 있는 user 데이터를 밑과 같은 방식으로 업데이트 하고있습니다. API의 response data가 바뀌고, login 상태라면 전역상태를 업데이트해주고 있어요 _app.tsx에 있는 이유는 hotfix로 수정했기 때문이고.,, 이후에 분리하려고 하였습니다. 생각하신 더 좋은 방법이 있다면 공유해주세요! src/pages/_app.page.tsx

function UserProvider() {
  const { data } = useGetUser();
  const user = useUser();
  const { setUserData } = useSetUserData();

  useEffect(() => {
    if (!data) return;
    if (!user.isLogin) return;

    const { id, points } = data;
    if (user.id !== id || user.points !== points) {
      setUserData(data);
    }
  }, [data, setUserData]);

  return <></>;
}

흠흠흠!!

API 응답값에 있는 값들을 전역 상태로 관리하는 것이 옳을지 고민이에요

API 응답값에 대한 핸들링은 리액트 쿼리가 담당하고, 이것에 부수적인 isLogin과 같은 상태는 전역 상태로 관리하도록 해봄직 할 수도 있을 거 같은데

이부분에 대해서는 어떻게 생각하세용??

user data를 최신으로 유지하려면 그게 더 좋을 것 같네요. isLogin도 단순히 accessToken 여부로 확인하고 전역상태는 제거하는게 좋을까요?

캐시 타임만 길게 두고, 전역상태에서 제거해도 괜찮을것 같습니다. (포인트 최신화등은 캐시 무효화를 하기때문에 캐시타임이 길어도 괜찮을것 같아요)

[hyesungoh]

논의는 다 한 거 같아서 해당 PR은 닫겠습니다 ~