fix: makeObservable field support old decorators for inheritance cases; ci/cd: add gh jobs; test: add simple unit tests for mobx query

Author: js2me

.eslintignore

@@ -15,4 +15,5 @@ jsconfig.json
 *.json
 .eslintrc.cjs
 post-build.mjs
-coverage
+coverage
+vitest.config.ts

.github/workflows/build.yaml

@@ -0,0 +1,30 @@
+name: Build
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  job:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        with:
+          run_install: false
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build the project
+        run: pnpm build

src/mobx-inifinite-query.ts

@@ -140,12 +140,13 @@ export class MobxInfiniteQuery<
       disposer.add(() => this.dispose());
     }
 
-    makeObservable<this, 'updateResult'>(this, {
-      _result: observable.ref,
-      setData: action.bound,
-      update: action.bound,
-      updateResult: action.bound,
-    });
+    observable.ref(this, '_result');
+    observable.ref(this, 'isResultRequsted');
+    action.bound(this, 'setData');
+    action.bound(this, 'update');
+    action.bound(this, 'updateResult');
+
+    makeObservable(this);
 
     const mergedOptions = {
       ...options,

src/mobx-mutation.ts

@@ -62,14 +62,10 @@ export class MobxMutation<
       disposer.add(() => this.dispose());
     }
 
-    makeObservable<this, 'updateResult'>(
-      this,
-      {
-        result: observable.ref,
-        updateResult: action.bound,
-      },
-      { deep: false },
-    );
+    observable.ref(this, 'result');
+    action.bound(this, 'updateResult');
+
+    makeObservable(this);
 
     this.mutationOptions = this.queryClient.defaultMutationOptions(options);
 

src/mobx-query.test.ts

@@ -1,15 +1,53 @@
-import { describe, expect, it } from 'vitest';
-import { MobxQuery } from './mobx-query';
-import { QueryClient } from '@tanstack/query-core';
+import { DefaultError, QueryClient, QueryKey } from '@tanstack/query-core';
+import { reaction, when } from 'mobx';
+import { describe, expect, it, vi } from 'vitest';
 
+import { MobxQuery, MobxQueryConfig } 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 });
+    }
+  }
+
   it('to be defined', () => {
-    const mobxQuery = new MobxQuery({
-      queryClient: new QueryClient(),
+    const mobxQuery = new TestMobxQuery({
       queryKey: ['test'],
-      queryFn: () => {}
-    })
+      queryFn: () => {},
+    });
     expect(mobxQuery).toBeDefined();
-  })
-}); 
+  });
+
+  it('"result" field should be reactive', async () => {
+    let counter = 0;
+    const mobxQuery = new TestMobxQuery({
+      queryKey: ['test'],
+      queryFn: () => {
+        return ++counter;
+      },
+    });
+    const spy = vi.fn();
+
+    const dispose = reaction(
+      () => mobxQuery.result,
+      (result) => {
+        spy(result.data);
+      },
+    );
+
+    await when(() => mobxQuery.result.isLoading);
+
+    expect(spy).toBeCalledTimes(1);
+    expect(spy).nthCalledWith(1, 1);
+
+    dispose();
+  });
+});

src/mobx-query.ts

@@ -106,19 +106,13 @@ export class MobxQuery<
       disposer.add(() => this.dispose());
     }
 
-    makeObservable<this, 'updateResult' | '_result'>(
-      this,
-      {
-        _result: observable.ref,
-        isResultRequsted: observable.ref,
-        setData: action.bound,
-        update: action.bound,
-        updateResult: action.bound,
-      },
-      {
-        deep: false,
-      },
-    );
+    observable.ref(this, '_result');
+    observable.ref(this, 'isResultRequsted');
+    action.bound(this, 'setData');
+    action.bound(this, 'update');
+    action.bound(this, 'updateResult');
+
+    makeObservable(this);
 
     const mergedOptions = {
       ...options,