v4 (#77)

Author: k-ode

.github/workflows/unit-tests.yml

@@ -18,7 +18,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: 14
+          node-version: 18
 
       - name: Checkout repository
         uses: actions/checkout@v2

packages/mst-query/package-lock.json

@@ -1,15 +1,24 @@
 {
     "name": "mst-query",
-    "version": "3.4.0-canary.16",
+    "version": "3.4.0-canary.21",
     "description": "Query library for mobx-state-tree",
     "source": "src/index.ts",
-    "main": "dist/mst-query.js",
-    "exports": "./dist/mst-query.modern.js",
-    "module": "dist/mst-query.module.js",
-    "unpkg": "dist/mst-query.umd.js",
+    "type": "module",
+    "main": "dist/index.cjs",
+    "module": "dist/index.js",
     "types": "dist/index.d.ts",
+    "exports": {
+        "import": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js"
+        },
+        "require": {
+            "types": "./dist/index.d.cts",
+            "require": "./dist/index.cjs"
+        }
+    },
     "scripts": {
-        "build": "microbundle --tsconfig tsconfig.build.json --no-compress --external mobx,mobx-state-tree,react --jsx React.createElement",
+        "build": "tsup src/index.ts --format cjs,esm --dts --clean --sourcemap",
         "watch": "vitest",
         "test": "vitest run"
     },
@@ -23,25 +32,27 @@
         "dist"
     ],
     "devDependencies": {
-        "@testing-library/react": "^13.4.0",
-        "@types/react": "^18.3.3",
-        "jsdom": "^20.0.1",
-        "microbundle": "^0.15.0",
-        "mobx": "6.6.1",
-        "mobx-react": "7.5.2",
-        "mobx-state-tree": "5.1.5",
-        "prettier": "^2.2.1",
-        "react": "^18.3.1",
-        "react-dom": "^18.3.1",
-        "typescript": "^4.6.4",
-        "vitest": "^0.24.3"
+        "@testing-library/react": "16.0.1",
+        "@types/react": "18.3.3",
+        "jsdom": "25.0.1",
+        "mobx": "6.13.5",
+        "mobx-react": "9.1.1",
+        "mobx-state-tree": "6.0.1",
+        "prettier": "3.3.3",
+        "react": "18.3.1",
+        "react-dom": "18.3.1",
+        "tsup": "8.3.0",
+        "typescript": "5.6.3",
+        "vitest": "2.1.3"
     },
     "peerDependencies": {
-        "mobx": "^6.0.0",
-        "mobx-state-tree": "^5.0.0"
+        "mobx": ">=6.0.0 <7.0.0",
+        "mobx-state-tree": ">=5.0.0 <7.0.0",
+        "react": ">=18.0.0 <20.0.0",
+        "react-dom": ">=18.0.0 <20.0.0"
     },
     "dependencies": {
-        "@wry/equality": "^0.4.0"
+        "@wry/equality": "0.5.7"
     },
     "volta": {
         "node": "18.12.1"

packages/mst-query/package.json

@@ -1,4 +1,4 @@
-import equal from '@wry/equality';
+import { equal } from '@wry/equality';
 import { makeObservable, observable, action } from 'mobx';
 import {
     addDisposer,
@@ -15,7 +15,7 @@ import {
     recordPatches,
     unprotect,
 } from 'mobx-state-tree';
-import { MutationReturnType, QueryReturnType } from './create';
+import { MutationReturnType } from './create';
 import { merge } from './merge';
 import { QueryClient, EndpointType } from './QueryClient';
 
@@ -35,7 +35,6 @@ type QueryHookOptions = {
 
 type NotifyOptions = {
     onMutate?: boolean;
-    onQueryMore?: boolean;
 };
 
 type OnResponseOptions = {
@@ -114,7 +113,7 @@ function subscribe(target: any, options: any) {
 
 export function onMutate<T extends Instance<MutationReturnType>>(
     target: T,
-    callback: (data: T['data'], self: T) => void
+    callback: (data: T['data'], self: T) => void,
 ) {
     subscribe(target, {
         onMutate: (data: any, self: any) => {
@@ -126,20 +125,6 @@ export function onMutate<T extends Instance<MutationReturnType>>(
     });
 }
 
-export function onQueryMore<T extends Instance<QueryReturnType>>(
-    target: T,
-    callback: (data: T['data'], self: T) => void
-) {
-    subscribe(target, {
-        onQueryMore: (data: any, self: any) => {
-            const root = getRoot(self);
-            unprotect(root);
-            callback(data, self);
-            protect(root);
-        },
-    });
-}
-
 export class MstQueryHandler {
     isLoading = false;
     isRefetching = false;
@@ -148,9 +133,9 @@ export class MstQueryHandler {
     error: any = null;
     queryObservers = [] as any[];
 
-    result: any;
     options: {
         endpoint: EndpointType;
+        onQueryMore?: (options: any) => void;
         meta?: { [key: string]: any };
     };
 
@@ -184,7 +169,6 @@ export class MstQueryHandler {
             error: observable,
             hydrate: action.bound,
             setData: action.bound,
-            setResult: action.bound,
             setError: action.bound,
             run: action.bound,
             query: action.bound,
@@ -224,9 +208,10 @@ export class MstQueryHandler {
             meta: options.meta ?? {},
             signal: this.abortController.signal,
             setData: this.model.setData,
+            query: this.model,
         };
 
-        return endpoint(opts, this.model).then((result: any) => {
+        return endpoint(opts).then((result: any) => {
             if (abortController?.signal.aborted || this.isDisposed) {
                 throw new DisposedError();
             }
@@ -285,7 +270,7 @@ export class MstQueryHandler {
     query(options: any = {}): Promise<() => any> {
         return this.run(options).then(
             (result) => this.onSuccess(result),
-            (err) => this.onError(err)
+            (err) => this.onError(err),
         );
     }
 
@@ -299,7 +284,7 @@ export class MstQueryHandler {
         }
         return this.run(options).then(
             (result) => this.onSuccess(result, { updateRecorder }),
-            (err) => this.onError(err, { updateRecorder })
+            (err) => this.onError(err, { updateRecorder }),
         );
     }
 
@@ -312,7 +297,7 @@ export class MstQueryHandler {
 
         return this.run(options).then(
             (result) => this.onSuccess(result, { shouldUpdate: false }),
-            (err) => this.onError(err, { shouldUpdate: false })
+            (err) => this.onError(err, { shouldUpdate: false }),
         );
     }
 
@@ -325,7 +310,7 @@ export class MstQueryHandler {
 
         return this.run(options).then(
             (result) => this.onSuccess(result),
-            (err) => this.onError(err)
+            (err) => this.onError(err),
         );
     }
 
@@ -352,8 +337,6 @@ export class MstQueryHandler {
                 this.markedAsStale = false;
             }
 
-            this.setResult(result);
-
             let data;
             if (shouldUpdate) {
                 data = this.setData(result);
@@ -376,7 +359,12 @@ export class MstQueryHandler {
 
             if (this.isFetchingMore) {
                 this.isFetchingMore = false;
-                this.notify({ onQueryMore: true }, data, this.model);
+                this.options.onQueryMore?.({
+                    data,
+                    pagination: this.model.variables.pagination,
+                    request: this.model.variables.request,
+                    query: this.model,
+                });
             }
 
             if (!this.isFetched) {
@@ -458,18 +446,10 @@ export class MstQueryHandler {
         }
     }
 
-    setResult(result: any) {
-        this.result = result;
-    }
-
     setError(error: any) {
         this.error = error;
     }
 
-    setOptions(options: any) {
-        this.options = { ...this.options, ...options };
-    }
-
     setVariables(variables: any) {
         let request = variables.request ?? EmptyRequest;
         let pagination = variables.pagination ?? EmptyPagination;
@@ -509,7 +489,7 @@ export class MstQueryHandler {
                 this.model.data = merge(
                     data,
                     this.type.properties.data,
-                    this.queryClient.config.env
+                    this.queryClient.config.env,
                 );
             }
         });

packages/mst-query/src/MstQueryHandler.ts

@@ -8,8 +8,8 @@ export type EndpointType = (
         meta: { [key: string]: any };
         signal: AbortSignal;
         setData: (data: any) => any;
+        query: any
     },
-    model: any
 ) => Promise<any>;
 
 type QueryClientConfig<T extends IAnyModelType> = {