Mobx reference type VS API data with entities relations

[cavasinf]

Hey, I have an API that returns data where relations between my entities are already defined.
I'm using react-native to fetch data from that API + mobx to display/manipulate them.

My question is: How to implement reference in a Store from external data.

Simple example (which is not my real case, taken from packages).

Book entity

export const Book = types.model("Book", {
    id: types.identifier,
    title: types.string,
    author: types.reference(User),
})

User entity

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

BookStore

export const BookStore = types
    .model("BookStore", {
        books: types.optional(types.array(Book), []),
    })
    .actions((self) => {
        getBooks : async () => {
            const books = await MagicalFetchBookApi() // don't mind this, result under
            self.books.replace(books)
        }
    })

MagicalFetchBookApi() result

[
  {
    "id": 1,
    "title": "My first book",
    "author": {
      "id": 1,
      "name": "cavasinf"
    }
  },
  {
    "id": 2,
    "title": "My second book",
    "author": {
      "id": 1,
      "name": "cavasinf"
    }
  },
  {
    "id": 3,
    "title": "Someone else book",
    "author": {
      "id": 2,
      "name": "random guy"
    }
  }
]

---

I understand that one book variable from mobx should looks like that:

  {
    "id": "1",
    "title": "My first book",
    "author": "1"
  },

But I don't understand how to implement User (author), without pooling every users from UserStore (API) and referencing them later in my BookStore.

---

TLDR

How to transform API response:

  {
    "id": 1,
    "title": "My first book",
    "author": {
      "id": 1,
      "name": "cavasinf"
    }
  }

Into two referenced entities (Book and User) without pooling every data possible.

[EmilTholin]

Hi @cavasinf!

You could model the users in your BookStore as well, and extract them from the books in your getBooks action and transform the response somewhat so that you only use the id of the author when you replace the books in the store.

Example (CodeSandbox)

const BookStore = types
  .model("BookStore", {
    users: types.optional(types.map(User), {}),
    books: types.optional(types.array(Book), [])
  })
  .actions((self) => ({
    getBooks: flow(function* () {
      const books = yield MagicalFetchBookApi();

      books.forEach((book) => {
        const { author } = book;

        self.users.set(author.id.toString(), author);
        self.books.push({
          ...book,
          author: author.id
        });
      });
    })
  }));

[cavasinf]

Wow you are fast @EmilTholin 🚀

Thank you for the answer, I'll try that next Monday!

[cavasinf]

Works like a charm!
Thank you again!

[cavasinf]

Sub question if you mind @EmilTholin.

How should I type MagicalFetchBookApi return?
Do I use:

• the Book model types.model("Book", {...})
• new type that only match API returns:

  {
    "id": number,
    "title": string,
    "author": {
      "id": number,
      "name": string
    }
  }

[cavasinf]

If I use the model,
mobx will try to convert my API response into the model, where author in the model is a string identifier.
But my API returns an object.. Something will brake in that case, isn't it ?

[EmilTholin]

There are quite a few different approaches to typing APIs when working with MST. I personally opt for just typing them as any and having the compile time/run time checking of the models be enough.

[cavasinf]

I personally opt for just typing them as any

Yeah, I found it sad to have to re-declare (mobx model + JS type) the same "entity" twice.
But it is also a "pratical lost" not to have TypeScript checking + auto-completion when working with API returns..

It's hard to say which is the best solution...

[EmilTholin]

If your API is already typed you can do this to retain it when using yield.

[cavasinf]

Funny that YOU asked the the question and YOU replied to it 😄
Thanks a lot, I'll look at it!

[cavasinf]

Hello again @EmilTholin,
I have done what you are telling me to do and now I am stumbling on something else...

With the same example as above (Book/Author), and the current order of use/display of my application:

1. I display a list of all authors (UserStore)
2. Clicking on the author opens a list of all books by that author (BookStore).

When calling the getAuthorBooks() function from the store, a mobx error appears:
Canot resolve a reference to type 'User' with id: '1' unambiguously, there are multiple candidates: /userStore/users/0, /userStore/users/1, /bookStore/users/1.

From what I understand from the error, mobx is telling me that it has already memorised the author from my previous author list AND the author of the current pooled book.

What I don't get is how Mobx as made the link between userStore and bookStore. And mostly, how can I resolve that ?

const UserStore = types
  .model("UserStore", {
    users: types.optional(types.array(User), [])
  })
  .actions((self) => ({
    getUsers: flow(function* () {
      const users = yield MagicalFetchUsersApi();
      users.replace(users)
    })
  }));

const BookStore = types
  .model("BookStore", {
    users: types.optional(types.map(User), {}),
    books: types.optional(types.array(Book), [])
  })
  .actions((self) => ({
    getUserBooks: flow(function* () {
      const books = yield MagicalFetchBookApi();

      books.forEach((book) => {
        const { author } = book;

        self.users.set(author.id.toString(), author);
        self.books.push({
          ...book,
          author: author.id
        });
      });
    })
  }));

[EmilTholin]

I'm currently on vacation, you can create a new discussion and someone else might be able to help.

If you fetch all the users you no longer need to model users in the BookStore, there can only be one model with the same identifier in the tree.

[cavasinf]

Ended up to have a RootStore that wrap all my stores. (as mentioned in Mobx doc)

export const RootStoreModel = types.model("RootStore", {
  userStore: types.optional(UserStoreModel, {} as UserStore),
  bookStore: types.optional(BookStoreModel, {} as BookStore),
})

And call it via views function with getParent from mobx inside my stores:

import { getParent } from "mobx-state-tree"

.views((self) => ({
    get rootStore(): RootStore {
      return getParent(self)
    },
  }))

Looks like this now

const BookStore = types
  .model("BookStore", {
    books: types.optional(types.array(Book), [])
  })
  .views((self) => ({
    get rootStore(): RootStore {
      return getParent(self)
    },
  }))
  .actions((self) => ({
    getUserBooks: flow(function* () {
      const books = yield MagicalFetchBookApi();

      books.forEach((book) => {
        const { author } = book;

        self.rootStore.userStore.saveUser(author.id.toString(), author); //  <=== HERE

        self.books.push({
          ...book,
          author: author.id
        });
      });
    })
  }));

Thank you!