Is there good way to combine fetching model with buisness model?

[baeharam]

MST is great, but when I use flow() to fetch some server data, two things are duplicated over whole codebase.

• "Status" of fetch function like PENDING, SUCCESS , FAILURE. Someone uses isLoading and someone uses isPending so it doesn't have consistency and has duplication.
• Race condition. To ignore duplicated request, I have to write related defensive logic per flow() function. It's verbose.

To solve this, I thought that extracting "fetcher" model could be solution for this problem. ⬇️ It is my implementation.

export enum FetchStatus {
  IDLE = "IDLE",
  PENDING = "PENDING",
  SUCCESS = "SUCCESS",
  FAILURE = "FAILURE",
}
const FetchStatusEnumeration = types.enumeration("FetchStatus", Object.values(FetchStatus));
const FetchStatusOptional = types.optional(FetchStatusEnumeration, FetchStatus.IDLE);

type Requester<T> = () => Promise<T>;

export function createFetcherModel<T, E = FetchError>(requester: Requester<T>) {
  return types
    .model("FetcherModel", {
      error: types.maybeNull(types.frozen<E>()),
      result: types.maybeNull(types.frozen<T>()),
      status: FetchStatusOptional,
    })
    .actions((self) => {
      const fetch = flow(function* () {
        if (self.status === FetchStatus.PENDING) {
          return;
        }

        self.status = FetchStatus.PENDING;
        try {
          const result = yield* toGenerator<T>(requester());
          self.result = cast(result);
          self.status = FetchStatus.SUCCESS;
        } catch (error) {
          self.error = cast(error);
          self.status = FetchStatus.FAILURE;
        }
      });

      function reset() {
        applySnapshot(self, {
          error: null,
          result: null,
          status: FetchStatus.IDLE,
        });
      }

      return {
        fetch,
        reset,
      };
    });
}

This is "fetcher" model which handles only fetching logic. It solves duplication and race condition. From this context, I have to define "buisness" model which handles buisness logic(transformation of server data, etc). So I'd like to use "fetcher" model with "business" model like below. (pseudo code)

const FetcherInjectedModel = createFetcherModel(getSomeServerData)
  .data({
    customProperty1: types.string,
    transformedServerData: SomeCustomMstType,
    ...
  })
  .actions(...)

const instance = FetcherInjectedModel.create();
instance.fetch();
instance.customProperty1;
instance.someAction...

Is there a good way to implement like above? I looked for extend and compose but I think it doesn't fit this kind of implementation. Thanks for your reading 🙇‍♂️

[coolsoftwaretyler]

Hey @baeharam - I know this is a bit of an old thread, but if you ended up coming to a conclusion here, I'd love to know:

1. What worked for you? What didn't?
2. Why do you think extend or compose don't fit this implementation? I also would expect one of those options might help here. I'm curious to know what problems you ran into there.

Thanks!

[baeharam]

@coolsoftwaretyler

As u said, this is an old thread so I forgot exact implementation. But, handling asynchronous logic with MST is tough even if some helper function is implemented. I just threw it out and migrated async logic into @tanstack/react-query which is delightful library to handle server logic.

In my old thought, extend and compose is not fit because it wasn't naturally applied. Sorry for my bad answer 😢

[coolsoftwaretyler]

No apologies necessary, @baeharam! Sorry that MST couldn't be a good tool for you here. It's good to get this information and hopefully we can use this conversation to help other folks out as well. Thanks for taking the time to respond.