Xstate: Question about invoke's data

[hnordt]

Per docs:

data - (optional) an object that maps properties of the child machine's context to a function that returns the corresponding value from the parent machine's context.

Could you give us an example? It's a bit hard to understand by having only that description.

Thanks!

[tomdottom]

For anyone who's ended up here whilst looking for usage instructions on the _invoke_ data option you can either:

a) pass a function which accepts (ctx, event) and returns a new context object.

So this:

...snip...
  context: {
    something: {
      one: 1
    }
  },
  states: {
    myState:
      invoke: {
        src: minuteMachine,
        data: (parentContext, event) => {
          return parentContext.something
        }
      }
    }
  }
...snip...

Would create the new child context:

{
  one: 1
}

b) pass an object with keys of the new context and functions to derive the value from the parent context, or a new value.

So this:

...snip...
  context: {
    one: 1
  },
  states: {
    myState:
      invoke: {
        src: minuteMachine,
        data: {
          foo: (parentContext, event) => {
            return parentContext.one;
          },
          two: 2
        }
      }
    }
  }
...snip...

Would create the new child context:

{
  foo: 1,
  two: 2
}

[davidkpiano]

Thanks @tomdottom - I'll add examples 🔜, sorry for the confusion.

For deeper reading, this refers to the <param> and <content> elements in SCXML (which are children of <invoke>).

[tomdottom]

@davidkpiano it might be worth adding that any mutations made to the new derived context do not propagate back up to the parent context.

I didn't see any explicit cloning/copying, but this is how it appears to be behaving.

[davidkpiano]

any mutations made to the new derived context do not propagate back up to the parent context

⚠️ You should never mutate context. All context changes, just like in the Actor model, if needed, should be communicated via events.

[dakom]

It seems that the way to set a parent's context from the child is via sendParent and then responding to the event on the parent.

However, the promise example also seems to be able to get data via onDone

When invoking a machine (not a promise), is it possible to somehow associate data via the child's final state so that it gets sent to parent.invoke.onDone ?

[davidkpiano]

is it possible to somehow associate data via the child's final state so that it gets sent to parent.invoke.onDone?

Yes, using data:

{
  stop: {
    type: 'final',
    // static data
    data: {
      message: 'Reached the stop state'
    },
    // or mapping properties, like assign():
    data: {
      message: (ctx, e) => ctx.message
    },
    // or mapping from the entire context, also like assign():
    data: (ctx, e) => ({
      message: ctx.message
    }
  }
}

I'll add this to the docs soon.

[davidkpiano]

https://xstate.js.org/docs/guides/communication.html#invoking-with-context
https://xstate.js.org/docs/guides/communication.html#done-data