onDone not being reached in children's invocation

[ivorpad]

I have these machines: fetcher is parent of poster. I'm invoking poster but the onDone transition is not reached. I've read the code and I still don't understand why it isn't reached if the FETCHED event it's being triggered, the child should transition to fetched.

const postMachine = createMachine({
  id: "poster",
  initial: "idle",
  context: {
    posts: [],
    user: undefined
  },
  states: {
    idle: {
      on: {
        FETCHED: {
          target: "fetched",
          actions: async (ctx, evt) => {
            console.log(await ctx.user);
          }
        }
      }
    },
    fetched: {
      type: "final"
    }
  }
});

export const fetcherMachine = createMachine(
  {
    id: "user",
    initial: "loading",
    context: {
      user: {}
    },
    states: {
      loading: {
        on: {
          FETCH: "success"
        }
      },
      success: {
        entry: "fetchUser",
        invoke: {
          id: "poster",
          src: postMachine,
          data: {
            user: (ctx) => ctx.user
          },
          onDone: (ctx, evt) => console.log("not reaching this point. why?")
        },
        exit: send("FETCHED", { to: "poster" }),
        on: {
          RESOLVE: {
            target: "exit"
          }
        }
      },
      exit: {
        type: "final"
      }
    }
  },
  {
    actions: {
      fetchUser: assign({
        user: () => {
          async function fetchUser() {
            let user = await fetch(`https://api.github.com/users/ivorpad`);
            user = await user.json();
            return user.avatar_url;
          }
          return fetchUser();
        }
      })
    }
  }
);

Relevant CodeSandbox: https://codesandbox.io/s/modern-http-33pn9

[Andarist]

This is structured in a quite weird way - your onDone is specific to the invoked "poster", it gets canceled when exiting the containing success state. You can't receive events from canceled children services and even if you would be able to receive them you wouldn't be able to process it here because by the time you would receive such event you would be already in the exit state which has no transition defined for this "done" event.

Side note: you can't use async functions within assign. This won't work correctly.

[ivorpad]

@Andarist

Thanks!

Side note

Yeah I was just experimenting. As far as I understand these async operations are better suited in a service. Correct?

And that's true, it's structured in a weird way because I'm just playing around with message passing but the docs albeit well written and complete I find it hard to find more examples of parent/children invocation and message passing involving real UI problems.

[Andarist]

Yeah I was just experimenting. As far as I understand these async operations are better suited in a service. Correct?

Yeah, for simple stuff you don't have to create a machine service though:

{
  invoke: {
    src: async function fetchUser() {
      let user = await fetch(`https://api.github.com/users/ivorpad`);
      user = await user.json();
      return user.avatar_url;
    },
    onDone: {
      target: 'next',
      actions: assign((ctx, ev) => ({ avatar_url: ev.data.avatar_url }))
    }
  }
}

And that's true, it's structured in a weird way because I'm just playing around with message passing but it's pretty difficult to shift your mind to it and the docs albeit well written and complete I find it hard to find more examples of parent/children invocation and message passing involving real UI problems.

The way you do it is not bad - although I don't see why UI would send RESOLVE, such an event usually comes from the invoked stuff asynchronously. You just have misused invoke - as I've mentioned: its lifetime is bound to the containing state, once you exit that state the invoked service get canceled and you can't send events to it or respond to events from it. Also, the onDone is just a shortcut for a regular transition definition, smth like: { on: { 'done.invoke.poster': { target: 'next' } } }. So regular rules apply to it - u can only react to transitions defined for your current state.

[ivorpad]

@Andarist

Yeah, RESOLVE was just a random name I chose to send events to it, this isn't a real UI problem.

its lifetime is bound to the containing state, once you exit that state the invoked service get canceled and you can't send events to it or respond to events from it

Got it! understanding this is crucial.

I have one more question if you don't mind. What's the defacto way of receiving the child's interpreter in a react <Child /> component?

For instance:

const parentMachine = createMachine({
   // parent invokes children in a state node
})
const childMachine = createMachine({ /* */ })

const [state, send, service] = useMachine(parentMachine);

const App = () => {
 return(
    <Child state={state} service={service} />
 )
}

const Child = (props) => {

}

What should I receive in Child to read the children's machine context from the parent's interpreter/state? An actor, service or state? Or is state.matches("someState") && state.children.childMachineId the right way to do it?

Thanks a lot!

[Andarist]

Or is state.matches("someState") && state.children.childMachineId the right way to do it?

This one is OK for me - I don't believe we have a better way of doing this right now.