How do I fire an event that performs an async call and assigns the result to the context

[escritorio-gustavo]

I'm creating a Tauri app using SolidJS and xstate. I want to read from a file with the following work flow:
1- click button
2- call tauri apis to read file
3- await file read operation
4- assign the result

I have done this in the past through some dodgy code, and I want to know whats the proper way to do this with xstate

[Andarist]

You can return data that you want to assign to context from your async job and use that to assign in onDone:

invoke: {
  src: 'asyncJobThatReturnsTheData',
  onDone: { actions: assign(({ event }) => event.output) } 
}

A more complete example can be found here

[escritorio-gustavo]

But it seems like invoke isn't allowed in events

[Andarist]

But it seems like invoke isn't allowed in events

Yes, that's the case. It's an interesting proposal though.

[escritorio-gustavo]

Well, that's fine. From what I've been reading it seems that in v5 something similar to what I'm trying to achieve would be possible (someone deleted a reply using fromCallBack with svelte that looked interesting, though it was deleted before I managed to figure it out). That's unfortunately not feasible for me since I'm using Solid, but until @xstate/solid becomes compatible with v5 I'll keep using the workaround I've been using.

const machine = createMachine(
  {
    id: 'UIStateMachine',
    initial: 'idle',
    context,
    states: {
      idle: {
        on: {
          run: {
            target: 'running'
          }
        }
      }
      running: {
        invoke: {
          src: 'asyncJob'
          onDone: {
            target: 'idle'
          }
        },
      }
    },
    on: {
      setPage: {
        onOone: {
          actions: assign({ /* ... */ })
        }
      }
    }
  },
  {
    services: {
      async asyncJob() {
        await something()
      },
    },
  },
)

function Component() {
  const [state, send] = useMachine(machine)
  return (
    <button onClick={async () => {
       const data = await getPage(ctx.pageIndex)
       send({ type: 'setPage', data })
    }}>
  )
}

[Andarist]

but until @xstate/solid becomes compatible with v5 I'll keep using the workaround I've been using.

Keep an eye on this issue

[escritorio-gustavo]

Keep an eye on #3925 (comment)

Will do. Thank you

[escritorio-gustavo]

Now that v5 for solid is out, what would be the "proper" way to achieve this?

I want the setPage event to:

• receive a pageIndex
• fetch a page from tauri (this is an async operation)
• assign to pagIndex the index received by the event
• assign to page the data returned by tauri

on: {
    setPage: {
        actions: assign({
            pageIndex: ({ event }) => event.pageIndex,
            page: ({ event }) => /* fetch data at event.pageIndex */
        }),
    },
}