Remix.run Can Be Highly Interactive: useFetcher + Zod

UPDATE: Now available as an npm package: github.com/sjc...
To install:`npm i remix-easy-mode zod superjson`
Learn how to build highly interactive, typesafe full-stack apps in Remix - TRPC style - using Zod, Remix's built-in useFetcher hook, and a few hundred lines of simple helper boilerplate setup.
Twitter: / sjc5_
Website: samcook.cc
Learn about Remix: remix.run
Learn about TRPC: trpc.io

[@sjc5]

UPDATE: An evolved version of this pattern has now been published to npm as an easily consumable toolkit: github.com/sjc5/remix-easy-mode#readme

[@matanon8454]

Well done! ❤

[@JonathanHigger]

This seems like a good pattern, I may use this on my app

[@sjc5]

Good timing, now available as a package! github.com/sjc5/remix-easy-mode#readme

[@mailok]

This is great!

[@eleah2665]

Cool. Thanks.

[@marqetintl]

Question: What would the advantages of this be compared to simply re-exporting the action from the api route, which i am currently doing?

[@kyuss789]

Won’t passing the actual action to your custom hook force it to be bundled in the frontend code? Which would be you would include and other back end code in your front end like the prisma client for example?
Would it be better to just pass the action type as a generic to the function?

[@sjc5]

Excellent point. It really should just be a generic.

[@joelalexander7293]

@@sjc5 Any plan to update the repo to reflect this change? I am still new to typescript and remix, so i conceptually understand the above, but not sure what the follow on changes would be if instead of the action itself, you only had a action_type.

[@sjc5]

@@joelalexander7293 Yeah good idea, should do a follow-up on this and get the repo updated.

[@sjc5]

@@joelalexander7293 Now available as a package, of course addressing this concern :) github.com/sjc5/remix-easy-mode#readme

[@joelalexander7293]

@@sjc5 awesome, thanks!

[@SeanLazer]

Really cool, but wondering if there's a reason to choose this stack vs. just going with create-t3-app in the first place?

[@sjc5]

Thanks! Put simply, the SSR story isn't nearly as nice with create-t3-app as with Remix. It's totally possible to SSR, but you have to build these SSG helpers to do it in a nice way, and it's just not even close to as nice as Remix's built-in loader pattern IMO.
Also, you can export hooks from Remix resource routes -- you can't export hooks from NextJS server-side files! That alone makes Remix a better DX.

[@SeanLazer]

@@sjc5 Awesome. So do you use this approach for data loading/mutating in conjunction with Remix's loaders/actions for other data?

[@sjc5]

@@SeanLazer I think in most cases for data loading, you’ll want to use standard route-level loaders. Otherwise you’re reintroducing spinners. Similarly, for mutations involving a page transition, the standard Remix action pattern makes sense. This is more just a helper around useFetcher to make building those “same page mutation” APIs really painless.