v5 - How can I invoke another machine from one machine?

[DWboutin]

Hi!

On ulterior versions, I could invoke another machine from one machine like this:

const fetchMachine = createMachine({
  initial: "fetching",
  states: {
    fetching: {
      after: {
        // after 1000 ms
        1000: "success",
      },
    },
    success: {
      type: "final",
      data: {
        count: 42,
      },
    },
  },
});

const machine = createMachine({
  initial: "loading",
  states: {
    loading: {
      invoke: {
        id: "fetchNumber",
        src: fetchMachine,
        onDone: {
          target: "success",
          actions: (_, event) => {
            console.log("DONE!", event);
          },
        },
      },
    },
    success: {},
    canceled: {},
  },
});

Can you help me on how I can do something like this? Or, can I use a machine to set the initial context of another machine?

Thank you in advance for your help!

[with-heart]

Hi @DWboutin!

Can you help me on how I can do something like this?

Here's an example of how to achieve what you're trying to do: https://codesandbox.io/p/devbox/zealous-goldberg-l9rc5c?file=/src/main.ts (make sure to open devtools console to see the output)

In place of data on the final state, we can define an output type in setup and then use the top-level output property which is then available on event.output.

can I use a machine to set the initial context of another machine?

Sure can! https://codesandbox.io/p/devbox/async-glitter-dh6npw?file=/src/main.ts

We can define the type of input in setup, use that input to set the initial context, and then define the input in invoke.

[DWboutin]

I didn't expect an answer that quick and with such details! Thank you so much!