7

I'm using mobx-state-tree with Typescript in a React application. And, I'm having an issue with Typescript where it complains about the type of the mobx type types.safeReference. It looks like the type of safeReference in the model definition is different from its type when you use .create() to actually create an instance of the model. In my code, selectedProduct's type is converted to string | number | undefined | null in productStore, but in the model definition is IStateTreeNode<...> | undefined | null and that's why I get an error in my root store. How can I fix that?

Here's my Product store:

import { types } from "mobx-state-tree";

const Product = types.model("Product", {
   id: types.identifier,
   name: types.string
})

const ProductStore = types
  .model("ProductStore", {
    products: types.array(Product),
    selectedProduct: types.safeReference(Product),
  })
  .actions((self) => ({
      // actions here
  }));

export const productStore = ProductStore.create({
  products: [],
  selectedProduct: undefined // the type here is different from the type in the actual model
});

And, here's my root store:

import { types } from "mobx-state-tree";
import ProductStore, { productStore } from "./product-store";

const RootStore = types.model('RootStore', {    
  productStore: ProductStore 
})

export const rootStore = RootStore.create({
    productStore: productStore // Here is where I get the typescript error.
});

UPDATE:

Another way of reproducing this issue is by trying to create a custom reference. The getter will complain about undefined not being assignable to type {...}.

const ProductByIdReference = types.maybeNull(
  types.reference(Product, {
      get(id: number, parent: Instance<typeof ProductStore>) {
          return parent.products.find(p => p.id === id) || undefined
      },
      set(value: Instance<typeof Product>) {
          return value.id
      }
  })
)
ataravati
  • 8,891
  • 9
  • 57
  • 89
  • I'm not sure if this is an oversight or the intended behaviour, very interesting. Instead of exporting a `ProductStore` singleton, could you not let the `RootStore` create it for you? I.e. `export const rootStore = RootStore.create({ productStore: { products: [], selectedProduct: undefined } });` – Tholle Jan 29 '21 at 18:24
  • 2
    No, it has to be singleton. – ataravati Jan 29 '21 at 18:26
  • Is this a case where everything works fine and it's just a TS error? It seems like `RootStore.create` is looking for a raw value rather than a created store. If you pass it the initial state of `productStore` rather than the store itself then it works fine. Not sure if this is at all useful but this answer shows a very different way to combine stores: https://stackoverflow.com/a/54081439/10431574 – Linda Paiste Feb 03 '21 at 20:55
  • There's a bunch of utility types at play https://github.com/mobxjs/mobx-state-tree/blob/a212858ad6a7a2a694b936339f71c0b3117344e3/packages/mobx-state-tree/src/types/complex-types/model.ts But the lowest down message in the error chain is that you have an `IMSTArray` https://github.com/mobxjs/mobx-state-tree/blob/a212858ad6a7a2a694b936339f71c0b3117344e3/packages/mobx-state-tree/src/types/complex-types/array.ts#L54 and it expects an actual array. It complains that `IMSTArray` does not have all of the methods that an array should. – Linda Paiste Feb 03 '21 at 20:59
  • Thank you @LindaPaiste, and sorry for the delay! I'll give that a try. – ataravati Feb 05 '21 at 20:47

2 Answers2

4

Generally speaking when you are trying to use a snapshot where an instance is typically used, you use cast. When you are trying to use an instance where a snapshot is typically used, you use castToSnapshot.

export const rootStore = RootStore.create({
    productStore: castToSnapshot(productStore)
});
Tholle
  • 108,070
  • 19
  • 198
  • 189
0

I checked your problem in detail and I wrote a solution, this is how to use mst rootStore concept correctly, there is no need to create instances of your store or object, just @inject it inside component directly:

// Product Store
import { types, Instance } from "mobx-state-tree";

const Product = types.model("Product", {
  id: types.identifier,
  name: types.string
})

const Store = types
  .model("ProductStore", {
    products: types.array(Product),
    selectedProduct: types.safeReference(Product),
  })
  .actions((self) => ({
    // actions here
  }));

type ProductStoreType = typeof Store;
interface ProductStoreTypeInterface extends ProductStoreType {}
export interface ProductStoreInterface extends Instance<ProductStoreTypeInterface> {}
export const ProductStore: ProductStoreTypeInterface = Store;

// Root Store
import { types } from "mobx-state-tree";
import { ProductStore } from "./product-store";

const RootStore = types.model('RootStore', {
  productStore: types.late(() => types.optional(ProductStore, {})),
})

// And now you can create rootStore with empty object
export const rootStore = RootStore.create({});

// Component
import { inject, observer } from 'mobx-react';
import { SettingStoreInterface } from "../settings/SettingStore";
import React from "react";

interface ComponentProps {}

interface InjectedProps extends ComponentProps {
  productStore: ProductStoreInterface;
}

@inject('productStore')
@observer
class SomeComponent extends React.Component<ComponentProps> {
  componentDidMount() {
    const { productStore } = this.props as InjectedProps;
    
    console.log(productStore.products);
  }
}
kaxi1993
  • 4,535
  • 4
  • 29
  • 47