How to use the mobx-utils.fromPromise function in mobx-utils

fetchArtifacts(runHref) {
        return mobxUtils.fromPromise(Fetch.fetchJSON(`${runHref}artifacts/?start=0&limit=101`));
    }

@action deleteSubscription(subscriptionId) {
        this.subscriptionsPromiseState = fromPromise(
            axios
                .delete(`/api/alert/subscriptions/${subscriptionId}`)
                .then(() => {
                    _.remove(this.alertSubscriptions, subscription => subscription.subscriptionId === subscriptionId);
                })
                .catch((result) => {
                    AlertDetailsStore.handleError(result);
                })
        );
    }
}

fetchTraceResults(queryUrlString) {
        this.relatedTracesPromiseState = fromPromise(
            axios
            .get(`/api/traces?${queryUrlString}`)
            .then((result) => {
                this.relatedTraces = formatResults(result.data);
            })
            .catch((result) => {
                this.relatedTraces = [];
                TraceDetailsStore.handleError(result);
            })
        );
    }

@action fetchRawSpan(traceId, spanId, serviceName) {
        this.promiseState = fromPromise(
            axios
                .get(`/api/trace/raw/${traceId}/${spanId}?serviceName=${serviceName}`)
                .then((result) => {
                    this.rawSpan = result.data;
                })
                .catch((result) => {
                    RawSpanStore.handleError(result);
                })
        );
    }
}

@action fetchTrends(service, type, query) {
        const queryUrlString = toQueryUrlString(query);
        this.trendsPromiseState = fromPromise(
            axios
                .get(`/api/trends/service/${service}/${type}?${queryUrlString}`)
                .then((result) => {
                    this.trendsResults = result.data;
                    this.trendsQuery = query;
                })
                .catch((result) => {
                    this.trendsQuery = query;
                    this.trendsResults = [];
                    ServiceStore.handleError(result);
                })
        );
    }
}

@action updateSubscription(subscriptionId, dispatcherId, errorCallback) {
        this.subscriptionsPromiseState = fromPromise(
            axios
                .put(`/api/alert/subscriptions/${subscriptionId}`, {dispatcherId})
                .then(() => {
                    const original = this.alertSubscriptions.find(subscription => subscription.subscriptionId === subscriptionId);
                    original.dispatcherIds[0] = dispatcherId;
                })
                .catch((result) => {
                    errorCallback();
                    AlertDetailsStore.handleError(result);
                })
        );
    }

import { observable } from "mobx";
import SearchResult from "./SearchResult";
import { IPromiseBasedObservable, fromPromise } from "mobx-utils";
import SearchProvider from "./SearchProvider";

export default class SearchProviderResults {
  @observable results: SearchResult[] = [];
  @observable message: string | undefined;
  isCanceled = false;
  resultsCompletePromise: IPromiseBasedObservable = fromPromise(
    Promise.resolve()
  );

  constructor(readonly searchProvider: SearchProvider) {}

  get isSearching() {
    return this.resultsCompletePromise.state === "pending";
  }
}

start() {
        this.operation = fromPromise(this.performOperation());
    }

@action fetchSpans(traceIds) {
        this.promiseState = fromPromise(
            axios
                .get(`/api/traces/raw?traceIds=${encodeURIComponent(JSON.stringify(traceIds))}`)
                .then((result) => {
                    this.results = result.data;
                })
                .catch((result) => {
                    SpansSearchStore.handleError(result);
                })
        );
    }
}

@action fetchAlertSubscriptions(serviceName, operationName, type) {
        this.subscriptionsPromiseState = fromPromise(
            axios
                .get(`/api/alert/${serviceName}/${operationName}/${type}/subscriptions`)
                .then((result) => {
                    this.alertSubscriptions = result.data;
                })
                .catch((result) => {
                    AlertDetailsStore.handleError(result);
                })
        );
    }