added proper types

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

Hide file tree

Showing 3 changed files with 64 additions and 40 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.7",
+  "version": "0.0.8",
   "repository": {
     "type": "git",
     "url": "https://github.com/sandstone991/MobQ"

diff --git a/src/Mutation.ts b/src/Mutation.ts
@@ -11,42 +11,52 @@ import {
     QueryClient,
     MutationObserver,
     MutationObserverResult,
-    MutationOptions,
+    DefaultError,
+    MutationObserverOptions,
   } from "@tanstack/query-core";
-
-  class MobxMutation{
-    private query: _MobxMutation;
-    constructor(...args: ConstructorParameters<typeof _MobxMutation>) {
-      this.query = new _MobxMutation(...args);
+  class MobxMutation<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = void,
+  TContext = unknown,
+> {
+    private mutation: _MobxMutation<TData, TError, TVariables, TContext>;
+    constructor(queryClient: QueryClient, mutationOptions: () => MutationObserverOptions<TData, TError, TVariables, TContext>) {
+      this.mutation = new _MobxMutation(queryClient, mutationOptions);
       makeObservable(this, {
         // @ts-expect-error Mobx can see it don't worry
-        query: observable.ref,
+        mutation: observable.ref,
       });
       onBecomeObserved(this, "query", () => {
-        this.query.setupDispoables();
+        this.mutation.setupDispoables();
       });
       onBecomeUnobserved(this, "query", () => {
-        this.query.dispose();
+        this.mutation.dispose();
       });
-      this.query;
+      this.mutation;
     }
     get state() {
-      return this.query.state;
-    }
-    mutate(...args: Parameters<MutationObserver["mutate"]>) {
-      this.query.mutate(...args);
-    }
-    updateOptions(options: () => MutationOptions) {
-      this.query.updateOptions(options);
+      return this.mutation.state;
     }
+    mutate(...args: Parameters<typeof this.mutation.mutate>) {
+        this.mutation.mutate(...args);
+        }
+    updateOptions(options: () => MutationObserverOptions<TData, TError, TVariables, TContext>) {
+        this.mutation.updateOptions(options);
+        }
   }
-  class _MobxMutation {
+  class _MobxMutation<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = void,
+  TContext = unknown,
+> {
     queryClient: QueryClient;
-    _queryOptions: () => MutationOptions;
-    mObserver!: MutationObserver;
-    public state!: MutationObserverResult;
+    _queryOptions: () => MutationObserverOptions<TData, TError, TVariables, TContext>;
+    mObserver!: MutationObserver<TData, TError, TVariables, TContext>;
+    public state!:MutationObserverResult<TData, TError, TVariables, TContext>;
     private dispoables: (() => void)[] = [];
-    constructor(queryClient: QueryClient, queryOptions: () => MutationOptions) {
+    constructor(queryClient: QueryClient, mutationOptions: () =>  MutationObserverOptions<TData, TError, TVariables, TContext>) {
       makeObservable(this, {
         state: observable.ref,
         update: action,
@@ -55,7 +65,7 @@ import {
         _updateOptions: action.bound,
       });
       this.queryClient = queryClient;
-      this._queryOptions = queryOptions;
+      this._queryOptions = mutationOptions;
     }
     get mutationOptions() {
       return this._queryOptions();
@@ -75,13 +85,13 @@ import {
         ],
       );
     }
-    mutate(...args: Parameters<MutationObserver["mutate"]>) {
+    mutate(...args: Parameters<typeof this.mObserver.mutate>) {
       this.mObserver.mutate(...args)
     }
-    update(state: MutationObserverResult) {
+    update(state: MutationObserverResult<TData, TError, TVariables, TContext>) {
       this.state = state;
     }
-    updateOptions(options: () => MutationOptions) {
+    updateOptions(options: () => MutationObserverOptions<TData, TError, TVariables, TContext>) {
       this._queryOptions = options;
     }
     _updateOptions() {

diff --git a/src/Query.ts b/src/Query.ts
@@ -8,16 +8,24 @@ import {
     computed,
   } from "mobx";
   import {
+      DefaultError,
     QueryClient,
+    QueryKey,
     QueryObserver,
+    QueryObserverOptions,
     QueryObserverResult,
-    QueryOptions,
   } from "@tanstack/query-core";
 
-  class MobxQuery {
-    private query: _MobxQuery;
-    constructor(...args: ConstructorParameters<typeof _MobxQuery>) {
-      this.query = new _MobxQuery(...args);
+  class MobxQuery<
+  TQueryFnData = unknown,
+  TError = DefaultError,
+  TData = TQueryFnData,
+  TQueryData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>  {
+    private query: _MobxQuery<TQueryFnData, TError, TData, TQueryData, TQueryKey>;
+    constructor(queryClient: QueryClient, queryOptions: () => QueryObserverOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>) {
+      this.query = new _MobxQuery(queryClient, queryOptions);
       makeObservable(this, {
         // @ts-expect-error Mobx can see it don't worry
         query: observable.ref,
@@ -36,17 +44,23 @@ import {
     refetch() {
       this.query.refetch();
     }
-    updateOptions(options: () => QueryOptions) {
+    updateOptions(options: () => QueryObserverOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>) {
       this.query.updateOptions(options);
     }
   }
-  class _MobxQuery {
+  class _MobxQuery<
+  TQueryFnData = unknown,
+  TError = DefaultError,
+  TData = TQueryFnData,
+  TQueryData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>  {
     queryClient: QueryClient;
-    _queryOptions: () => QueryOptions;
-    qObserver!: QueryObserver;
-    public state!: QueryObserverResult;
+    _queryOptions: () => QueryObserverOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>;
+    qObserver!: QueryObserver<TQueryFnData, TError, TData, TQueryData, TQueryKey>;
+    public state!: QueryObserverResult<TData, TError>;
     private dispoables: (() => void)[] = [];
-    constructor(queryClient: QueryClient, queryOptions: () => QueryOptions) {
+    constructor(queryClient: QueryClient, queryOptions: () => QueryObserverOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>) {
       makeObservable(this, {
         state: observable.ref,
         update: action,
@@ -77,10 +91,10 @@ import {
     refetch() {
       this.qObserver.refetch();
     }
-    update(state: QueryObserverResult) {
+    update(state: QueryObserverResult<TData, TError>) {
       this.state = state;
     }
-    updateOptions(options: () => QueryOptions) {
+    updateOptions(options: () => QueryObserverOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>) {
       this._queryOptions = options;
     }