fix(tanstack): query result $optimistic typing (#372)

* fix(tanstack): query result $optimistic typing

* update

Author: ymc9

packages/clients/tanstack-query/src/react.ts

@@ -57,7 +57,7 @@ import {
     type ExtraMutationOptions,
     type ExtraQueryOptions,
 } from './utils/common';
-import type { TrimDelegateModelOperations } from './utils/types';
+import type { TrimDelegateModelOperations, WithOptimistic } from './utils/types';
 
 export type { FetchFn } from './utils/common';
 
@@ -93,12 +93,14 @@ function useHooksContext() {
 
 export type ModelQueryOptions<T> = Omit<UseQueryOptions<T, DefaultError>, 'queryKey'> & ExtraQueryOptions;
 
-export type ModelQueryResult<T> = UseQueryResult<T, DefaultError> & { queryKey: QueryKey };
+export type ModelQueryResult<T> = UseQueryResult<WithOptimistic<T>, DefaultError> & { queryKey: QueryKey };
 
 export type ModelSuspenseQueryOptions<T> = Omit<UseSuspenseQueryOptions<T, DefaultError>, 'queryKey'> &
     ExtraQueryOptions;
 
-export type ModelSuspenseQueryResult<T> = UseSuspenseQueryResult<T, DefaultError> & { queryKey: QueryKey };
+export type ModelSuspenseQueryResult<T> = UseSuspenseQueryResult<WithOptimistic<T>, DefaultError> & {
+    queryKey: QueryKey;
+};
 
 export type ModelInfiniteQueryOptions<T> = Omit<
     UseInfiniteQueryOptions<T, DefaultError, InfiniteData<T>>,

packages/clients/tanstack-query/src/svelte.ts

@@ -54,7 +54,7 @@ import {
     type ExtraMutationOptions,
     type ExtraQueryOptions,
 } from './utils/common';
-import type { TrimDelegateModelOperations } from './utils/types';
+import type { TrimDelegateModelOperations, WithOptimistic } from './utils/types';
 
 export type { FetchFn } from './utils/common';
 
@@ -91,7 +91,9 @@ function getQuerySettings() {
 
 export type ModelQueryOptions<T> = Omit<CreateQueryOptions<T, DefaultError>, 'queryKey'> & ExtraQueryOptions;
 
-export type ModelQueryResult<T> = Readable<UnwrapStore<CreateQueryResult<T, DefaultError>> & { queryKey: QueryKey }>;
+export type ModelQueryResult<T> = Readable<
+    UnwrapStore<CreateQueryResult<WithOptimistic<T>, DefaultError>> & { queryKey: QueryKey }
+>;
 
 export type ModelInfiniteQueryOptions<T> = Omit<
     CreateInfiniteQueryOptions<T, DefaultError, InfiniteData<T>>,

packages/clients/tanstack-query/src/utils/types.ts

@@ -30,3 +30,20 @@ export type TrimDelegateModelOperations<
     Model extends GetModels<Schema>,
     T extends Record<string, unknown>,
 > = IsDelegateModel<Schema, Model> extends true ? Omit<T, HooksOperationsIneligibleForDelegateModels> : T;
+
+export type WithOptimistic<T> =
+    T extends Array<infer U>
+        ? Array<
+              U & {
+                  /**
+                   * Indicates if the item is in an optimistic update state
+                   */
+                  $optimistic?: boolean;
+              }
+          >
+        : T & {
+              /**
+               * Indicates if the item is in an optimistic update state
+               */
+              $optimistic?: boolean;
+          };

packages/clients/tanstack-query/src/vue.ts

@@ -52,7 +52,7 @@ import {
     type ExtraMutationOptions,
     type ExtraQueryOptions,
 } from './utils/common';
-import type { TrimDelegateModelOperations } from './utils/types';
+import type { TrimDelegateModelOperations, WithOptimistic } from './utils/types';
 
 export type { FetchFn } from './utils/common';
 export const VueQueryContextKey = 'zenstack-vue-query-context';
@@ -86,7 +86,7 @@ export type ModelQueryOptions<T> = MaybeRefOrGetter<
     Omit<UnwrapRef<UseQueryOptions<T, DefaultError>>, 'queryKey'> & ExtraQueryOptions
 >;
 
-export type ModelQueryResult<T> = UseQueryReturnType<T, DefaultError> & { queryKey: QueryKey };
+export type ModelQueryResult<T> = UseQueryReturnType<WithOptimistic<T>, DefaultError> & { queryKey: QueryKey };
 
 export type ModelInfiniteQueryOptions<T> = MaybeRefOrGetter<
     Omit<UnwrapRef<UseInfiniteQueryOptions<T, DefaultError, InfiniteData<T>>>, 'queryKey' | 'initialPageParam'>

packages/clients/tanstack-query/test/react-typing-test.ts

@@ -16,8 +16,10 @@ check(client.user.useFindUnique({ select: { email: true } }).data.name);
 check(client.user.useFindUnique({ where: { id: '1' }, include: { posts: true } }).data?.posts[0]?.title);
 
 check(client.user.useFindFirst().data?.email);
+check(client.user.useFindFirst().data?.$optimistic);
 
 check(client.user.useFindMany().data?.[0]?.email);
+check(client.user.useFindMany().data?.[0]?.$optimistic);
 
 check(client.user.useInfiniteFindMany().data?.pages[0]?.[0]?.email);
 check(
@@ -28,6 +30,8 @@ check(
         },
     ).data?.pages[1]?.[0]?.email,
 );
+// @ts-expect-error
+check(client.user.useInfiniteFindMany().data?.pages[0]?.[0]?.$optimistic);
 
 check(client.user.useSuspenseFindMany().data[0]?.email);
 check(client.user.useSuspenseInfiniteFindMany().data.pages[0]?.[0]?.email);

packages/clients/tanstack-query/test/svelte-typing-test.ts

@@ -17,8 +17,11 @@ check(get(client.user.useFindUnique({ select: { email: true } })).data.name);
 check(get(client.user.useFindUnique({ where: { id: '1' }, include: { posts: true } })).data?.posts[0]?.title);
 
 check(get(client.user.useFindFirst()).data?.email);
+check(get(client.user.useFindFirst()).data?.$optimistic);
 
 check(get(client.user.useFindMany()).data?.[0]?.email);
+check(get(client.user.useFindMany()).data?.[0]?.$optimistic);
+
 check(get(client.user.useInfiniteFindMany()).data?.pages[0]?.[0]?.email);
 check(
     get(
@@ -30,6 +33,8 @@ check(
         ),
     ).data?.pages[1]?.[0]?.email,
 );
+// @ts-expect-error
+check(get(client.user.useInfiniteFindMany()).data?.pages[0]?.[0]?.$optimistic);
 
 check(get(client.user.useCount()).data?.toFixed(2));
 check(get(client.user.useCount({ select: { email: true } })).data?.email.toFixed(2));

packages/clients/tanstack-query/test/vue-typing-test.ts

@@ -16,8 +16,10 @@ check(client.user.useFindUnique({ select: { email: true } }).data.name);
 check(client.user.useFindUnique({ where: { id: '1' }, include: { posts: true } }).data.value?.posts[0]?.title);
 
 check(client.user.useFindFirst().data.value?.email);
+check(client.user.useFindFirst().data.value?.$optimistic);
 
 check(client.user.useFindMany().data.value?.[0]?.email);
+check(client.user.useFindMany().data.value?.[0]?.$optimistic);
 
 check(client.user.useInfiniteFindMany().data.value?.pages[0]?.[0]?.email);
 check(
@@ -28,6 +30,8 @@ check(
         },
     ).data.value?.pages[1]?.[0]?.email,
 );
+// @ts-expect-error
+check(client.user.useInfiniteFindMany().data.value?.pages[0]?.[0]?.$optimistic);
 
 check(client.user.useCount().data.value?.toFixed(2));
 check(client.user.useCount({ select: { email: true } }).data.value?.email.toFixed(2));