import type { Fetcher, Key, SWRConfiguration, SWRResponse } from 'swr';
import useSWR from 'swr';

type SWRKey = Key;
type SWRFetcher<Data> = Fetcher<Data, SWRKey>;
type SWRConfig<Data, Error = unknown> = SWRConfiguration<Data, Error, SWRFetcher<Data>>;
type SuspenseSWRResponse<Data, Error = unknown> = Omit<
  SWRResponse<Data, Error, SWRConfig<Data, Error>>,
  'data' | 'isLoading'
> & { data: Data };

export default function useSuspenseSWR<Data, Error = unknown>(
  key: SWRKey,
  fetcher?: SWRFetcher<Data>,
  config?: SWRConfig<Data, Error>,
) {
  return useSWR(key, fetcher || null, { ...config, suspense: true }) as SuspenseSWRResponse<Data, Error>;
}

import { Suspense } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import useSuspenseSWR from './useSuspenseSWR';

function UserProfile() {
  const { data } = useSuspenseSWR('/api/user', fetcher);
  // data가 항상 정의되어 있으므로 undefined 검사 불필요
  return <div>{data.name}</div>;
}

<ErrorBoundary fallback={<ErrorFallback />}>
  <Suspense fallback={<Spinner />}>
    <UserProfile />
  </Suspense>
</ErrorBoundary>;

// 기존 useSWR: 로딩/에러 조건부 처리, data가 undefined일 수 있음
const { data, error, isLoading } = useSWR('/api/user', fetcher);
if (isLoading) return <Spinner />;
if (error) return <ErrorFallback />;
if (!data) return null;
return <div>{data.name}</div>;

// useSuspenseSWR: 로딩/에러는 Suspense/ErrorBoundary가 선언적 처리, data 항상 존재
const { data } = useSuspenseSWR('/api/user', fetcher);
return <div>{data.name}</div>;