feat: add support for queryKey as reactive fn; test: add more tests for mobx query

js2me · js2me · commit a4649a82e65c · 2024-12-13T18:00:33.000+03:00
diff --git a/package.json b/package.json
@@ -49,9 +49,9 @@
     "@vitejs/plugin-react-swc": "3.7.2",
     "@vitest/coverage-istanbul": "2.1.6",
     "eslint": "8.57.0",
+    "js2me-eslint-config": "1.0.5",
     "js2me-exports-post-build-script": "2.0.17",
     "jsdom": "25.0.1",
-    "js2me-eslint-config": "1.0.5",
     "typescript": "5.4.5",
     "vitest": "2.1.4"
   },
diff --git a/src/mobx-inifinite-query.ts b/src/mobx-inifinite-query.ts
@@ -26,22 +26,57 @@ import {
 
 import { MobxQueryInvalidateParams, MobxQueryResetParams } from './mobx-query';
 
+export interface MobxInfiniteQueryDynamicOptions<
+  TData,
+  TError = DefaultError,
+  TQueryKey extends QueryKey = QueryKey,
+  TPageParam = unknown,
+> extends Partial<
+    Omit<
+      InfiniteQueryObserverOptions<
+        TData,
+        TError,
+        InfiniteData<TData>,
+        InfiniteData<TData>,
+        TQueryKey,
+        TPageParam
+      >,
+      'queryFn' | 'enabled' | 'queryKeyHashFn'
+    >
+  > {
+  enabled?: boolean;
+}
+
 export interface MobxInfiniteQueryConfig<
   TData,
   TError = DefaultError,
   TQueryKey extends QueryKey = QueryKey,
   TPageParam = unknown,
 > extends Partial<
-    InfiniteQueryObserverOptions<
-      TData,
-      TError,
-      InfiniteData<TData>,
-      InfiniteData<TData>,
-      TQueryKey,
-      TPageParam
+    Omit<
+      InfiniteQueryObserverOptions<
+        TData,
+        TError,
+        InfiniteData<TData>,
+        InfiniteData<TData>,
+        TQueryKey,
+        TPageParam
+      >,
+      'queryKey'
     >
   > {
   queryClient: QueryClient;
+  /**
+   * TanStack Query manages query caching for you based on query keys.
+   * Query keys have to be an Array at the top level, and can be as simple as an Array with a single string, or as complex as an array of many strings and nested objects.
+   * As long as the query key is serializable, and unique to the query's data, you can use it!
+   *
+   * **Important:** If you define it as a function then it will be reactively updates query origin key every time
+   * when observable values inside the function changes
+   *
+   * @link https://tanstack.com/query/v4/docs/framework/react/guides/query-keys#simple-query-keys
+   */
+  queryKey?: TQueryKey | (() => TQueryKey);
   onInit?: (
     query: MobxInfiniteQuery<TData, TError, TQueryKey, TPageParam>,
   ) => void;
@@ -65,16 +100,7 @@ export interface MobxInfiniteQueryConfig<
         NoInfer<TPageParam>
       >
     >,
-  ) => Partial<
-    InfiniteQueryObserverOptions<
-      TData,
-      TError,
-      InfiniteData<TData>,
-      InfiniteData<TData>,
-      TQueryKey,
-      TPageParam
-    >
-  >;
+  ) => MobxInfiniteQueryDynamicOptions<TData, TError, TQueryKey, TPageParam>;
 
   /**
    * Reset query when dispose is called
@@ -130,6 +156,7 @@ export class MobxInfiniteQuery<
     abortSignal: outerAbortSignal,
     resetOnDispose,
     enableOnDemand,
+    queryKey: queryKeyOrDynamicQueryKey,
     ...options
   }: MobxInfiniteQueryConfig<TData, TError, TQueryKey, TPageParam>) {
     this.abortController = new LinkedAbortController(outerAbortSignal);
@@ -155,6 +182,26 @@ export class MobxInfiniteQuery<
       ...getDynamicOptions?.(this),
     };
 
+    if (queryKeyOrDynamicQueryKey) {
+      if (typeof queryKeyOrDynamicQueryKey === 'function') {
+        mergedOptions.queryKey = queryKeyOrDynamicQueryKey();
+
+        reaction(
+          () => queryKeyOrDynamicQueryKey(),
+          (queryKey) => {
+            this.update({
+              queryKey,
+            });
+          },
+          {
+            signal: this.abortController.signal,
+          },
+        );
+      } else {
+        mergedOptions.queryKey = queryKeyOrDynamicQueryKey;
+      }
+    }
+
     this.options = queryClient.defaultQueryOptions({
       ...mergedOptions,
       queryKey: (mergedOptions.queryKey ?? []) as TQueryKey,
diff --git a/src/mobx-query.test.ts b/src/mobx-query.test.ts
@@ -1,53 +1,216 @@
-import { DefaultError, QueryClient, QueryKey } from '@tanstack/query-core';
-import { reaction, when } from 'mobx';
+import {
+  DefaultError,
+  QueryClient,
+  QueryKey,
+  QueryObserverOptions,
+  QueryObserverResult,
+  RefetchOptions,
+  SetDataOptions,
+  Updater,
+} from '@tanstack/query-core';
+import { observable, reaction, runInAction, when } from 'mobx';
 import { describe, expect, it, vi } from 'vitest';
 
-import { MobxQuery, MobxQueryConfig } from './mobx-query';
+import {
+  MobxQuery,
+  MobxQueryConfig,
+  MobxQueryInvalidateParams,
+} from './mobx-query';
 
-describe('MobxQuery', () => {
-  const testQueryClient = new QueryClient({});
-  class TestMobxQuery<
-    TData,
-    TError = DefaultError,
-    TQueryKey extends QueryKey = any,
-  > extends MobxQuery<TData, TError, TQueryKey> {
-    constructor(
-      options: Omit<MobxQueryConfig<TData, TError, TQueryKey>, 'queryClient'>,
-    ) {
-      super({ ...options, queryClient: testQueryClient });
-    }
+class MobxQueryMock<
+  TData,
+  TError = DefaultError,
+  TQueryKey extends QueryKey = any,
+> extends MobxQuery<TData, TError, TQueryKey> {
+  spies = {
+    queryFn: vi.fn(),
+    setData: vi.fn(),
+    update: vi.fn(),
+    dispose: vi.fn(),
+    refetch: vi.fn(),
+    invalidate: vi.fn(),
+    onDone: vi.fn(),
+    onError: vi.fn(),
+  };
+
+  constructor(
+    options: Omit<MobxQueryConfig<TData, TError, TQueryKey>, 'queryClient'>,
+  ) {
+    super({
+      ...options,
+      queryClient: new QueryClient({}),
+      // @ts-ignore
+      queryFn: vi.fn(options.queryFn),
+    });
+
+    // @ts-ignore
+    this.spies.queryFn = this.options.queryFn;
+
+    this.onDone(this.spies.onDone);
+    this.onError(this.spies.onError);
   }
 
-  it('to be defined', () => {
-    const mobxQuery = new TestMobxQuery({
+  refetch(
+    options?: RefetchOptions | undefined,
+  ): Promise<QueryObserverResult<TData, TError>> {
+    this.spies.refetch(options);
+    return super.refetch(options);
+  }
+
+  invalidate(params?: MobxQueryInvalidateParams | undefined): Promise<void> {
+    this.spies.invalidate(params);
+    return super.invalidate();
+  }
+
+  update(
+    options: Partial<
+      QueryObserverOptions<TData, TError, TQueryKey, TData, QueryKey, never>
+    >,
+  ): void {
+    this.spies.update(options);
+    return super.update(options);
+  }
+
+  setData(
+    updater: Updater<NoInfer<TData> | undefined, NoInfer<TData> | undefined>,
+    options?: SetDataOptions | undefined,
+  ): void {
+    this.spies.setData(updater, options);
+    return super.setData(updater, options);
+  }
+
+  dispose(): void {
+    this.spies.dispose();
+    return super.dispose();
+  }
+}
+
+describe('MobxQuery', () => {
+  it('"result" field to be defined', () => {
+    const mobxQuery = new MobxQueryMock({
       queryKey: ['test'],
       queryFn: () => {},
     });
-    expect(mobxQuery).toBeDefined();
+    expect(mobxQuery.result).toBeDefined();
   });
 
   it('"result" field should be reactive', async () => {
     let counter = 0;
-    const mobxQuery = new TestMobxQuery({
+    const mobxQuery = new MobxQueryMock({
       queryKey: ['test'],
-      queryFn: () => {
-        return ++counter;
-      },
+      queryFn: () => ++counter,
     });
-    const spy = vi.fn();
+    const reactionSpy = vi.fn();
 
     const dispose = reaction(
       () => mobxQuery.result,
-      (result) => {
-        spy(result.data);
-      },
+      (result) => reactionSpy(result),
     );
 
     await when(() => mobxQuery.result.isLoading);
 
-    expect(spy).toBeCalledTimes(1);
-    expect(spy).nthCalledWith(1, 1);
+    expect(reactionSpy).toBeCalled();
+    expect(reactionSpy).toBeCalledWith({ ...mobxQuery.result });
 
     dispose();
   });
+
+  describe('"queryKey" reactive parameter', () => {
+    it('should rerun queryFn after queryKey change', () => {
+      const boxCounter = observable.box(0);
+      const mobxQuery = new MobxQueryMock({
+        queryFn: ({ queryKey }) => {
+          return queryKey[1];
+        },
+        queryKey: () => ['test', boxCounter.get()] as const,
+      });
+
+      runInAction(() => {
+        boxCounter.set(1);
+      });
+
+      expect(mobxQuery.spies.queryFn).toBeCalledTimes(2);
+      expect(mobxQuery.spies.queryFn).nthReturnedWith(1, 0);
+    });
+
+    it('should rerun queryFn after queryKey change', () => {
+      const boxEnabled = observable.box(false);
+      const mobxQuery = new MobxQueryMock({
+        queryFn: () => 10,
+        queryKey: () => ['test', boxEnabled.get()] as const,
+        enabled: ({ queryKey }) => queryKey[1],
+      });
+
+      runInAction(() => {
+        boxEnabled.set(true);
+      });
+
+      expect(mobxQuery.spies.queryFn).toBeCalledTimes(1);
+      expect(mobxQuery.spies.queryFn).nthReturnedWith(1, 10);
+    });
+  });
+
+  describe('"options" reactive parameter', () => {
+    it('"options.queryKey" should updates query', async () => {
+      const boxCounter = observable.box(0);
+      let counter = 0;
+      const mobxQuery = new MobxQueryMock({
+        queryFn: ({ queryKey }) => {
+          counter += queryKey[1] * 10;
+          return counter;
+        },
+        options: () => ({
+          queryKey: ['test', boxCounter.get()] as const,
+        }),
+      });
+
+      runInAction(() => {
+        boxCounter.set(1);
+      });
+
+      expect(mobxQuery.spies.queryFn).toBeCalledTimes(2);
+      expect(mobxQuery.spies.queryFn).nthReturnedWith(1, 0);
+      expect(mobxQuery.spies.queryFn).nthReturnedWith(2, 10);
+    });
+
+    it('"options.enabled" should change "enabled" statement for query (enabled as boolean in options)', async () => {
+      const boxEnabled = observable.box(false);
+      const mobxQuery = new MobxQueryMock({
+        queryFn: ({ queryKey }) => {
+          return queryKey[1];
+        },
+        options: () => ({
+          enabled: boxEnabled.get(),
+          queryKey: ['test', boxEnabled.get() ? 10 : 0] as const,
+        }),
+      });
+
+      runInAction(() => {
+        boxEnabled.set(true);
+      });
+
+      expect(mobxQuery.spies.queryFn).toBeCalledTimes(1);
+      expect(mobxQuery.spies.queryFn).nthReturnedWith(1, 10);
+    });
+
+    it('"options.enabled" should change "enabled" statement for query (enabled as query based fn)', async () => {
+      const boxEnabled = observable.box(false);
+      const mobxQuery = new MobxQueryMock({
+        queryFn: ({ queryKey }) => {
+          return queryKey[1];
+        },
+        enabled: ({ queryKey }) => queryKey[1],
+        options: () => ({
+          queryKey: ['test', boxEnabled.get()] as const,
+        }),
+      });
+
+      runInAction(() => {
+        boxEnabled.set(true);
+      });
+
+      expect(mobxQuery.spies.queryFn).toBeCalledTimes(1);
+      expect(mobxQuery.spies.queryFn).nthReturnedWith(1, true);
+    });
+  });
 });
diff --git a/src/mobx-query.ts b/src/mobx-query.ts
