<QueryCell /> type inference improvement (calcom#849)

* asserts that `query.data` is never `null` when using `<QueryCell />`
subratamal · Oct 4, 2021 · abe4f38 · abe4f38
1 parent f70d92d
commit abe4f38
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 7 deletions.
diff --git a/lib/hooks/QueryCell.tsx → lib/QueryCell.tsx b/lib/hooks/QueryCell.tsx → lib/QueryCell.tsx
@@ -13,28 +13,47 @@ import { Alert } from "@components/ui/Alert";
 type ErrorLike = {
   message: string;
 };
-interface QueryCellOptions<TData, TError extends ErrorLike> {
+
+interface QueryCellOptionsBase<TData, TError extends ErrorLike> {
   query: UseQueryResult<TData, TError>;
-  success: (query: QueryObserverSuccessResult<TData, TError>) => JSX.Element;
   error?: (
     query: QueryObserverLoadingErrorResult<TData, TError> | QueryObserverRefetchErrorResult<TData, TError>
   ) => JSX.Element;
   loading?: (query: QueryObserverLoadingResult<TData, TError>) => JSX.Element;
   idle?: (query: QueryObserverIdleResult<TData, TError>) => JSX.Element;
+}
+
+interface QueryCellOptionsNoEmpty<TData, TError extends ErrorLike>
+  extends QueryCellOptionsBase<TData, TError> {
+  success: (query: QueryObserverSuccessResult<TData, TError>) => JSX.Element;
+}
+
+interface QueryCellOptionsWithEmpty<TData, TError extends ErrorLike>
+  extends QueryCellOptionsBase<TData, TError> {
+  success: (query: QueryObserverSuccessResult<NonNullable<TData>, TError>) => JSX.Element;
   /**
    * If there's no data (`null`, `undefined`, or `[]`), render this component
    */
-  empty?: (query: QueryObserverSuccessResult<TData, TError>) => JSX.Element;
+  empty: (query: QueryObserverSuccessResult<TData, TError>) => JSX.Element;
 }
 
-export function QueryCell<TData, TError extends ErrorLike>(opts: QueryCellOptions<TData, TError>) {
+export function QueryCell<TData, TError extends ErrorLike>(
+  opts: QueryCellOptionsWithEmpty<TData, TError>
+): JSX.Element;
+export function QueryCell<TData, TError extends ErrorLike>(
+  opts: QueryCellOptionsNoEmpty<TData, TError>
+): JSX.Element;
+export function QueryCell<TData, TError extends ErrorLike>(
+  opts: QueryCellOptionsNoEmpty<TData, TError> | QueryCellOptionsWithEmpty<TData, TError>
+) {
   const { query } = opts;
 
   if (query.status === "success") {
-    if (opts.empty && (query.data == null || (Array.isArray(query.data) && query.data.length === 0))) {
+    if ("empty" in opts && (query.data == null || (Array.isArray(query.data) && query.data.length === 0))) {
       return opts.empty(query);
     }
-    return opts.success(query);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return opts.success(query as any);
   }
   if (query.status === "error") {
     return (

diff --git a/pages/bookings/[status].tsx b/pages/bookings/[status].tsx
@@ -1,7 +1,7 @@
 import { CalendarIcon } from "@heroicons/react/outline";
 import { useRouter } from "next/router";
 
-import { QueryCell } from "@lib/hooks/QueryCell";
+import { QueryCell } from "@lib/QueryCell";
 import { inferQueryInput, trpc } from "@lib/trpc";
 
 import BookingsShell from "@components/BookingsShell";