중간 단계: useQuery로 선언적 구현
function Dashboard() {
const { data: users, isLoading: isLoadingUsers } = useQuery(
dashboardQueries.users()
);
const { data: categories, isLoading: isLoadingCategories } = useQuery(
dashboardQueries.categories()
);
// 여전히 로딩 체크는 필요
if (isLoadingUsers || isLoadingCategories) {
return <DashboardSkeleton />;
}
return (
<div>
<UserList users={users} />
<CategoryList categories={categories} />
</div>
);
}
TypeScript
복사
After: useSuspenseQuery로 데이터가 무조건 있다는 전제 하에
// queries/index.ts - 쿼리 정의 중앙화
export const dashboardQueries = {
users: () =>
queryOptions({
queryKey: ["dashboard", "users"] as const,
queryFn: fetchUsers
}),
categories: () =>
queryOptions({
queryKey: ["dashboard", "categories"] as const,
queryFn: fetchCategories
}),
};
// components/Dashboard.tsx - Parse 철학 적용
function DashboardPage() {
return (
<ErrorBoundary fallback={<ErrorPage />}>
<Suspense fallback={<DashboardSkeleton />}>
<Dashboard />
</Suspense>
</ErrorBoundary>
);
}
function Dashboard() {
// 경계를 통과했으므로 데이터는 항상 있음
const [{ data: users }, { data: categories }] = useSuspenseQueries({
queries: [dashboardQueries.users(), dashboardQueries.categories()],
});
// 깔끔! 로딩/에러 체크 없음
return (
<div>
<UserList users={users} />
<CategoryList categories={categories} />
</div>
);
}
TypeScript
복사
