Data fetching/writing is handled brilliantly by . It’s SO much simpler than things like Next.js.
However, FormData and URLSearchParams are difficult to work with.
Zodix makes it easy to parse Remix loaders/actions using Zod schemas.
github.com/rileytomasek/z
Conversation
Replying to
I was writing similar versions of Zodix every time I started a new Remix project, so I decided to clean it up and release it as a library for others to use.
It's a thin wrapper around the wonderful Zod by with improved handling for FormData and URLSearchParams.
1
2
If you aren't familiar with Zod, you should check it out. It's well designed, easy to use, and works perfectly with TypeScript.
1
4
And if you haven't tried , now is the time.
I've rewritten two Next.js apps with Remix, and the result is simpler code that uses web standards like forms and fetch.
You have to give <Form/> a chance. I was skeptical at first but love it now. ( was right)
3
Looks super promising! Looks like it would just throw ZodErrors and devs would have to have cases for that in catch boundaries. It would be cool if there's a way to attach an error message that will be thrown so that the client can just render the message to the user as is.
1
3
You can set custom messages on ZodError as part of your schema and then read them when catching.
I'm also going to support safeParse() soon so you can handle errors in the action without catching.
1
I have a similar library `remix-params-helper`. I recommend that you return validation errors from your action instead of throwing them.
This way you can display the errors inline with the existing form. Otherwise, Remix will render your <ErrorBoundary>
rmx.fyi/params
4
6
Yep, there is an issue open to support that. Zodix was initially built for validating loaders and basic actions where there wasn't much room for user errors, so didn't need custom error handling. It's definitely helpful for complex forms though.
1