How to make a model for array?

[OnkelTem]

I guess the answer should be something trivial, as MobX has observable arrays and maps.

Say we have a Foo model. Now how to declare a model of an API response that is claimed to be of the Foo[] type?

Details

I'm making a sandbox project with the PetStore API.

I declared a model for the Pet type, and now need to validate/instantiate a model of the findPetsByStatus() response whose type is Pet[].

For example, speaking swr:

const { data } = useSWR('list', () => api.pet.findPetsByStatus({ status: ['available'] }))
const pets = data?.data

Now pets should be of the Pet[] type, but I cannot create a model for an array, can I? MST models are always "objects", no?

[coolsoftwaretyler]

You probably want the array type: https://mobx-state-tree.js.org/API/#array

[OnkelTem]

Well, I know there is array, but it's a model.

Say if I had an API method:

function get(): { pets: Pets[] }

then I could create a model like:

t.model({
  pets: t.array(PetModel)
})

But the method is defined as:

function get(): Pets[]

I cannot make a model of type array.

[coolsoftwaretyler]

Ah sure, I think I understand the confusion here.

There are three options for you. The most conventional is for you to define what most people call a RootStore, and then set up your array as a property in the RootStore, then after you get your data, put it in there.

Alternatively, you should be able to just call .create() on the array type and get one you can manipulate standalone. I don't recommend this, but it's possible.

Finally, you mentioned plain MobX before. It's worth saying that any valid MobX will work alongside MST. So if you just want to use a MobX array on its own, there's no problem there.

On my phone so I can't draw up a great example here but sometime this weekend I'll try to get to my computer. Let me know how else I can help clarify.

[coolsoftwaretyler]

Re-reading my response and I missed a few key points in your message. That's what I get for replying on the fly. I'll put together a code example that we can discuss more concretely.

[coolsoftwaretyler]

Ok, so just to see if we're on the same page. Is this the kind of logic you want to implement? And if so, is it missing something that you need?

Or have I still misunderstood what you're trying to do?

See in CodeSandbox

import { getSnapshot, t, flow } from "mobx-state-tree";

/**
 * Sample Pet interface, just an id and a string as metadata,
 * and a generatedAt timestamp to help see how responses were ordered
 * and used.
 */
interface Pet {
  petId: number;
  additionalMetadata: string;
  generatedAt: Date;
}

/**
 * Fake API, returns a promise of Pet[].
 */
function getPets(): Promise<Pet[]> {
  return new Promise((resolve) => {
    const timestamp = new Date();
    const petArray: Pet[] = [
      {
        petId: 1,
        additionalMetadata: "First pet",
        generatedAt: timestamp,
      },
      {
        petId: 2,
        additionalMetadata: "Second pet",
        generatedAt: timestamp,
      },
    ];
    resolve(petArray);
  });
}

/**
 * Pet model in MST
 */
const Pet = t.model("Pet", {
  petId: t.number,
  additionalMetadata: t.string,
  generatedAt: t.Date,
});

/**
 * Root Store, has a pets array and an action to load pets.
 */
const RootStore = t
  .model("RootStore", {
    pets: t.array(Pet),
  })
  /**
   * Actions to load pets one of two ways.
   * In either case, log out the current state of self.pets,
   * then gets pets from fake API.
   *
   * From there, you can either map over the results and insert,
   * or replace the existing array in a single operation.
   */
  .actions((self) => ({
    // Option to map over results if you have other transforms to consider
    loadPetsMap: flow(function* () {
      const snapshot1 = getSnapshot(self.pets);
      console.log("Pets before map action:");
      console.log(snapshot1);

      const pets: Pet[] = yield getPets();
      // Clear pets first
      self.pets.clear();
      pets.map((pet) => self.pets.push(pet));

      const snapshot2 = getSnapshot(self.pets);
      console.log("Pets after map action:");
      console.log(snapshot2);
    }),
    // Option to swap out the array entirely with replace
    loadPetsSwap: flow(function* () {
      const snapshot1 = getSnapshot(self.pets);
      console.log("Pets before swap action:");
      console.log(snapshot1);

      const pets: Pet[] = yield getPets();
      self.pets.replace(pets);

      console.log("Pets after swap action:");
      const snapshot2 = getSnapshot(self.pets);
      console.log(snapshot2);
    }),
  }));

/**
 * Main code for demo,
 * create a RootStore, then load pets both ways.
 */
(async function () {
  const store = RootStore.create();

  await store.loadPetsMap();
  await store.loadPetsSwap();
})();

This logs out:

Pets before map action:
[]
Pets after map action:
(2) [Object, Object]0: {petId: 1, additionalMetadata: 'First pet', generatedAt: 1736617376813}1: {petId: 2, additionalMetadata: 'Second pet', generatedAt: 1736617376813}length: 2[[Prototype]]: Array(0)
Pets before swap action:
(2) [Object, Object]0: {petId: 1, additionalMetadata: 'First pet', generatedAt: 1736617376813}1: {petId: 2, additionalMetadata: 'Second pet', generatedAt: 1736617376813}length: 2[[Prototype]]: Array(0)
Pets after swap action:
(2) [Object, Object]

Where the arrays contain different sets of pets between requests:

[OnkelTem]

Tyler, thank you very much, it's inspiring!

Alternatively, you should be able to just call .create() on the array type and get one you can manipulate standalone.

Maybe, but it's not among the types:

const arrayModel = t.array
arrayModel.create // Property 'create' does not exist on type '<IT extends IAnyType>(subtype: IT) => IArrayType<IT>'.typescript(2339)

... or I use it in a wrong way. Anyway, I got the idea: if API method returns an array - put its result in an additional prop (RootStore.pets in your example).

Luckily all our API methods return "objects", so we can create models from the responses w/o a RootStore:

// Fake API
getPetsV2(): { pets: Pet[] } ... 

// Models
const petModel = t.model({ petId: t.number, ... })
const getPetsV2Model = t.model({ pets: t.array(petModel) })

// Usage
const res = getPetsV2Model.create(await getPetsV2())
res.pets?.map((pet) => console.log(pet))

[OnkelTem]

Here is my follow-up reply where I was playing with your example and ran across a problem with map update: #2005 (reply in thread)

[coolsoftwaretyler]

So yeah, I would definitely recommend just putting it in an additional prop. But as an aside, here is how you can instantiate an array type on its own (it gets its own tree in this case):

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

(async function () {
  const Person = t.model("Person", {
    name: t.string,
  });

  const people = t
    .array(Person)
    .create([{ name: "Tyler" }, { name: "Artiom" }]);

  console.log(people);
})();

See in CodeSandbox