<aside> 💡 2022.12.08. 김관경

</aside>

• useMutation에서 error 타입이 unknown으로 오고 있었다.
• 공식문서를 찾아보니 useQuery와 useMutation의 타입은 기본적으로 unknown으로 설정되어있다고 한다.
• 추가적으로 조사한 포스팅에서 아래와 같은 반환 타입을 가진다는 것을 알게되었다.

// useQuery의 Type들
export function useQuery<
  TQueryFnData = unknown,
  TError = unknown,
  TData = TQueryFnData,
  TQueryKey extends QueryKey = QueryKey
>

// useMutation의 Type들
export function useMutaion<
  TData = unknown,
  TError = unknown,
  TVariables = void,
  TContext = unknown
>

• 이처럼 제네릭을 사용하고 있음을 알 수 있다.
• 이를 통해 아래와 같이 제네릭을 지정해주었다.

const { mutate, isError, error } = useMutation<
    Promise<MyKeywordData>,
    AxiosError,
    AddKeywordData
  >({
    mutationFn: mutateAddKeyword,
    onSuccess: (addKeywordResponse: MyKeywordData) => {
      queryClient.setQueryData(
        [REACT_QUERY_KEY.MY_KEYWORD_LIST, communityId],
        (old: MyKeywordData[] | undefined) => {
          if (!old) {
            return [addKeywordResponse];
          }

          return [...old, addKeywordResponse];
        },
      );

      const prevAddedKeyword: MyKeywordData = {
        keywordId: addKeywordResponse.keywordId,
        keywordName: addKeywordResponse.keywordName,
      };
      handlePrevKeyword(prevAddedKeyword);
    },
  });

• Argument of type '{ mutationFn: (addKeywordData: AddKeywordData) => Promise<MyKeywordData>; onSuccess: (addKeywordResponse: any) => void; }' is not assignable to parameter of type 'MutationKey'. Object literal may only specify known properties, and 'mutationFn' does not exist in type 'readonly unknown[]'.ts(2769) 라는 에러를 발생시키고 있었다.
• 이후 에러 처리가 필요할 때 다시 공부하면 되겠다.

문제 해결 (2022.12.13)

• 에러 내용을 정확히 읽어보니, 해당 제네릭에 대한 overload가 없다는 에러였다.
• useMutation의 overload가 있는 곳으로 가보니, onSuccess를 사용하면서 제네릭을 사용하기 위해서는 variables에 대한 타입도 명시해줘야함을 확인했다.
• 따라서 vairables에 대한 타입을 명시해서 해결할 수 있었다.

/ 참고자료

TypeScript | TanStack Query Docs

react-query에 typescript 적용하기 - 리액트 쿼리, 타입스크립트