feat: add build script and implement API fetcher with React Query integration

Author: ohprettyhak

packages/api-base/build.js

@@ -0,0 +1,38 @@
+import esbuild from 'esbuild';
+import pkg from './package.json' with { type: 'json' };
+
+const sharedConfig = {
+  entryPoints: ['./src/index.ts'],
+  bundle: true,
+  write: true,
+  treeShaking: true,
+  minify: true,
+  sourcemap: false,
+  target: ['es2020'],
+  external: [
+    'react',
+    'react-dom',
+    ...Object.keys(pkg.dependencies || {}),
+    ...Object.keys(pkg.peerDependencies || {}),
+  ],
+  jsx: 'automatic',
+  jsxImportSource: 'react',
+};
+
+esbuild
+  .build({
+    ...sharedConfig,
+    outfile: './dist/index.js',
+    format: 'esm',
+    platform: 'neutral',
+  })
+  .catch(() => process.exit(1));
+
+esbuild
+  .build({
+    ...sharedConfig,
+    outfile: './dist/index.cjs',
+    format: 'cjs',
+    platform: 'neutral',
+  })
+  .catch(() => process.exit(1));

packages/api-base/package.json

@@ -34,6 +34,8 @@
     "react-dom": "^19.1.1"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.84.1",
+    "@tanstack/react-query-devtools": "^5.84.1",
     "ky": "^1.8.2"
   },
   "devDependencies": {

packages/api-base/src/QueryClientProvider.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import {
+  QueryClientProvider as BaseQueryClientProvider,
+  QueryClient,
+  type QueryClientConfig,
+} from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { type PropsWithChildren, useState } from 'react';
+
+type Props = PropsWithChildren<{
+  config?: QueryClientConfig;
+}>;
+
+const defaultConfig: QueryClientConfig = {
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      refetchInterval: false,
+      staleTime: 1000 * 60,
+      retry: 0,
+    },
+  },
+};
+
+export const QueryClientProvider = ({ children, config }: Props) => {
+  const mergedConfig = { ...defaultConfig, ...config };
+  const [queryClient] = useState(() => new QueryClient(mergedConfig));
+
+  return (
+    <BaseQueryClientProvider client={queryClient}>
+      {children}
+      <ReactQueryDevtools initialIsOpen={false} />
+    </BaseQueryClientProvider>
+  );
+};

packages/api-base/src/fetcher.ts

@@ -0,0 +1,29 @@
+import type { Options, ResponsePromise } from 'ky';
+import ky from 'ky';
+
+const API_URL = typeof window === 'undefined' ? 'https://api.hufscheer.com/' : '/api';
+
+const defaultOption: Options = {
+  retry: 0,
+  timeout: 30_000,
+};
+
+export const instance = ky.create({
+  prefixUrl: API_URL,
+  headers: { 'content-type': 'application/json' },
+  ...defaultOption,
+});
+
+export async function resultify<T>(response: ResponsePromise) {
+  return await response.json<T>();
+}
+
+export const fetcher = {
+  get: <T>(pathname: string, options?: Options) => resultify<T>(instance.get(pathname, options)),
+  post: <T>(pathname: string, options?: Options) => resultify<T>(instance.post(pathname, options)),
+  put: <T>(pathname: string, options?: Options) => resultify<T>(instance.put(pathname, options)),
+  patch: <T>(pathname: string, options?: Options) =>
+    resultify<T>(instance.patch(pathname, options)),
+  delete: <T>(pathname: string, options?: Options) =>
+    resultify<T>(instance.delete(pathname, options)),
+};

packages/api-base/src/index.ts

@@ -0,0 +1,14 @@
+export {
+  dehydrate,
+  HydrationBoundary,
+  MutationCache,
+  QueryCache,
+  type UseSuspenseQueryResult,
+  useMutation,
+  useQuery,
+  useQueryClient,
+  useSuspenseQuery,
+} from '@tanstack/react-query';
+
+export * from './fetcher';
+export * from './QueryClientProvider';

packages/icons/src/child.tsx

@@ -6,7 +6,7 @@ type ChildProps = {
 };
 
 const Child = ({ children, ...props }: ChildProps) => {
-  const child: React.ReactNode = Children.only(children);
+  const child: ReactNode = Children.only(children);
 
   return isValidElement(child) ? cloneElement(child, props) : null;
 };