feat: transformError; feat: query and mutation flat access result properties

Author: js2me

.changeset/itchy-beans-hammer.md

@@ -0,0 +1,5 @@
+---
+"mobx-tanstack-query": minor
+---
+
+ability to get access to query\mutation result properties using query._ or mutation._ properties access

.changeset/quiet-geese-dress.md

@@ -0,0 +1,5 @@
+---
+"mobx-tanstack-query": minor
+---
+
+`transformError` option for queries and mutations

src/constants.ts

@@ -0,0 +1,4 @@
+/**
+ * A special placeholder that is needed for `enableOnDemand` option
+ */
+export const enableHolder = () => false;

src/inifinite-query.ts

@@ -8,9 +8,12 @@ import {
   QueryKey,
   InfiniteQueryObserverResult,
   InfiniteData,
+  Updater,
+  FetchStatus,
+  QueryStatus,
+  InfiniteQueryObserverBaseResult,
   RefetchOptions,
   SetDataOptions,
-  Updater,
 } from '@tanstack/query-core';
 import { LinkedAbortController } from 'linked-abort-controller';
 import {
@@ -21,6 +24,7 @@ import {
   runInAction,
 } from 'mobx';
 
+import { enableHolder } from './constants';
 import {
   InfiniteQueryConfig,
   InfiniteQueryDoneListener,
@@ -33,17 +37,54 @@ import {
   InfiniteQueryUpdateOptionsAllVariants,
 } from './inifinite-query.types';
 import { AnyQueryClient, QueryClientHooks } from './query-client.types';
+import { QueryFeatures } from './query.types';
 import { lazyObserve } from './utils/lazy-observe';
 
-const enableHolder = () => false;
+const originalQueryProperties = [
+  'data',
+  'dataUpdatedAt',
+  'error',
+  'errorUpdatedAt',
+  'failureCount',
+  'failureReason',
+  'errorUpdateCount',
+  'isError',
+  'isFetched',
+  'isFetching',
+  'isLoading',
+  'isPending',
+  'isLoadingError',
+  'isPaused',
+  'isPlaceholderData',
+  'isRefetchError',
+  'isRefetching',
+  'isStale',
+  'isSuccess',
+  'status',
+  'fetchStatus',
+  'fetchNextPage',
+  'fetchPreviousPage',
+  'hasNextPage',
+  'hasPreviousPage',
+  'isFetchNextPageError',
+  'isFetchingNextPage',
+  'isFetchPreviousPageError',
+  'isFetchingPreviousPage',
+] as const satisfies (keyof InfiniteQueryObserverBaseResult)[];
 
 export class InfiniteQuery<
-  TQueryFnData = unknown,
-  TError = DefaultError,
-  TPageParam = unknown,
-  TData = InfiniteData<TQueryFnData, TPageParam>,
-  TQueryKey extends QueryKey = QueryKey,
-> implements Disposable
+    TQueryFnData = unknown,
+    TError = DefaultError,
+    TPageParam = unknown,
+    TData = InfiniteData<TQueryFnData, TPageParam>,
+    TQueryKey extends QueryKey = QueryKey,
+  >
+  implements
+    Disposable,
+    Pick<
+      InfiniteQueryObserverBaseResult<TData, TError>,
+      (typeof originalQueryProperties)[number]
+    >
 {
   protected abortController: LinkedAbortController;
   protected queryClient: AnyQueryClient;
@@ -58,6 +99,133 @@ export class InfiniteQuery<
     TQueryKey
   >;
 
+  /**
+   * The last successfully resolved data for the query.
+   */
+  data!: TData | undefined;
+  /**
+   * The timestamp for when the query most recently returned the `status` as `"success"`.
+   */
+  dataUpdatedAt!: number;
+  /**
+   * The error object for the query, if an error was thrown.
+   * - Defaults to `null`.
+   */
+  error!: TError | null;
+  /**
+   * The timestamp for when the query most recently returned the `status` as `"error"`.
+   */
+  errorUpdatedAt!: number;
+  /**
+   * The failure count for the query.
+   * - Incremented every time the query fails.
+   * - Reset to `0` when the query succeeds.
+   */
+  failureCount!: number;
+  /**
+   * The failure reason for the query retry.
+   * - Reset to `null` when the query succeeds.
+   */
+  failureReason!: TError | null;
+  /**
+   * The sum of all errors.
+   */
+  errorUpdateCount!: number;
+  /**
+   * A derived boolean from the `status` variable, provided for convenience.
+   * - `true` if the query attempt resulted in an error.
+   */
+  isError!: boolean;
+  /**
+   * Will be `true` if the query has been fetched.
+   */
+  isFetched!: boolean;
+  /**
+   * A derived boolean from the `fetchStatus` variable, provided for convenience.
+   * - `true` whenever the `queryFn` is executing, which includes initial `pending` as well as background refetch.
+   */
+  isFetching!: boolean;
+  /**
+   * Is `true` whenever the first fetch for a query is in-flight.
+   * - Is the same as `isFetching && isPending`.
+   */
+  isLoading!: boolean;
+  /**
+   * Will be `pending` if there's no cached data and no query attempt was finished yet.
+   */
+  isPending!: boolean;
+  /**
+   * Will be `true` if the query failed while fetching for the first time.
+   */
+  isLoadingError!: boolean;
+  /**
+   * A derived boolean from the `fetchStatus` variable, provided for convenience.
+   * - The query wanted to fetch, but has been `paused`.
+   */
+  isPaused!: boolean;
+  /**
+   * Will be `true` if the data shown is the placeholder data.
+   */
+  isPlaceholderData!: boolean;
+  /**
+   * Will be `true` if the query failed while refetching.
+   */
+  isRefetchError!: boolean;
+  /**
+   * Is `true` whenever a background refetch is in-flight, which _does not_ include initial `pending`.
+   * - Is the same as `isFetching && !isPending`.
+   */
+  isRefetching!: boolean;
+  /**
+   * Will be `true` if the data in the cache is invalidated or if the data is older than the given `staleTime`.
+   */
+  isStale!: boolean;
+  /**
+   * A derived boolean from the `status` variable, provided for convenience.
+   * - `true` if the query has received a response with no errors and is ready to display its data.
+   */
+  isSuccess!: boolean;
+  /**
+   * The status of the query.
+   * - Will be:
+   *   - `pending` if there's no cached data and no query attempt was finished yet.
+   *   - `error` if the query attempt resulted in an error.
+   *   - `success` if the query has received a response with no errors and is ready to display its data.
+   */
+  status!: QueryStatus;
+  /**
+   * The fetch status of the query.
+   * - `fetching`: Is `true` whenever the queryFn is executing, which includes initial `pending` as well as background refetch.
+   * - `paused`: The query wanted to fetch, but has been `paused`.
+   * - `idle`: The query is not fetching.
+   * - See [Network Mode](https://tanstack.com/query/latest/docs/framework/react/guides/network-mode) for more information.
+   */
+  fetchStatus!: FetchStatus;
+  /**
+   * Will be `true` if there is a next page to be fetched (known via the `getNextPageParam` option).
+   */
+  hasNextPage!: boolean;
+  /**
+   * Will be `true` if there is a previous page to be fetched (known via the `getPreviousPageParam` option).
+   */
+  hasPreviousPage!: boolean;
+  /**
+   * Will be `true` if the query failed while fetching the next page.
+   */
+  isFetchNextPageError!: boolean;
+  /**
+   * Will be `true` while fetching the next page with `fetchNextPage`.
+   */
+  isFetchingNextPage!: boolean;
+  /**
+   * Will be `true` if the query failed while fetching the previous page.
+   */
+  isFetchPreviousPageError!: boolean;
+  /**
+   * Will be `true` while fetching the previous page with `fetchPreviousPage`.
+   */
+  isFetchingPreviousPage!: boolean;
+
   options: InfiniteQueryOptions<
     TQueryFnData,
     TError,
@@ -159,6 +327,7 @@ export class InfiniteQuery<
     this.hooks =
       'hooks' in this.queryClient ? this.queryClient.hooks : undefined;
     this.isLazy = this.config.lazy;
+    let transformError: QueryFeatures['transformError'] = config.transformError;
 
     if ('queryFeatures' in queryClient) {
       if (this.config.lazy === undefined) {
@@ -168,6 +337,9 @@ export class InfiniteQuery<
         this.isEnabledOnResultDemand =
           queryClient.queryFeatures.enableOnDemand ?? false;
       }
+      if (!transformError) {
+        transformError = queryClient.queryFeatures.transformError;
+      }
     }
 
     observable.deep(this, '_result');
@@ -177,6 +349,19 @@ export class InfiniteQuery<
     action.bound(this, 'update');
     action.bound(this, 'updateResult');
 
+    originalQueryProperties.forEach((property) => {
+      if (this[property]) return;
+      if (property === 'error' && transformError) {
+        Object.defineProperty(this, property, {
+          get: () => transformError(this.result[property]),
+        });
+      } else {
+        Object.defineProperty(this, property, {
+          get: () => this.result[property],
+        });
+      }
+    });
+
     makeObservable(this);
 
     const isQueryKeyDynamic = typeof queryKeyOrDynamicQueryKey === 'function';
@@ -323,12 +508,18 @@ export class InfiniteQuery<
     );
   }
 
+  /**
+   * This function allows you to fetch the next "page" of results.
+   */
   fetchNextPage(options?: FetchNextPageOptions | undefined) {
-    return this.queryObserver.fetchNextPage(options);
+    return this._result.fetchNextPage(options);
   }
 
+  /**
+   * This function allows you to fetch the previous "page" of results.
+   */
   fetchPreviousPage(options?: FetchPreviousPageOptions | undefined) {
-    return this.queryObserver.fetchPreviousPage(options);
+    return this._result.fetchPreviousPage(options);
   }
 
   update(