Can remix-forms function within a PWA / client side only context?

[mschipperheyn]

We want to use remix-forms in a backoffice admin because we have a remix/remix-forms based front end. The backend uses an Angular router based framework that allows us to use React as a way to build route pages, but uses Angular routing and therefore limits us severely from any kind of request magic. So, it's a bit of a bolt on. In order to be able to continue using the same approach across our packages, I would like to keep using remix-forms. Can it be used as a PWA? There are no examples for this. Do you have to have access to the request to create/process form actions?

[gustavoguichard]

Hey @mschipperheyn , this is a very specific question and would require some research.
But you can take advantage of the frontside of remix-forms if you make your backend comply the same contract as performFormAction. So you basically just need to return the same structure from back-end.

[mschipperheyn]

I cannot put any requirements on the backend. The backend is effectively a graphql api.

So, I would like to just send a request and process the return client side. From what you said I'm not 100% sure if I can use remix-forms purely client side, which I guess is my real question. Would I be able to customize the functionality in such a way that I can replace the component that interacts with the server through our own api and intercept the requests and responses so that it adheres to the contract with other components from remix-forms? Or would I just be better off with something like Formik or React Final Form?

[danielweinmann]

Hey, @mschipperheyn!

1. You can use Remix Forms purely on the client side if you use React Router 6.4+ data APIs. With them, your actions will run on the client.

2. You can also have a Remix app as a Backend-For-Frontend that will communicate with your GraphQL backend from server to server. If that's a possibility, I think it's the best approach.

3. You can use only the Form side of Remix Forms and never use formAction. If you pass an action prop to the form that points to a server that knows how to receive application/x-www-form-urlencoded requests, you can go nuts. Just remember that you'll have to manually return errors in the same format as formAction returns if you want to render server-side error messages. I would not recommend this approach, but it is a possibility.

4. There is also a fourth possibility, which is what @gustavoguichard was referring to in his comment. In theory, you can use Remix Forms with any framework, as long as you:

• Create the following components/hooks using the same interface as Remix/React Router: Form, useActionData, useSubmit, and useNavigation.
• Create the following functions with the same interface as Remix/React Router: redirect, and json.

Remix Forms was not created to be used with other frameworks, though. This possibility is a side-effect of us making it work both with Remix and React Router in the same package. Leverage it at your risk :)

[danielweinmann]

Actually, now that I read it again, I think @gustavoguichard was referring to number 3 :)