TypeScript, React-Query 및 Zod를 사용한 최신 React 데이터 가져오기

현재 내가 선택한 스택은 T3 Stack을 활용하는 환상적인 tRPC을 기반으로 하지만, 나는 또한 Rails API가 지원하는 Create React App으로 만든 JavaScript React 앱의 수석 프런트엔드 개발자이기도 합니다. 이 앱을 TypeScript로 포팅하면서 tRPC가 제공하는 자동 유형 안전성을 간절히 바라고 있습니다.

운 좋게도 TypeScript 기반 React에서 유형이 지정되지 않은 API와 상호 작용하는 문제에 대한 비교적 간단한 솔루션이 있습니다.

빌딩 블록

이 퍼즐의 첫 번째 조각은 놀라운 것React Query입니다. 현재 프로젝트에서 React Query를 사용하고 있지 않다면 즉시 한 걸음 뒤로 물러나 이유를 스스로에게 물어봐야 합니다. 데이터 가져오기는 오랫동안 React에서 논쟁의 여지가 있는 주제였으며 후크가 등장한 이후 많은 개발자(저 포함)가 데이터 가져오기 라이브러리를 오용useEffect하거나 롤링하는 실수를 저질렀습니다. 자신의 인증 시스템을 굴리는 것과 마찬가지로 이것은 당신을 물릴 수 있습니다.

두 번째 작품은 Zod 입니다. 많은 유효성 검사 라이브러리가 있지만 Zod는 현재 선두주자이며 절대적으로 긍정적으로 다른 것을 사용할 이유가 없는 한 Zod를 사용해야 합니다. TypeScript 유형을 쉽게 추론하는 Zod의 유효성 검사 및 기능은 유형이 지정되지 않은 API를 입력하는 데 핵심이 될 것입니다.

합치기

솔루션은 놀라울 정도로 간결합니다. API 끝점에 대한 Zod 유효성 검사기를 작성하고 이를 사용하여 API의 응답을 구문 분석하고 React Query에서 입력된 결과를 가져옵니다. 사용자 정보 API 끝점을 사용하여 이에 대한 예를 살펴보겠습니다.

// Schema for what the API endpoint should be returning
const UserSchema = z.object({
  id: z.number(),
  email: z.string().email(),
  displayName: z.string().min(1),
  role: z.enum(['USER', 'ADMIN']),
});

// Optionally, if you want to export this type to pass around
// elsewhere, you can export it:
export type User = z.infer<typeof UserSchema>;

// Query the endpoint and parse the response with Zod schema,
// which will type the response for us
const query = useQuery(["user"], async () => {
  const response = await (await fetch('/me')).json();
  return UserSchema.parse(response);
});

query.data // will be typed

그게 다야! 결과query.data는 스키마 또는 undefined(쿼리가 실패할 수 있으므로)로 입력됩니다. API의 응답이 유효성 검사에 실패하면 사용 중인 예외 로깅 도구를 사용하여 개발 중에 처리하거나 프로덕션에서 포착할 수 있는 오류가 발생합니다.

이 솔루션은 tRPC만큼 자동적이지 않고 약간의 상용구를 작성해야 하지만 확장성이 뛰어나고 TypeScript에서 유형이 지정되지 않은 API 엔드포인트를 처리하는 것이 덜 고통스럽습니다.