feat: @tanstack/react-query 설정 추가 및 예시 쿼리 추가

apps/admin/src/App.tsx

@@ -1,12 +1,11 @@
-import { Hello, QueryClientProvider, ReactQueryDevtools } from '@boolti/api';
+import { QueryClientProvider } from '@boolti/api';
 
 const App = () => {
+  // const { data } = useHelloQuery();
+  // console.log(data?.hello)
   return (
     <QueryClientProvider>
-      <h1>
-        {Hello()}
-        <ReactQueryDevtools />
-      </h1>
+      <h1>Hello World</h1>
     </QueryClientProvider>
   );
 };

packages/api/package.json

@@ -3,15 +3,16 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
-  "main": "src/index.tsx",
-  "types": "src/index.tsx",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
   "scripts": {
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
   },
   "dependencies": {
     "@lukemorales/query-key-factory": "^1.3.2",
-    "@tanstack/react-query": "^5.17.15",
-    "@tanstack/react-query-devtools": "^5.17.18",
+    "@tanstack/query-core": "^4.32.6",
+    "@tanstack/react-query": "^4.32.6",
+    "@tanstack/react-query-devtools": "^4.32.6",
     "ky": "^1.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

packages/api/src/index.tsx → packages/api/src/QueryClientProvider.tsx

@@ -1,12 +1,13 @@
 import { QueryClientProvider as BaseQueryClientProvider, QueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
-export { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 export function QueryClientProvider({ children }: React.PropsWithChildren) {
   const [queryClient] = useState(() => new QueryClient());
-  return <BaseQueryClientProvider client={queryClient}>{children}</BaseQueryClientProvider>;
-}
-
-export function Hello() {
-  return 'World';
+  return (
+    <BaseQueryClientProvider client={queryClient}>
+      {children}
+      <ReactQueryDevtools />
+    </BaseQueryClientProvider>
+  );
 }

packages/api/src/fetcher.ts

@@ -0,0 +1,34 @@
+import ky, { Options, ResponsePromise } from 'ky';
+
+// TODO 환경 변수로 API 베이스 설정
+const API_URL = '';
+
+export const instance = ky.create({
+  prefixUrl: API_URL,
+  headers: {
+    'content-type': 'application/json',
+  },
+  hooks: {
+    // TODO 인증 관련 헤더 검증 로직 추가
+    beforeRequest: [],
+    // TODO 서버 에러 처리
+    beforeError: [],
+  },
+});
+
+export async function resultify<T>(response: ResponsePromise) {
+  try {
+    // TODO 바디가 없는 경우 어떻게 할지 논의 필요
+    return await response.json<T>();
+  } catch (e) {
+    console.error('[fetcher.ts] resultify에서 JSON 파싱을 하는 도중 오류 발생');
+    throw e;
+  }
+}
+
+export const fetcher = {
+  get: <T>(pathname: string, options?: Options) => resultify<T>(ky.get(pathname, options)),
+  post: <T>(pathname: string, options?: Options) => resultify<T>(ky.post(pathname, options)),
+  put: <T>(pathname: string, options?: Options) => resultify<T>(ky.put(pathname, options)),
+  delete: <T>(pathname: string, options?: Options) => resultify<T>(ky.delete(pathname, options)),
+};

packages/api/src/index.ts

@@ -0,0 +1,2 @@
+export { useHelloQuery } from './useHelloQuery';
+export { QueryClientProvider } from './QueryClientProvider';

packages/api/src/queryKey.ts

@@ -0,0 +1,13 @@
+import { createQueryKeys } from '@lukemorales/query-key-factory';
+import { fetcher } from './fetcher';
+
+export interface Hello {
+  hello: string;
+}
+
+export const queryKey = createQueryKeys('boolti', {
+  hello: {
+    queryKey: null,
+    queryFn: () => fetcher.get<Hello>('/hello'),
+  },
+});

packages/api/src/useHelloQuery.ts

@@ -0,0 +1,10 @@
+import { useQuery } from '@tanstack/react-query';
+import { queryKey } from './queryKey';
+import { TypedUseQueryOptions } from '@lukemorales/query-key-factory';
+
+export function useHelloQuery(options?: TypedUseQueryOptions<typeof queryKey.hello>) {
+  return useQuery({
+    ...options,
+    ...queryKey.hello,
+  });
+}

packages/api/tsconfig.json

@@ -1,5 +1,8 @@
 {
   "extends": "@boolti/typescript-config/vite.json",
+  "compilerOptions": {
+    "moduleResolution": "node",
+  },
   "include": [
     "src"
   ]