Mobx-state-tree: [Help] Getting reference of a model inside another model

[santanu4ver]

Hi,

This might be something many already discussed, being a new-comer to RN/mobX I'm having trouble finding exact solution to this.

I need to access a reference of model class into another model class.

// this is the model class which I needs to access inside another model
const APIKeyStore = types
    .model('APIKeyStore', {
        id: types.maybe(types.identifier, 'salesapp-keystore'),
        apiKey: types.maybe(types.string, '[censored]'),
    })
    .actions(self => ({
        increment() {            
        }
}));

// this is the model class where I want to access APIKeyStore model
const ServiceCalls = types
    .model('ServiceCalls', {
        isLoggedIn: types.optional(types.boolean, false),
        apiKeyStore: types.reference(APIKeyStore),
    })
    .actions(self => ({
        async initializeApp()
        {
            console.log('UIAPIKEY: ' + apiKeyStore.apiKey); // returns undefined apiKeyStore when ran
        }
}));

// how I'm creating the models
export const APIKeyStore = APIKeyStoreModel.create();
export const ServiceCalls = ServiceCallsModel.create({
  apiKeyStore: 'salesapp-keystore'
});

Please, help.

[xaviergonz]

Try this

import { types } from 'mobx-state-tree'

const APIKeyStoreModel = types
  .model('APIKeyStore', {
    id: types.identifier,
    apiKey: types.optional(types.string, '[censored]'),
  })
  .actions(self => ({ increment() {} }))

const ServiceCallsModel = types
  .model('ServiceCalls', {
    isLoggedIn: types.optional(types.boolean, false),
    apiKeyStore: types.reference(APIKeyStoreModel),
  })
  .actions(self => ({
    initializeApp() {
      console.log('UIAPIKEY: ' + self.apiKeyStore.apiKey)
    },
  }))

const APIKeyStore = APIKeyStoreModel.create({ id: 'salesapp-keystore' })
const ServiceCalls = ServiceCallsModel.create({
  apiKeyStore: APIKeyStore,
  // apiKeyStore: 'salesapp-keystore' // this would work if they were on the same snapshot tree, but they are not
})
console.log(APIKeyStore.id)
ServiceCalls.initializeApp()

[santanu4ver]

I've tried the same thing - but this not works, too:

const APIKeyStore = types
  .model('APIKeyStore', {
    id: types.identifier,
    apiKey: types.optional(types.string, '[censored]'),
  })
  .actions(self => ({ increment() {} }))

const ServiceCalls = types
  .model('ServiceCalls', {
    isLoggedIn: types.optional(types.boolean, false),
    apiKeyStore: types.reference(APIKeyStore),
  })
  .actions(self => ({
    initializeApp() {
      console.log('UIAPIKEY ')
    },
  }))

...

import APIKeyStoreModel from './models/APIKeyStore';
import ServiceCallsModel from './models/ServiceCalls';

const APIKeyStore = APIKeyStoreModel.create({ id: 'salesapp-keystore' })
const ServiceCalls = ServiceCallsModel.create({
  apiKeyStore: APIKeyStore,
})

console.log(APIKeyStore.id) // returns 'salesapp-keystore'
console.log(ServiceCalls.apiKeyStore.id) // returns undefined

[xaviergonz]

Just put this into a code sandbox and it worked (deps are mobx 5 and mst 3)

https://codesandbox.io/s/vqj736zpp3

import { types } from 'mobx-state-tree'

const APIKeyStoreModel = types
  .model('APIKeyStore', {
    id: types.identifier,
    apiKey: types.optional(types.string, '[censored]'),
  })
  .actions(self => ({ increment() {} }))

const ServiceCallsModel = types
  .model('ServiceCalls', {
    isLoggedIn: types.optional(types.boolean, false),
    apiKeyStore: types.reference(APIKeyStoreModel),
  })
  .actions(self => ({
    initializeApp() {
      console.log('UIAPIKEY ')
    },
  }))

const APIKeyStore = APIKeyStoreModel.create({ id: 'salesapp-keystore' })
const ServiceCalls = ServiceCallsModel.create({
  apiKeyStore: APIKeyStore,
})

console.log(APIKeyStore.id)
console.log(ServiceCalls.apiKeyStore.id)

Console was cleared
salesapp-keystore
salesapp-keystore

[santanu4ver]

I able to have the proper response now. Thank you very much @xaviergonz for your help :)