From 6e5ad6fc57b6d36f361ca29bf2582a2015d49e24 Mon Sep 17 00:00:00 2001 From: zam Date: Sun, 18 Feb 2024 08:35:36 +0200 Subject: [PATCH] added proper types --- package.json | 2 +- src/Mutation.ts | 62 ++++++++++++++++++++++++++++--------------------- src/Query.ts | 40 ++++++++++++++++++++----------- 3 files changed, 64 insertions(+), 40 deletions(-) diff --git a/package.json b/package.json index 7577869..a419d67 100644 --- 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 index 2aa0008..a9e6877 100644 --- 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) { - this.query = new _MobxMutation(...args); + class MobxMutation< + TData = unknown, + TError = DefaultError, + TVariables = void, + TContext = unknown, +> { + private mutation: _MobxMutation; + constructor(queryClient: QueryClient, mutationOptions: () => MutationObserverOptions) { + 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) { - this.query.mutate(...args); - } - updateOptions(options: () => MutationOptions) { - this.query.updateOptions(options); + return this.mutation.state; } + mutate(...args: Parameters) { + this.mutation.mutate(...args); + } + updateOptions(options: () => MutationObserverOptions) { + 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; + mObserver!: MutationObserver; + public state!:MutationObserverResult; private dispoables: (() => void)[] = []; - constructor(queryClient: QueryClient, queryOptions: () => MutationOptions) { + constructor(queryClient: QueryClient, mutationOptions: () => MutationObserverOptions) { 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) { + mutate(...args: Parameters) { this.mObserver.mutate(...args) } - update(state: MutationObserverResult) { + update(state: MutationObserverResult) { this.state = state; } - updateOptions(options: () => MutationOptions) { + updateOptions(options: () => MutationObserverOptions) { this._queryOptions = options; } _updateOptions() { diff --git a/src/Query.ts b/src/Query.ts index 3cd2248..27e9c12 100644 --- 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) { - this.query = new _MobxQuery(...args); + class MobxQuery< + TQueryFnData = unknown, + TError = DefaultError, + TData = TQueryFnData, + TQueryData = TQueryFnData, + TQueryKey extends QueryKey = QueryKey, +> { + private query: _MobxQuery; + constructor(queryClient: QueryClient, queryOptions: () => QueryObserverOptions) { + 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) { 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; + qObserver!: QueryObserver; + public state!: QueryObserverResult; private dispoables: (() => void)[] = []; - constructor(queryClient: QueryClient, queryOptions: () => QueryOptions) { + constructor(queryClient: QueryClient, queryOptions: () => QueryObserverOptions) { makeObservable(this, { state: observable.ref, update: action, @@ -77,10 +91,10 @@ import { refetch() { this.qObserver.refetch(); } - update(state: QueryObserverResult) { + update(state: QueryObserverResult) { this.state = state; } - updateOptions(options: () => QueryOptions) { + updateOptions(options: () => QueryObserverOptions) { this._queryOptions = options; }