Error when use Promise .then(): Cannot modify '...', the object is protected and can only be modified by using an action.

[KyryloSWAN]

I have array inside model:

import { types, Instance, flow, getParent } from "mobx-state-tree";
...
const Destination = types.model({
  addressLine1: types.maybe(types.string),
  id: types.identifier,
});
export const DestinationStore = types
  .model("Destinations", {
    destinations: types.optional(types.array(Destination), []),
  })
  .views((self) => ({
    get token(): string {
      return getParent<typeof RootStore>(self).token;
    },
  }))
  .actions((self) => {
    return {
      fetchDestinations: flow(function* getDestinations() {
        yield apiFetchDestinations(self.token).then((value) => {
          self.destinations.length = 0;
          value.data.destinations.forEach((item) => {
            self.destinations.push({
              addressLine1: item.addressLine1 ?? undefined,
              id: item.id,
            });
          });
        });
      }),
    };
  });

I'm always getting error [mobx-state-tree] Cannot modify 'Destinations@/destination', the object is protected and can only be modified by using action fetchDestinations.

I tried to rewrite the code from forEach to map:

const undefDestinations = value.data.destinations.map((item) =>
   ({
     addressLine1: item.addressLine1 ?? undefined,
     id: item.id,
   })
 );
self.destinations = cast([...undefDestinations]);

and got the same error.

Then I tried to add the action addAPIItem to Destination

.actions((self) => {
  return {
    addAPIItem(item: IAPIDestinationItem) {
      self.addressLine1 = item.addressLine1 ?? undefined;
      self.id = item.id;
    },
  };
});

but I couldn't find a way to call it from the action fetchDestinations.

If I don't use Promise .then no errors occur (but the code is bad, don't use it):

      fetchDestinations: flow(function* getDestinations() {
        const response = yield apiFetchDestinations(self.token);
        if (response.data?.destinations?.length) {
          response.data.destinations.forEach((item: any) => {
            item.addressLine1 ||= undefined;
          });
          self.destinations = response.data.destinations;
        }
      }),

I'm stuck with Promise .then usage.
Please help!

[coolsoftwaretyler]

So I think when you chain off a promise with .then(), you turn the .then() clause into effectively an async function call.

That pulls the code execution outside of the async generator you're using, and MST doesn't allow changing state outside actions

You said your last code block is bad, but I think that's the correct thing to do here. Assuming apiFetchDestinations is some async function that returns a response (which would have been value in your .then() method), it should work.

Can you say more about what's bad about your last block which yields the response value and uses it afterward? Or perhaps send a CodeSandbox to illustrate additional problems you're having?

[KyryloSWAN]

If we are using
const response = yield apiFetchDestinations(self.token);
the type of response is uncertain and IDE shows it as any and we can't use the power of types checking.
But if we are using Promise .then((item) => {...}), the type of item is correct and contains type of successful response from the back-end server.

[coolsoftwaretyler]

Ah I see. I think in that case, you might just need to do two things:

1. You can use TypeScript casting to assert that the response is of a particular type.
2. You should be handling unsuccessful responses from your server with try...catch blocks, or checking for status codes, depending on how your backend chooses to handle things.

If you do that, you can satisfy TypeScript's expectations with regards to the data from the network, and you should be reasonably confident in the data at runtime as well - all while staying inside the generator function, which will allow you to modify state directly.

Does that help? If you still run into problems, I think you'll want to send a CodeSandbox for clarity.

[coolsoftwaretyler]

For others who are curious about the TypeScript issue here, I found this: microsoft/TypeScript#32523

It looks like TS has problems with type inference in generators. Lots of recommendations there about how to handle it, and I think typecasting here is basically appropriate.

The TS issue doesn't crop up in the then() operation because it's no longer a yielded value, and can infer the return type from the function appropriately.

Interesting stuff!

[KyryloSWAN]

I've modified action code by your suggestions and it works!

      fetchDestinations: flow(function* getDestinations() {
        self.items.length = 0;
        self.isLoading = true;
        try {
          const response: IAPIDestinationsResponse = yield apiFetchDestinations(
            self.token
          );
          response?.data?.destinations?.forEach((item: IAPIDestinationItem) => {
            self.items.push({
              addressLine1: item.addressLine1 ?? undefined,
              id: item.id,
            });
          });
        } finally {
          self.isLoading = false;
        }
      }),

Types checking works and I didn't receive any error message :)
Thank you for your support @coolsoftwaretyler