Wait for asynchronous event change after sending an event

[drFabio]

Is there a way to wait for an event that will trigger an asynchronous actor to be completed?

I have a snippet to try to exemplify what I need

import { assign, createActor, fromPromise, setup } from "xstate";

const insertOnDb = async (email: string) => {
  return await new Promise<{ success: boolean; data: { id: number } }>(
    (resolve, reject) => {
      setTimeout(() => resolve({ success: true, data: { id: 13 } }), 1000);
    }
  );
};

const exampleMachine = setup({
  types: {
    context: {} as {
      email: string;
      dbId?: number;
    },
  },
  actors: {
    insertOnDb: fromPromise<any, { email: string }>(async ({ input }) => {
      const result = await insertOnDb(input.email);
      return result.data.id;
    }),
  },
  actions: {
    setFailed: assign({ failed: true }),
    setInserted: assign({ insertedOnDb: true }),
  },
}).createMachine({
  context: { email: "emailœ@gmail.com" },
  initial: "Considered",
  strict: true,
  on: {
    "*": {
      // unknown event
      actions: ({ event }) => {
        throw new Error(`Unknown or guarded event: ${event.type}`);
      },
    },
  },
  states: {
    Considered: {
      on: {
        REJECT: {
          target: "Rejected",
        },
        APPROVE: {
          target: "InsertingOndb"
        },
      },
    },
    InsertingOndb: {
      invoke: {
        id: "insertOnDb",
        src: "insertOnDb",
        input: ({ context: { email } }) => ({ email }),
        onDone: {
          target: "Inserted",
          actions: [
            assign({
              dbId: ({ event }) => {
                return event.output;
              },
            }),
            "setInserted",
          ],
        },
        onError: {
          target: "Failure",
          actions: "setFailed",
        },
      },
    },
    Inserted: {},
  },
});


const exampleActor = createActor(exampleMachine).start();

exampleActor.send({ type: "APPROVE" });
// Would like here to only go to a next line after APPROVE event is fully resolve and the machine went to either Inserted or Failure state
// something like await exampleActor.send({ type: 'APPROVE' }); would have been great

Background: I want to use a state machine within a series of lambdas and would like to be able to do it with async await, or figure out the best way to do it.

Thanks in advance

[crishoj]

@drFabio you might find the waitFor helper useful:

await waitFor(exampleActor, (state) => state.matches('Inserted'))

Timeout is configurable (default 10s).

In my experience, this means that a failed actor won't immediately result in a rejected waitFor promise. If you want waitFor to abort as soon as the actor reaches the Failure state, you can expand the awaited predicate with a throw:

await waitFor(exampleActor, (state) => {
  if (state.matches('Failure')) throw new Error('Insert failed')
  state.matches('Inserted')
})

[drFabio]

Thanks, that is exactly what I needed and did not realize I already had it!

[drFabio]

Dear @crishoj this worked perfectly except for waiting for a final state, on this scenario it throws

Actor terminated without satisfying predicate

Should I use something else for final states? how could I wait for a machine to reach some final state?

[crishoj]

Hmm... just tried this and had no issues waiting for a final state:

import { createActor, fromPromise, setup, waitFor } from 'xstate'

const actorA = createActor(
  setup({}).createMachine({
    initial: 'Start',
    states: {
      Start: { after: { '500': { target: 'End' } } },
      End: { type: 'final' },
    },
  }),
)

const actorB = createActor(
  setup({
    actors: {
      waitForA: fromPromise(() =>
        waitFor(actorA, (state) => {
          console.log('B: waitFor observed A transition to', state.value)
          return state.matches('End')
        }),
      ),
    },
  }).createMachine({
    initial: 'WaitingForA',
    states: {
      WaitingForA: { invoke: { src: 'waitForA', onDone: 'End' } },
      End: { type: 'final' },
    },
  }),
)

actorA.subscribe((state) => console.log('A: Transitioned to', state.value))
actorB.subscribe((state) => console.log('B: Transitioned to', state.value))

actorA.start()
actorB.start()

Output:

A: Transitioned to Start
B: waitFor observed A transition to Start
B: Transitioned to WaitingForA
A: Transitioned to End
B: waitFor observed A transition to End
B: Transitioned to End

[drFabio]

That is weird, I did a minimal example and it also worked so it certainly is something on my side, sorry for misleading you