[Eslint | React Query] dehydratedState "any" type

문제 발생

이번 프로젝트에 react query를 쓰게 되면서, v4부터 변경된 Hydrate 컴포넌트를 사용하면서 eslint가 발생했다. 공식 문서에선 보일러플레이트 코드만 제공해줄 뿐, 타입스크립트에서 사용할 때 주의점 등은 찾을 수 없어 아쉬웠다.

 

프로젝트 코드

const App = ({ Component, ...rest }: AppProps) => {
  const [queryClient] = useState(() => { return new QueryClient(); });

  return (
    <QueryClientProvider client={queryClient}>
      <Hydrate state={rest.pageProps.dehydratedState}>  <!-- 👈 eslint error 발생 -->
        ...
      </Hydrate>
      <ReactQueryDevtools initialIsOpen />
    </QueryClientProvider>
  );
};

export default App;

 

에러 전문

// 에러 전문
Unsafe assignment of an `any` value.eslint@typescript-eslint/no-unsafe-assignment

Unsafe member access .dehydratedState on an `any` value.eslint@typescript-eslint/no-unsafe-member-access

즉, App 컴포넌트에서 받는 prop인 pageProps에서 dehydratedState를 인식하지 못해 타입스크립트는 이를 any 타입으로 자동 선언하면서 생긴 에러였다.

eslint disabled를 남발하는 것도 하나의 해결 방법이겠지만, 생각보다 너무 코드가 더러워져서 결국 타입 선언에 대해 열심히 구글링했다.  

 

해결 방법

type DehydratedState를 import하자. 

스택오버플로우에서 해결 방법을 알 수 있었다. 결론만 말하자면 tanstack/react-query 라이브러리에 추가적으로 DehydratedState type을 import한 뒤, App 컴포넌트의 prop의 타입에 generic으로 추가해주면 된다. 코드는 다음과 같다.

import {
  Hydrate, QueryClient, QueryClientProvider, type DehydratedState,
} from "@tanstack/react-query";

const App = ({ Component, ...rest }: AppProps<{ dehydratedState: DehydratedState }>) => {
  const [queryClient] = useState(() => { return new QueryClient(); });

  return (
    <QueryClientProvider client={queryClient}>
      <Hydrate state={rest.pageProps.dehydratedState}>
        ...
      </Hydrate>
      <ReactQueryDevtools initialIsOpen />
    </QueryClientProvider>
  );
};

export default App;

 

 

참고 사이트

https://stackoverflow.com/questions/75095342/property-dehydratedstate-does-not-exist-on-type

Property 'dehydratedState' does not exist on type '{}'