Persistance with async actors

[woutrbe]

I'm pretty new to xstate, and am building a workflow that relies on input from a webhook. Most of the actions are async, as it involves sending an email, or making database updates.

Because the flow only runs after receiving a webhook, I need to be able to create a snapshot, and restore it every time this webhook is invoked.

I've gone through the entire documentation, and all of the examples, but none of it mentions how to handle this.

Below is a basic example of my webhook annd workflow. As you can probably tell, the main problem lies with storing the final snapshot. I have no idea to get a snapshot after an event was send.

Here's an example of what I expect the flow to look like:

1. Webhook triggers request.received and completes. The current state should be wait_for_request_prompt after requestReceived was executed.
2. Second webhook triggers request.prompt. The current state should be wait_for_request_processing after requestPromptReceived was executed.

In most other events, it will return to the idle state.

const basicState =
	setup({
		types: {
			context: {} as {
				user: User;
			},
			input: {} as {
				user: User;
			},
			events: {} as
				| { type: 'greet' }
				| { type: 'info' }

				| { type: 'request.received'; request: string }
				| { type: 'request.prompt'; prompt: string }
				| { type: 'request.done'; image: string; prompt: string; }
				| { type: 'request.failed' }
				| { type: 'request.cancel' },
		},
		actors: {
			sendInstructions: fromPromise(async ({ input }: { input: { user: User }}) => {
				console.log('sendWelcomeMessage');

				await new Promise((resolve, reject) => {
					return resolve(null);
				});
			}),

			checkCredits: fromPromise(async ({ input }: { input: { user: User }}) => {
				await new Promise((resolve, reject) => {
					return resolve(null);
				});
			}),

			sendEmail: fromPromise(async ({ input }: { input: { user: User }}) => {
				await new Promise((resolve, reject) => {
					return resolve(null);
				});
			}),

			requestReceived: fromPromise(async ({ input }: { input: { user: User }}) => {
				await new Promise((resolve, reject) => {
					return resolve(null);
				});
			}),

			requestPromptReceived: fromPromise(async ({ input }: { input: { user: User }}) => {
				await new Promise((resolve, reject) => {
					return resolve(null);
				});
			}),
		},
	})
	.createMachine({
		id: 'basic-flow',
		initial: 'idle',
		context: ({ input }) => ({
			user: input.user,
		}),
		states: {
			idle: {
				on: {
					'greet': 'welcome',
					'info': 'info',

					'request.received': 'request_received',
				},
				tags: ['waiting'],
			},

			info: {
				invoke: {
					id: 'sendInstructions',
					src: 'sendInstructions',
					input: ({ context }) => ({
						user: context.user
					}),
					onDone: {
						target: 'idle',
					},
					onError: {
						target: 'idle',
					}
				},
			},

			welcome: {
				invoke: {
					id: 'sendInstructions',
					src: 'sendInstructions',
					input: ({ context }) => ({
						user: context.user
					}),
					onDone: {
						target: 'idle',
					},
					onError: {
						target: 'idle',
					}
				},
			},

			check_credits: {
				invoke: {
					id: 'checkCredits',
					src: 'checkCredits',
					input: ({ context }) => ({
						user: context.user
					}),
					onDone: {
						target: 'idle',
					},
					onError: {
						target: 'idle',
					}
				}
			},

			request_received: {
				invoke: {
					id: 'requestReceived',
					src: 'requestReceived',
					input: ({ context }) => ({
						user: context.user,
					}),
					onDone: {
						target: 'wait_for_request_prompt',
					},
					onError: {
						target: 'wait_for_request_prompt',
					}
				}
			},
			request_prompt_received: {
				invoke: {
					id: 'requestPromptReceived',
					src: 'requestPromptReceived',
					input: ({ context }) => ({
						user: context.user,
					}),
					onDone: {
						target: 'wait_for_request_processing',
					},
					onError: {
						target: 'wait_for_request_processing',
					}
				}
			},

			wait_for_request_prompt: {
				on: {
					'request.prompt': 'request_prompt_received',
					'request.cancel': 'idle',
				},
			},
			wait_for_request_processing: {
				on: {
					'request.done': 'waiting_for_image_prompt',
					'request.failed': 'waiting_for_image_prompt',
				}
			},
		}
	});

app.post('/', async (c) => {
	try {
		// Fetch user
		const user = {
			id: 1,
			snapshot: { ... }
		}

		const actor = createActor(basicState, {
			input: {
				user,
			},
			...user.snapshot && {
				snapshot: user.snapshot as any,
			}
		});

		actor.start();

		console.log(`Current state: ${actor.getSnapshot().value}`);

		const intent = {
			type: 'xxx'
		}

		// Save user message
		await prisma.message.create({
			data: {
				userId: user.id,
				body: body.body,
				intent: intent.type,
			},
		});

		actor.send(intent);

		console.log(`End state: ${actor.getSnapshot().value}`);

		// Store snapshop
		await prisma.user.update({
			where: {
				id: user.id,
			},
			data: {
				state: actor.getPersistedSnapshot() as any,
			}
		});

		return c.json({}, 200);
	} catch(err: any) {
		console.error(err);

		return c.json({}, 400);
	}
});