import { QueryObserverIdleResult, QueryObserverLoadingErrorResult, QueryObserverLoadingResult, QueryObserverRefetchErrorResult, QueryObserverSuccessResult, UseQueryResult, } from "react-query"; import Loader from "@components/Loader"; import { Alert } from "@components/ui/Alert"; type ErrorLike = { message: string; }; type JSXElementOrNull = JSX.Element | null; interface QueryCellOptionsBase { query: UseQueryResult; error?: ( query: QueryObserverLoadingErrorResult | QueryObserverRefetchErrorResult ) => JSXElementOrNull; loading?: (query: QueryObserverLoadingResult) => JSXElementOrNull; idle?: (query: QueryObserverIdleResult) => JSXElementOrNull; } interface QueryCellOptionsNoEmpty extends QueryCellOptionsBase { success: (query: QueryObserverSuccessResult) => JSXElementOrNull; } interface QueryCellOptionsWithEmpty extends QueryCellOptionsBase { success: (query: QueryObserverSuccessResult, TError>) => JSXElementOrNull; /** * If there's no data (`null`, `undefined`, or `[]`), render this component */ empty: (query: QueryObserverSuccessResult) => JSXElementOrNull; } export function QueryCell( opts: QueryCellOptionsWithEmpty ): JSXElementOrNull; export function QueryCell( opts: QueryCellOptionsNoEmpty ): JSXElementOrNull; export function QueryCell( opts: QueryCellOptionsNoEmpty | QueryCellOptionsWithEmpty ) { const { query } = opts; if (query.status === "success") { if ("empty" in opts && (query.data == null || (Array.isArray(query.data) && query.data.length === 0))) { return opts.empty(query); } return opts.success(query as any); } if (query.status === "error") { return ( opts.error?.(query) ?? ( ) ); } if (query.status === "loading") { return opts.loading?.(query) ?? ; } if (query.status === "idle") { return opts.idle?.(query) ?? ; } // impossible state return null; }