[MZO-34] API 모듈 및 인터페이스 구축

[RookieAND]

Jira Issue 번호

#34

작업 내용

• XHR 기반의 Axios 에서 Native Fetch 기반의 Ky 라이브러리로 API 모듈 수정
• Ky 라이브러리 기반의 GET, POST, PATCH, PUT, DELETE API 유틸 함수 생성
• React-Query 관련 Client Provider 생성 및 Root Layout 에 적용 완료
• Server-Side에서 단일 요청에 대한 싱글톤 QueryClient 인스턴스 생성 로직 추가
• react-query 의 Hydrate 로직를 클라이언트 컴포넌트로 래핑해서 클라이언트 사이드에서도 사용이 가능하도록 설정
• prefetch 된 쿼리의 캐시 값을 dehydrated 시켜 넘기고, 이를 클라이언트 컴포넌트에 hydrate 하여 인계하는 로직 추가

테크스펙

Next 13부터는 모든 컴포넌트가 기본적으로 서버 컴포넌트이므로, React-Query를 사용하는 방식이 변경되었습니다.
기존에는 App 단에서 전역으로 사용할 QueryClient를 Provider로 제공했지만, 이제는 SSR에 대한 대응도 필요해졌습니다.

• 요지는 서버 컴포넌트에서 pre-fetch 한 쿼리를 dehydrate 시켜 클라이언트에 넘겨주어야 하고, 클라이언트에서는 dehydrated 된 상태의 캐시 값을 hydration 하여 받는 방식입니다.
• 클라이언트 사이드에서는 Root Layout 에서 제공된 QueryClient를 그대로 사용하면 됩니다. (QueryProvider로 제공)

1. 서버 컴포넌트에서는 pre-fetch 할 데이터를 받아온 후에, 이를 dehydrate 하여 클라이언트로 넘겨준다.
2. 클라이언트 컴포넌트에서는 인계받은 react-query의 캐시 값을 rehydrate 하여 받아온다. (HydrateOnClient)

import getQueryClient from "@/utils/getQueryClient";
import Hydrate from "@/utils/hydrate.client";
import { dehydrate } from "@tanstack/query-core";
import ListUsers from "./list-users";
import { User } from "../types";

async function getUsers() {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  const users = (await res.json()) as User[];
  return users;
}

export default async function Hydation() {
  const queryClient = getQueryClient(); // 단일 Request에 대응하는 QueryClient 생성
  await queryClient.prefetchQuery(["hydrate-users"], getUsers); // prefetch 된 데이터를 쿼리에 인계
  const dehydratedState = dehydrate(queryClient); // 쿼리를 dehydrate 한 상태를 반환, 이후 클라이언트에서 rehydrate 진행.

  return (
    <Hydrate state={dehydratedState}>
      <ListUsers />
    </Hydrate>
  );
}

자세한 내용은 저도 내일 짬내서 정리해오겠습니다. 일단 참고한 포스팅은 아래 남겨두겠습니다.
혹시 더 나은 방법이 있거나 현재 방식의 문제점이 있다면 바로 코멘트에 기술해주세요. 적극 반영하겠습니다.

• https://codevoweb.com/setup-react-query-in-nextjs-13-app-directory/
• https://11001.tistory.com/221

Checklist

• Code Review 요청
• PR 제목 commit convention에 맞는지 확인
• Label 설정
• Jira 코드 리뷰 상태로 변경

[haryung-lee]

props drilling보다 dehydrate + hydrate로 적용한게 더 깔끔한것 같아요! 보면서 되게 에러바운더리와 같은 느낌이였는데 알파버전에서는 이름을 Hydrate를 HydrationBoundary로 바꾼거 같더라구요..?? (TanStack/query#5455) 우연히 보게된 PR이라 놀랐습니다ㅋㅋ

수고 많으셨어요 루키!👍

추가) 이름을 바꾼게 아니라 HydrationBoundary 컴포넌트가 새로 추가되는건가 봐요!(https://github.com/TanStack/query/blob/alpha/packages/react-query/src/HydrationBoundary.tsx)

[RookieAND]

오 아예 컴포넌트를 만들고 내부에서 hydration을 돌려버리네요. 이것도 참고해야겠네요