sending event to invoked child machine from a persisted state

[rhuang]

I have a parent machine that invokes a child machine in one of the states. When the child machine throws an exception in one of its states, the onChange method on the interpreter on the parent machine will stop the machine, and the onStop method will persist the serialized state.

When I want to retry at a later time, I would like to restore this serialized state and restart the child machine at where it errors out. How can I do this?

let fail = true

const OrderMachine = createMachine({
  id: 'orderMachine',
  initial: 'o1',
  states: {
    o1: {
      on: { START: 'o1' },
      invoke: {
        id: 'initialService',
        src: () => Promise.resolve(),
        onDone: 'o2'
      }
    },
    o2: {
      on: { START: 'o2' },
      invoke: {
        id: 'failingService',
        src: (context, event) => {
          if (fail) {
            return Promise.reject({ message: 'failed!'})
          } else {
            return Promise.resolve()
          }
        },
        onError: {
          actions: [
            () => console.log('logging child error'),
            escalate((context, event: AnyEventObject) => {
              return { message: 'child error!' }
            })
          ]
        }
      }
    }
  }
})

const ParentMachine = createMachine({
  id: 'parent',
  initial: 'init',
  context: {},
  states: {
    init: {
      on: { CREATE: 'pending' }
    },
    pending: {
      invoke: {
        id: 'orderMachine',
        src: OrderMachine,
        onDone: 'completed',
        onError: {
          actions: [
            (context, event) => console.log(event.data.message)
          ]
        }
      }
    },
    completed: {
      type: 'final'
    }
  }
})

// retrieve the serialized state
const savedState = JSON.parse(serializedState)
const resolvedState = ParentMachine.resolveState(savedState)
const restartedService = interpret(ParentMachine)
  .onTransition(state => console.log(`transitioning to ${state.value}`))
  .start(resolvedState)

// what do I do now?

restartedService.send('START') doesn't seem to invoke the child machine again.
I noticed I could call resolvedState.children.pendingOrder, but then resolvedState.children.orderMachine.send({ type: 'START' }) results in an error: TypeError: resolvedState.children.orderMachine.send is not a function

serviceRestarted.children returns an empty map.

Can I get some advice on how to get a hold of the child machine, figure out where it threw an error, and restart the parent and child machine at that point?

I can do this pretty easily as a hierarchical state machine, but I'm trying to explore doing it via a parent/child machine relationships, because I think that's more sustainable in the long term to future proof against heavily nested hierarchical state machines.

[davidkpiano]

If you want services to be restarted, the best thing to do would be to try an event sourcing approach instead: https://codesandbox.io/s/event-sourcing-example-xe952?file=/src/index.js

// Example: you can use localStorage instead
const persistedEvents = localStorage.getItem('events');

const service = interpret(machine)
  .onTransition(state => {
    if (state.changed !== undefined) {
      // push event to local storage
    }
  });

service.start();

// replay events
persistedEvents.forEach(event => {
  service.send(event);
});