add MobX 6 Support (#294)

* feat(deps): upgrade babel/mobx deps to mobxv6 * feat(query): migrate to mobx v6 * Put babelrc back so tests pass * Remove unneeded transform in babelrc so rollup can build successfully https://www.npmjs.com/package/@rollup/plugin-babel#modules * fix(ts): type error TS7006 in query Co-authored-by: Brandon <[email protected]>
mobxjs · Mar 13, 2021 · 49ac4e4 · 49ac4e4
1 parent ef0fa94
commit 49ac4e4
Show file tree

Hide file tree

Showing 4 changed files with 756 additions and 67 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,10 @@
+{
+  "presets": [
+    ["@babel/preset-env", { "targets": { "node": "current" } }],
+    "@babel/preset-typescript"
+  ],
+  "plugins": [
+    ["@babel/plugin-proposal-decorators", { "legacy": true }],
+    ["@babel/plugin-proposal-class-properties", { "loose": true }]
+  ]
+}
diff --git a/package.json b/package.json
@@ -54,13 +54,13 @@
     "throttle-debounce": "^2.3.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.11.6",
-    "@babel/plugin-proposal-class-properties": "^7.10.4",
-    "@babel/plugin-proposal-decorators": "^7.10.5",
-    "@babel/plugin-transform-modules-commonjs": "^7.10.4",
-    "@babel/preset-env": "^7.11.5",
-    "@babel/preset-typescript": "^7.10.4",
-    "@babel/register": "^7.11.5",
+    "@babel/core": "^7.12.9",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/plugin-proposal-decorators": "^7.12.1",
+    "@babel/plugin-transform-modules-commonjs": "^7.12.1",
+    "@babel/preset-env": "^7.12.7",
+    "@babel/preset-typescript": "^7.12.7",
+    "@babel/register": "^7.12.1",
     "@types/jest": "^26.0.14",
     "@types/lodash": "^4.14.161",
     "@types/pluralize": "^0.0.29",
@@ -72,9 +72,9 @@
     "husky": "^4.3.0",
     "jest": "^26.4.2",
     "microbundle": "^0.12.3",
-    "mobx": "^5.15.7",
-    "mobx-react": "^6.3.0",
-    "mobx-state-tree": "^3.17.2",
+    "mobx": "^6.0.4",
+    "mobx-react": "^7.0.5",
+    "mobx-state-tree": "^4.0.2",
     "prettier": "^2.1.2",
     "pretty-quick": "^3.0.2",
     "react": "^16.13.1",

diff --git a/src/Query.ts b/src/Query.ts
@@ -3,7 +3,7 @@ import stringify from "fast-json-stable-stringify"
 import { DocumentNode, print } from "graphql"
 
 import { StoreType } from "./MSTGQLStore"
-import { action, observable } from "mobx"
+import { action, observable, makeObservable } from "mobx"
 
 export type CaseHandlers<T, R> = {
   loading(): R
@@ -26,9 +26,9 @@ export interface QueryOptions {
 const isServer: boolean = typeof window === "undefined"
 
 export class Query<T = unknown> implements PromiseLike<T> {
-  @observable loading = false
-  @observable.ref data: T | undefined = undefined
-  @observable error: any = undefined
+  loading = false
+  data: T | undefined = undefined
+  error: any = undefined
 
   public query: string
   public promise!: Promise<T>
@@ -41,6 +41,12 @@ export class Query<T = unknown> implements PromiseLike<T> {
     public variables: any,
     public options: QueryOptions = {}
   ) {
+    makeObservable(this, {
+      loading: observable,
+      data: observable.ref,
+      error: observable
+    })
+
     this.query = typeof query === "string" ? query : print(query)
     this.queryKey = this.query + stringify(variables)
 
@@ -134,7 +140,7 @@ export class Query<T = unknown> implements PromiseLike<T> {
         this.error = false
         this.data = data
       }),
-      action((error) => {
+      action((error: any) => {
         this.loading = false
         this.error = error
       })