개발자

타입스크립트 타입지정

2024년 05월 20일조회 62

리액트 쿼리로 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, }; };

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 1

허니님의 프로필 사진

onMutate에서 반환하는 { previousLikeCount: optimisticLikeCount, previousIsLike: optimisticIsLike, } 부분이 context 타입으로 지정되어야 하는데 안되는 거 보면 일단 불필요한 onMutate의 async를 제거해야 하고, 그래도 안되면 usePostLikeCount 함수를 봐야 할 것 같습니다

profile picture

익명

작성자

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, }); 지금 이렇게 있습니다..!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2024년 05월 20일

이 경우에 context의 타입을 지정해주기 위해서 onError 핸들러의 세 번째 파라미터(context)에 타입을 명확하게 지정하는 방법이 있습니다. 여기서는 `LikeContextType`이라는 타입을 사용할 수 있겠죠. onError를 아래와 같이 수정해보세요: ```typescript onError: (err: Error, variables: unknown, context?: LikeContextType) => { if (context) { setOptimisticLikeCount(context.previousLikeCount); setOptimisticIsLike(context.previousIsLike); } toast.error('좋아요 업데이트에 실패했습니다.'); }, ``` 위 코드에서 처럼 onError 핸들러의 세번 째 패러미터인 context에 별도로 타입을 지정해주는 것은 좋은 습관입니다. 이렇게 하면 TypeScript가 해당 함수가 올바르게 작동하는지 확인하는데 도움이 됩니다.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!