반응 기능 낙관적 업데이트 및 캐시 관리 개선#954
Conversation
한 사용자가 하나의 답변에 여러 종류의 반응을 남길 수 있도록 변경합니다. 반응 개수는 2개 이상일 때만 표시하고, 삭제 후 재등록 방식의 변경 mutation을 제거해 등록과 삭제 낙관적 업데이트 흐름을 단순화합니다.
|
Important Review skippedAuto reviews are limited based on label configuration. 🏷️ Required labels (at least one) (1)
Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
github-actions
Bot
changed the title
|
|
||
| return { | ||
| ...mutation, | ||
| mutate: (params: PostRetrospectReactionParams, options?: Parameters<typeof mutation.mutate>[1]) => |
There was a problem hiding this comment.
muate랑 mutateAsync를 정의해서 내보내는 이유는 컴포넌트 단에서 낙관적 업데이트를 처리하지 않아도 되고, 나중에 다른 곳에서 사용하더라도 해당 파일 안에 로직으로 처리되어있는 낙관적 업데이트를 자동으로 처리될 수 있어 이렇게 처리했습니다!
There was a problem hiding this comment.
형님! 질문이 있습니다!
mutation.mutate과 mutate(별도 정의)를 구분해서 mutate(별도 정의)를 사용하면 낙관적 업데이트를 따로 구현하지 않고 적용할 수 있다는 의미로 이해했어요!
처음에는 mutate과 mutation.mutate을 사용할 때 외부에서 봤을 때는 사실 차이가 없다고 생각하고 사용할 수도 있고, 내부(usePostRetrospectReaction.ts)으로 들어오지 않는 이상 둘이 차이가 있다는 사실을 인지하기 어렵다고 생각했어요!
그래서 낙관적 업데이트가 적용된 mutate만 존재해도 되지 않을까? mutation.mutate은 낙관적 업데이트가 적용되지 않는 mutate인데, 이것을 사용할 일이 있을까 싶은 생각이 들었어요..!! (이것이 질문입니다!)
그래서 applyOptimisticPost를 정의해주셨는데, onMutate에서 활용하면 낙관적 업데이트가 적용된 mutate 하나만 존재하는 형태로 사용할 수 있을 것 같아요!
export const usePostRetrospectReaction = () => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: async ({ spaceId, retrospectId, answerId, emojiCode }: PostRetrospectReactionParams) => {
await api.post(`/space/${spaceId}/retrospect/${retrospectId}/reaction`, { answerId, emojiCode });
},
onMutate: ({ spaceId, retrospectId, answerId, emojiCode, member }) =>
addRetrospectReactionCache(
queryClient,
{ spaceId, retrospectId },
{ answerId, reaction: createOptimisticReaction(emojiCode, member) },
),
onError: (_, { spaceId, retrospectId }, context) => {
rollbackRetrospectReactionCache(queryClient, { spaceId, retrospectId }, context?.previousReactions);
},
onSettled: (_, __, { spaceId, retrospectId }) => {
void invalidateRetrospectReactionCache(queryClient, { spaceId, retrospectId });
},
});
};
형님의 의도와 다를 수도 있어서 참고만 해주셔도 됩니다!!
There was a problem hiding this comment.
구두로 같이 이야기한 것처럼 mutate에 이름이 겹칠 것 같아, 낙관적 업데이트가 적용되지 않은 mutate 기본 동작은 살리면서 optimisticMutate 라는 별칭으로 새롭게 리턴하는 형식으로 수정을 진행해보겠습니다!
|
|
||
| return { | ||
| ...mutation, | ||
| mutate: (params: PostRetrospectReactionParams, options?: Parameters<typeof mutation.mutate>[1]) => |
There was a problem hiding this comment.
형님! 질문이 있습니다!
mutation.mutate과 mutate(별도 정의)를 구분해서 mutate(별도 정의)를 사용하면 낙관적 업데이트를 따로 구현하지 않고 적용할 수 있다는 의미로 이해했어요!
처음에는 mutate과 mutation.mutate을 사용할 때 외부에서 봤을 때는 사실 차이가 없다고 생각하고 사용할 수도 있고, 내부(usePostRetrospectReaction.ts)으로 들어오지 않는 이상 둘이 차이가 있다는 사실을 인지하기 어렵다고 생각했어요!
그래서 낙관적 업데이트가 적용된 mutate만 존재해도 되지 않을까? mutation.mutate은 낙관적 업데이트가 적용되지 않는 mutate인데, 이것을 사용할 일이 있을까 싶은 생각이 들었어요..!! (이것이 질문입니다!)
그래서 applyOptimisticPost를 정의해주셨는데, onMutate에서 활용하면 낙관적 업데이트가 적용된 mutate 하나만 존재하는 형태로 사용할 수 있을 것 같아요!
export const usePostRetrospectReaction = () => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: async ({ spaceId, retrospectId, answerId, emojiCode }: PostRetrospectReactionParams) => {
await api.post(`/space/${spaceId}/retrospect/${retrospectId}/reaction`, { answerId, emojiCode });
},
onMutate: ({ spaceId, retrospectId, answerId, emojiCode, member }) =>
addRetrospectReactionCache(
queryClient,
{ spaceId, retrospectId },
{ answerId, reaction: createOptimisticReaction(emojiCode, member) },
),
onError: (_, { spaceId, retrospectId }, context) => {
rollbackRetrospectReactionCache(queryClient, { spaceId, retrospectId }, context?.previousReactions);
},
onSettled: (_, __, { spaceId, retrospectId }) => {
void invalidateRetrospectReactionCache(queryClient, { spaceId, retrospectId });
},
});
};
형님의 의도와 다를 수도 있어서 참고만 해주셔도 됩니다!!
2 participants
🏄🏼♂️ Summary (요약)
useReplaceRetrospectReaction훅을 제거하고, 반응 변경 로직을 최적화했습니다.🫨 Describe your Change (변경사항)
useReplaceRetrospectReaction훅을 제거하고, 반응 변경 시 기존 반응 삭제 후 새 반응을 추가하는 방식으로 로직을 변경했습니다.pendingCreateRef를Promise에서Map형태로 변경했습니다.addRetrospectReactionCache및removeRetrospectReactionCache함수를 추가했습니다.isMutating및disabled상태 관리를 제거하여 코드 복잡성을 줄였습니다.🧐 Issue number and link (참고)
closes: #942
📚 Reference (참조)