[TypeScript] query의 리턴값 중 data의 type이 undefined일 수 있지만 잡히지 않을 때 (strictNullChecks)

date

May 18, 2023

slug

typescript-query의-리턴값-중-data의-type이-undefined일-수-있지만-잡히지-않을-때

무슨 일인가?

이번에 리뉴얼 된 코드를 베이스로 사내 프로젝트의 신규 기능을 구현하고자 결정했다.

코드 베이스를 바꿔서 우리 프로젝트에 맞게 수정하며 테스트용 aws 빈스톡에 배포하고 있는데.

codebuild도 잘 돌아서 deploy까지 배포는 잘 되었는데, 접근해보니 internal server error가 발생한 것.

원인을 찾아보자

원인이 무엇일까 하고 빈스톡의 로그를 확인해보니, 빌드시 타입레벨에서 잡히지 않은 undefined 참조 에러가 발생한 것.

~~이래서 타입스크립트를 잘 사용해야 배포하기도 전에 에러를 잡을 수 있는데..~~

밑줄 친 부분이 에러의 원인이었다.

아니 근데 왜 타입에서 못잡았지?

생각해보니, 원래 react-query나 apollo client의 useQuery hook에선 로딩중엔 당연히 data가 없으니

data에 대해서 undefined일 수 있어서 타입에도 정의가 되어 있는 걸로 알고 있다.

그런데 왜 type레벨에서 잡지 못한걸까?

// 문제의 쿼리
const { data, loading } = useGqlCurrentUserQuery({
  ssr: true,
  ...(RUNTIME_IS_BROWSER && {
    fetchPolicy: authCookie ? 'cache-and-network' : 'cache-only',
  }),
})

// useGqlCurrentUserQuery의 선언부
export function useGqlCurrentUserQuery(baseOptions?: Apollo.QueryHookOptions<Types.GqlCurrentUserQuery, Types.GqlCurrentUserQueryVariables>) {
  const options = {...defaultOptions, ...baseOptions}
  return Apollo.useQuery<Types.GqlCurrentUserQuery, Types.GqlCurrentUserQueryVariables>(GqlCurrentUserDocument, options);
}

// Apollo.useQuery의 선언부
export declare function useQuery<TData = any, TVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options?: QueryHookOptions<TData, TVariables>): QueryResult<TData, TVariables>;

// Apollo의 QueryResult<TData, TVariables> 선언부
export interface QueryResult<TData = any, TVariables = OperationVariables> extends ObservableQueryFields<TData, TVariables> {
  client: ApolloClient<any>;
  observable: ObservableQuery<TData, TVariables>;
  data: TData | undefined; // <----------- 예상대로 잘 undefined가 있다.
  previousData?: TData;
  error?: ApolloError;
  loading: boolean;
  networkStatus: NetworkStatus;
  called: boolean;
}