개발자
리액트 쿼리로 OptimisticUpdate 를 구현했는데 onError 에서 context 타입 지정을 어떻게 해야할지 모르겠습니다 ㅠㅠ context : 타입 하면 오류나고, data : 타입 = context 해도 오류나고 as 를 쓰면 해결되긴 하는데 더 좋은 방법 없을까요? ㅠㅠㅠ 'use client'; import { useState } from 'react'; import { toast } from 'react-toastify'; import { usePostLikeCount } from '@/hooks'; interface LikeContextType { previousLikeCount: number; previousIsLike: boolean; } export const useOptimisticLike = ( boardId: number, initialLikeCount: number, initialIsLike: boolean, refetch: () => void ) => { const [optimisticLikeCount, setOptimisticLikeCount] = useState(initialLikeCount); const [optimisticIsLike, setOptimisticIsLike] = useState(initialIsLike); const { mutate: postMutate } = usePostLikeCount(boardId, { onMutate: async (): Promise<LikeContextType> => { setOptimisticLikeCount((prev) => optimisticIsLike ? prev - 1 : prev + 1 ); setOptimisticIsLike((prev) => !prev); return { previousLikeCount: optimisticLikeCount, previousIsLike: optimisticIsLike, }; }, onError: (err, variables, context) => { const data: LikeContextType = context; if (data) { setOptimisticLikeCount(data.previousLikeCount); setOptimisticIsLike(data.previousIsLike); } toast.error('좋아요 업데이트에 실패했습니다.'); }, onSuccess: () => { refetch(); }, }); const uploadLike = () => { postMutate(); }; return { optimisticLikeCount, optimisticIsLike, uploadLike, }; };
답변 1
onMutate에서 반환하는 { previousLikeCount: optimisticLikeCount, previousIsLike: optimisticIsLike, } 부분이 context 타입으로 지정되어야 하는데 안되는 거 보면 일단 불필요한 onMutate의 async를 제거해야 하고, 그래도 안되면 usePostLikeCount 함수를 봐야 할 것 같습니다
익명
작성자
2024년 05월 20일
import { useMutation } from '@tanstack/react-query'; import { likeQueryKeys, likeUrl, post } from '@/libs'; import type { UseMutationOptions } from '@tanstack/react-query'; import type { AxiosError } from 'axios'; export const usePostLikeCount = ( boardId: number, options?: UseMutationOptions<unknown, AxiosError> ) => useMutation({ mutationKey: likeQueryKeys.postLikeCount(), mutationFn: () => post(likeUrl.postLikeCount(boardId)), ...options, }); 지금 이렇게 있습니다..!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!