Mobx: [Question] When an observable object received from a network call has a lot of nested properties...

[harrisrobin]

Hi,

So I've been wondering if anyone has a solution to this recurring problem I have:

So I have an observable object:
selectedBody: { }
and after an API call, selectedBody looks something like this:
selectedBody: { name: 'name', x: { y: { b:2, c:3 } } }

and in my component, i want to display the nested y
{this.props.store.selectedBody.x.y}

Until the network call is done, x is undefined. I know I can get around this by giving my properties empty values:
selectedBody: { x: { y: '' } }

But this gets pretty messy when you have a lot of objects and the nested values get really deep.. it's getting annoying to have to do this and i was wondering if people had a way around this without if statements and/or having to give them empty values?

Thanks :)

EDIT: another good scenario, I'm making a computed value that is based on those nested properties, gets pretty annoying in that case too!
`

[dmitriid]

I'd say this isn't really a bug, but a question of architecture. That said, I'd love to know a good answer to this, too.

In a current project we have a separate "init data" folder with empty objects per observable value that reflect the structure of objects we receive. This initial data is also used in tests/mocks etc.

Pros:

• no (fewer) unnecessary checks such as if(store.selectedBody && store.selectedBody.x) ...
• you have readily available objects to mock your API calls

Cons:

• you have to create a proper object per observable property (and objects may be quite complicated)
• an "empty" object may be in an invalid/incorrect/harmful state from the point of view of the system

[mattruby]

Another option would be to use extendObservable to create an observable
object based on your response data. A few drawbacks with that would be that
the addition and removal of fields is not observable without using isMap.
You'd want to guard with an isLoading or something.

On Nov 16, 2016 2:42 AM, "dmitriid" [email protected] wrote:

I'd say this isn't really a bug, but a question of architecture. That
said, I'd love to know a good answer to this, too.

In a current project we have a separate "init data" folder with empty
objects per observable value that reflect the structure of objects we
receive. This initial data is also used in tests/mocks etc.

Pros:

• no (fewer) unnecessary checks such as if(store.selectedBody &&
  store.selectedBody.x) ...
• you have readily available objects to mock your API calls

Cons:

• you have to create a proper object per observable property (and
  objects may be quite complicated)
• an "empty" object may be in an invalid/incorrect/harmful state from
  the point of view of the system

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/mobxjs/mobx/issues/659#issuecomment-260886751, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAIrchB1_UTHST1JkWNu7GtBXDU-0cfOks5q-sHpgaJpZM4KzT5t
.

[mweststrate]

Personally I would indeed use a separate observable (or computed one!) to express whether data is available, and use that in checks. If data can also be partially available, I think you cannot prevent doing lot's of checks, for the simple reason that javascript has no .? operator or something similar like that. (There exist utilities that can do this for you, but in that case you have to work with strings etc which I really dislike)

For network related status tracking check out mobx-utils.fromPromise, it is really neat for these kind of situations

[harrisrobin]

Ok I see. Thanks for the response guys!

Feel free to close this as there is no solution for what I want. I will go with @dmitriid 's solution.

[harrisrobin]

I just thought of something
@mweststrate , @dmitriid this is outside of the scope of this project, but relay/graphql are able to generate a schema and send it to the client. Something similar could work here but would have to be done at build time. I'll try to put a working example of what im thinking about but would be nice to get some thoughts