added mutation

sandstone991 · Feb 18, 2024 · ae71db3 · ae71db3
1 parent df859c0
commit ae71db3
Show file tree

Hide file tree

Showing 4 changed files with 197 additions and 98 deletions.
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "mobbing-query",
   "description": "A very tiny wrapper around tanstack/query-core to provide observable queries inside mobx",
   "author": "Ahmed Azzam",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "repository": {
     "type": "git",
     "url": "https://github.com/sandstone991/MobQ"

diff --git a/src/Mutation.ts b/src/Mutation.ts
@@ -0,0 +1,97 @@
+import {
+    action,
+    makeObservable,
+    observable,
+    reaction,
+    onBecomeUnobserved,
+    onBecomeObserved,
+    computed,
+  } from "mobx";
+  import {
+    QueryClient,
+    MutationObserver,
+    MutationObserverResult,
+    MutationOptions,
+  } from "@tanstack/query-core";
+
+  class MobxMutation{
+    private query: _MobxMutation;
+    constructor(...args: ConstructorParameters<typeof _MobxMutation>) {
+      this.query = new _MobxMutation(...args);
+      makeObservable(this, {
+        // @ts-expect-error Mobx can see it don't worry
+        query: observable.ref,
+      });
+      onBecomeObserved(this, "query", () => {
+        this.query.setupDispoables();
+      });
+      onBecomeUnobserved(this, "query", () => {
+        this.query.dispose();
+      });
+      this.query;
+    }
+    get state() {
+      return this.query.state;
+    }
+    mutate(...args: Parameters<MutationObserver["mutate"]>) {
+      this.query.mutate(...args);
+    }
+    updateOptions(options: () => MutationOptions) {
+      this.query.updateOptions(options);
+    }
+  }
+  class _MobxMutation {
+    queryClient: QueryClient;
+    _queryOptions: () => MutationOptions;
+    mObserver!: MutationObserver;
+    public state!: MutationObserverResult;
+    private dispoables: (() => void)[] = [];
+    constructor(queryClient: QueryClient, queryOptions: () => MutationOptions) {
+      makeObservable(this, {
+        state: observable.ref,
+        update: action,
+        mutationOptions: computed,
+        mutate: action,
+        _updateOptions: action.bound,
+      });
+      this.queryClient = queryClient;
+      this._queryOptions = queryOptions;
+    }
+    get mutationOptions() {
+      return this._queryOptions();
+    }
+    setupDispoables() {
+      this.mObserver = new MutationObserver(this.queryClient, this.mutationOptions);
+      this.dispoables.push(
+        ...[
+          this.mObserver.subscribe((e) => {
+            this.update(e);
+          }),
+          reaction(() => this.mutationOptions, this._updateOptions),
+          () => {
+            this.mObserver.reset();
+
+          },
+        ],
+      );
+    }
+    mutate(...args: Parameters<MutationObserver["mutate"]>) {
+      this.mObserver.mutate(...args)
+    }
+    update(state: MutationObserverResult) {
+      this.state = state;
+    }
+    updateOptions(options: () => MutationOptions) {
+      this._queryOptions = options;
+    }
+    _updateOptions() {
+      this.mObserver.setOptions(this.mutationOptions);
+    }
+
+    dispose() {
+      this.dispoables.forEach((fn) => fn());
+    }
+  }
+
+  export { MobxMutation };
+
diff --git a/src/Query.ts b/src/Query.ts
@@ -0,0 +1,97 @@
+import {
+    action,
+    makeObservable,
+    observable,
+    reaction,
+    onBecomeUnobserved,
+    onBecomeObserved,
+    computed,
+  } from "mobx";
+  import {
+    QueryClient,
+    QueryObserver,
+    QueryObserverResult,
+    QueryOptions,
+  } from "@tanstack/query-core";
+
+  class MobxQuery {
+    private query: _MobxQuery;
+    constructor(...args: ConstructorParameters<typeof _MobxQuery>) {
+      this.query = new _MobxQuery(...args);
+      makeObservable(this, {
+        // @ts-expect-error Mobx can see it don't worry
+        query: observable.ref,
+      });
+      onBecomeObserved(this, "query", () => {
+        this.query.setupDispoables();
+      });
+      onBecomeUnobserved(this, "query", () => {
+        this.query.dispose();
+      });
+      this.query;
+    }
+    get state() {
+      return this.query.state;
+    }
+    refetch() {
+      this.query.refetch();
+    }
+    updateOptions(options: () => QueryOptions) {
+      this.query.updateOptions(options);
+    }
+  }
+  class _MobxQuery {
+    queryClient: QueryClient;
+    _queryOptions: () => QueryOptions;
+    qObserver!: QueryObserver;
+    public state!: QueryObserverResult;
+    private dispoables: (() => void)[] = [];
+    constructor(queryClient: QueryClient, queryOptions: () => QueryOptions) {
+      makeObservable(this, {
+        state: observable.ref,
+        update: action,
+        queryOptions: computed,
+        refetch: action,
+        _updateOptions: action.bound,
+      });
+      this.queryClient = queryClient;
+      this._queryOptions = queryOptions;
+    }
+    get queryOptions() {
+      return this._queryOptions();
+    }
+    setupDispoables() {
+      this.qObserver = new QueryObserver(this.queryClient, this.queryOptions);
+      this.dispoables.push(
+        ...[
+          this.qObserver.subscribe((e) => {
+            this.update(e);
+          }),
+          reaction(() => this.queryOptions, this._updateOptions),
+          () => {
+            this.qObserver.destroy();
+          },
+        ],
+      );
+    }
+    refetch() {
+      this.qObserver.refetch();
+    }
+    update(state: QueryObserverResult) {
+      this.state = state;
+    }
+    updateOptions(options: () => QueryOptions) {
+      this._queryOptions = options;
+    }
+
+    _updateOptions() {
+      this.qObserver.setOptions(this.queryOptions);
+    }
+
+    dispose() {
+      this.dispoables.forEach((fn) => fn());
+    }
+  }
+
+  export { MobxQuery };
+
diff --git a/src/index.ts b/src/index.ts
@@ -1,97 +1,2 @@
-import {
-  action,
-  makeObservable,
-  observable,
-  reaction,
-  onBecomeUnobserved,
-  onBecomeObserved,
-  computed,
-} from "mobx";
-import {
-  QueryClient,
-  QueryObserver,
-  QueryObserverResult,
-  QueryOptions,
-} from "@tanstack/query-core";
-
-class MobxQuery {
-  private query: _MobxQuery;
-  constructor(...args: ConstructorParameters<typeof _MobxQuery>) {
-    this.query = new _MobxQuery(...args);
-    makeObservable(this, {
-      // @ts-expect-error Mobx can see it don't worry
-      query: observable.ref,
-    });
-    onBecomeObserved(this, "query", () => {
-      this.query.setupDispoables();
-    });
-    onBecomeUnobserved(this, "query", () => {
-      this.query.dispose();
-    });
-    this.query;
-  }
-  get state() {
-    return this.query.state;
-  }
-  refetch() {
-    this.query.refetch();
-  }
-  updateOptions(options: () => QueryOptions) {
-    this.query.updateOptions(options);
-  }
-}
-class _MobxQuery {
-  queryClient: QueryClient;
-  _queryOptions: () => QueryOptions;
-  qObserver!: QueryObserver;
-  public state!: QueryObserverResult;
-  private dispoables: (() => void)[] = [];
-  constructor(queryClient: QueryClient, queryOptions: () => QueryOptions) {
-    makeObservable(this, {
-      state: observable.ref,
-      update: action,
-      queryOptions: computed,
-      refetch: action,
-      _updateOptions: action.bound,
-    });
-    this.queryClient = queryClient;
-    this._queryOptions = queryOptions;
-  }
-  get queryOptions() {
-    return this._queryOptions();
-  }
-  setupDispoables() {
-    this.qObserver = new QueryObserver(this.queryClient, this.queryOptions);
-    this.dispoables.push(
-      ...[
-        this.qObserver.subscribe((e) => {
-          this.update(e);
-        }),
-        reaction(() => this.queryOptions, this._updateOptions),
-        () => {
-          this.qObserver.destroy();
-        },
-      ],
-    );
-  }
-  refetch() {
-    this.qObserver.refetch();
-  }
-  update(state: QueryObserverResult) {
-    this.state = state;
-  }
-  updateOptions(options: () => QueryOptions) {
-    this._queryOptions = options;
-  }
-
-  _updateOptions() {
-    this.qObserver.setOptions(this.queryOptions);
-  }
-
-  dispose() {
-    this.dispoables.forEach((fn) => fn());
-  }
-}
-
-export { MobxQuery };
-export default MobxQuery;
+export {MobxQuery} from './Query';
+export {MobxMutation} from './Mutation';