Function errors in typescript: has no properties in common with type 'Partial<Type<any, any, BareFetcher<any>>>

오늘은 SWR을 v2.2.4로 업그레이드하면서 생긴 오류에 대해서 해결 방법을 써보려해요!

 

일단 vercel팀의 swr issues에 등록된 내용 중 나도 마주한 문제가 하나 있어서 적어볼게요.

 

버그내용

아래는 문의내용을 조회하는 SWR hooks의 일부를 가져왔어요.

export default function useUserInquery() {
  const { data: session } = useSession();
  const { data: inqueries, error } = useSWR<InqueryDetail[]>(
    [
      '/user/inquery',
      {
        headers: {
          authorization: session?.user?.accessToken,
        },
      },
    ],
    ([url, opt]: [string, any]) => fetcher<InqueryDetail[]>(url, opt) // Error 발생 코드
  );

  return { inqueries, error };
}

 

SWR은 기본적으로 useSWR(url, options)으로 이루어진 형태라고 알고 있을텐데, 만약 url에 인자를 넘기는 방법 중에 저는 아래 방법을 통해서 했습니다.

SWR([url, option], ([url, opt]) => fetcher))

 

여기서 2.2.4 버전부터 제목과 같은 에러를 주게 돼요.

SWR 2.2.4 bug image

 

무언가 타입 설정이 변경된 느낌이 있네요!

 

해결방법

다들 이런 버그를 마주하는건 항상 있는 일이에요! 어떻게 해결하지..? 이러면서 너무 상심하진 말아야합니다!

저는 해결하기 위해선 두가지 방법이 있다고 생각해요

1. 에러문구를 구글링!
2. 최신 버전을 업데이트 했기 때문에 open source의 issues에서 검색!

저는 이번에 최신 버전을 업데이트 하면서 좀 문제를 마주했기 때문에 2번을 택했습니다.

vercel/swr github issues image

 

이미 최근 3주전에 같은 에러를 마주한 분이 계시네요....! 바로 클릭해서 우리도 해결해볼까요? 아래에서 확인해주세요!

https://github.com/vercel/swr/issues/2826

Function errors in typescript: has no properties in common with type 'Partial<PublicConfiguration<any, any, BareFetcher<any>>>'

 

결론

흠... 생각보다 명쾌한 해답이 아닌것 같아요.

다들 조금은 어리둥절하면서 {} or undefined를 입력해서 에러를 해결한다고 말하네요!

저도 똑같이 한 결과로 에러문구가 사라지는걸 확인하긴 했지만, 뭔가 편하진 않고 언젠가 다시 에러가 날 것 같아요...ㅎ

export default function useUserInquery() {
  const { data: session } = useSession();
  const { data: inqueries, error } = useSWR<InqueryDetail[]>(
    [
      '/user/inquery',
      {
        headers: {
          authorization: session?.user?.accessToken,
        },
      },
    ],
    ([url, opt]: [string, any]) => 
    	fetcher<InqueryDetail[]>(url,opt),
    {},// <---- 추가한 곳!!!
    );

  return { inqueries, error };
}

 

이번에 새롭게 next14로 업데이트하면서 eslint, typescript, swr도 동시에 함께 업데이트를 진행해서 더 어디서 일어난 원인인지 파악하기가 어려웠습니다...ㅠㅠ