react-query, Typescript: Error 타입 지정하기

Typescript 에러 처리

• isLoading과 isError를 처리하는 util 함수 manageStatus 선언
• error 인수 타입 처리에서 'Object is of type 'unknown'.' 에러 발생
• 즉, useQuery를 통해 얻은 error가 unknown 타입이어서 error.message가 실행되지 않음
• error의 타입을 따로 지정하고, 제네릭 개념을 사용하여 문제 해결

interface StatusType {
 isLoading: boolean;
 isError: boolean;
}

type ErrorType<T> = {
 error: T | unknown;
};

export const manageStatus = (
 { isLoading, isError }: StatusType,
 { error }: ErrorType<object>
) => {
 if (isLoading) {
   return <h2>Loading...</h2>;
 } else if (isError) {
   return <h2>{Object(error).message}</h2>;
 }
};

위의 isLoading, isError, error는 useQuery에서 꺼낸 것들
(isLoading + isError = status)

사용된 곳

import { useParams } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { getTodoById } from 'api';
import { manageStatus } from 'shared/util';

export const Todo = () => {
  const { todoId } = useParams();
  const { status, data, error } = useQuery({
    queryKey: ['data', String(todoId)],
    queryFn: () => getTodoById(String(todoId)),
  });
  const { content, createdAt, updatedAt } = data;

  manageStatus({ status, error });

  return (
    <>
      <h2>Todo</h2>
      <p>{content}</p>
      <p>{createdAt}</p>
      <p>{updatedAt}</p>
    </>
  );
};