useOptimisticAction type errors

[joshpalmeroc]

Im testing out the useOptimisticAction hook and have a little confusion around why i'm receiving type errors. Im just making a simple todo application. There are a list of todos and the user does a createTodo action that will update the list of todos.

async function sleep(ms: number) {
	return new Promise(resolve => setTimeout(resolve, ms));
}

export const createTodo = action(schema, async ({ title }) => {
	await sleep(1000);
	const todo = await prisma.todo.create({
		data: { title },
	});
	revalidatePath('/');
	return todo;
});

const { execute, optimisticData, status } = useOptimisticAction(
		createTodo,
		todos,
		(state, newTodo) => [...state, newTodo]
	);

{optimisticData.map(todo => (
	<p key={todo.id}>
		{todo.title} 
	</p>
))}

in my useOptimisticAction hook i get a type error on "todos" and on "state". Reading the docs it says that it must match the return value of my action. My action just returns the one todo, and the intitial state is all of the todos that are fetched by the server. The optimistic updates in my code work as expected, Im just confused mostly on the type errors im receiving.

[TheEdoRan]

Can you please provide a link to a GitHub repo/StackBlitz env with a reproduction example? Thanks!

[joshpalmeroc]

https://github.com/joshpalmeroc/useOptimisticAction

[TheEdoRan]

Thank you @joshpalmeroc! I think I understand the problem now. At this time, the second argument of useOptimisticAction needs to be of the same type of the action's return type. Thanks to your example, I've come to the conclusion that it's kind of a bad design.

Since todos come from the server, and the action revalidates the path every time it's called, it would be much more useful to allow any type for the second argument of useOptimisticAction, and match it in the first argument of the updateFn (state). This way, the action can create the todo, and then its return type becomes irrelevant. The only thing that matters is that the updated todos from the server match the return type of the updateFn.

Please let me know what you think about this. I think this is a better implementation, much more flexible and it just makes sense to me. I'll update the code soon for useOptimisticAction in upcoming v7 (current next branch/release channel). Note that v7 is a complete rewrite of the library and useOptimisticAction signature is different than <= v6. Documentation is available here. Thank you again!

[TheEdoRan]

Implemented in v7.0.0-next.43.

Updated documentation can be found here.

[joshpalmeroc]

Awesome! Thanks so much!