import type { QueryObserverLoadingErrorResult, QueryObserverLoadingResult, QueryObserverRefetchErrorResult, QueryObserverSuccessResult, UseQueryResult, } from "@tanstack/react-query"; import type { ReactNode } from "react"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import type { TRPCClientErrorLike } from "@calcom/trpc/client"; import type { DecorateProcedure } from "@calcom/trpc/react/shared"; import type { AnyQueryProcedure, inferProcedureInput, inferProcedureOutput } from "@calcom/trpc/server"; import type { AppRouter } from "@calcom/trpc/server/routers/_app"; import { Alert, Loader } from "@calcom/ui"; import type { UseTRPCQueryOptions } from "@trpc/react-query/shared"; type ErrorLike = { message: string; }; type JSXElementOrNull = JSX.Element | null; interface QueryCellOptionsBase { query: UseQueryResult; customLoader?: ReactNode; error?: ( query: QueryObserverLoadingErrorResult | QueryObserverRefetchErrorResult ) => JSXElementOrNull; loading?: (query: QueryObserverLoadingResult | null) => 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; /** @deprecated Use `trpc.useQuery` instead. */ export function QueryCell( opts: QueryCellOptionsNoEmpty | QueryCellOptionsWithEmpty ) { const { query } = opts; const { isLocaleReady } = useLocale(); const StatusLoader = opts.customLoader || ; // Fixes edge case where this can return null form query cell if (query.status === "loading" || !isLocaleReady) { return opts.loading?.(query.status === "loading" ? query : null) ?? StatusLoader; } if (query.status === "success") { if ("empty" in opts && (query.data == null || (Array.isArray(query.data) && query.data.length === 0))) { return opts.empty(query); } // eslint-disable-next-line @typescript-eslint/no-explicit-any return opts.success(query as any); } if (query.status === "error") { return ( opts.error?.(query) ?? ( ) ); } // impossible state return null; } type TError = TRPCClientErrorLike; const withQuery = < TQuery extends AnyQueryProcedure, TInput = inferProcedureInput, TOutput = inferProcedureOutput >( queryProcedure: DecorateProcedure, inferProcedureOutput>, input?: TInput, params?: UseTRPCQueryOptions ) => { return function WithQuery( opts: Omit< Partial> & QueryCellOptionsNoEmpty, "query" > ) { const query = queryProcedure.useQuery(input, params); return ; }; }; export { withQuery };