Remix request cheatsheet

Remix-request-cheatsheet.md

Remix request cheatsheet

Navigates?	declarative?	Makes GET, triggers loader	Makes POST, triggers action	No requests
navigates	declarative	<Link to=""> <Form method="get">	<Form method="post">	<Link to="#...">
navigates	imperative	navigate() setSearchParams()	submit()	navigate("#")
stays	declarative	<fetcher.Form method="get">	<fetcher.Form method="post">	(doesn't make sense)
stays	imperative	fetcher.load()	fetcher.submit()	(doesn't make sense)

where

const fetcher = useFetcher();
const navigate = useNavigate();
const submit = useSubmit();
const [searchParams, setSearchParams] = useSearchParams();

About Navigates?

• Navigates means:
  • Remix navigates to the requested URL
  • New history is added so you can go back to the page where you were, after making the request
  • Up to one request per page: You assume only one request with "navigates" type can happen at a time
• Stays means:
  • Remix doesn't navigate to the requested URL, but stays with the same page
  • History is untouched
  • Up to one request per fetcher: You assume multiple requests with "stays" type can happen at once on a page

References

• https://remix.run/docs/en/v1

This is nice! Is this a custom table you created from read the docs, that is, remix docs don't have this same exact table for requests?

As someone who is new to Remix myself, this table was useful in helping me piece together mentally the remix APIs :pray

Tips/questions/suggestions
maybe somewhere on the table we should include PUT, DELETE in the table cells?

• https://remix.run/docs/en/v1/guides/resource-routes#handling-different-request-methods

Can I share your cheetsheet with friends on Twitter?

@cliffordfajardo right, I curated from all over the official docs. I also watched all the videos on Remix YouTube channel. Great, please go ahead and share this! 🙌

Because the native <form> supports only GET and POST, it is recommended to use POST with a custom values like _action=DELETE to switch inside action function for any mutations (changing data). I'm sold on the idea and even thought those methods are not supported at all!

I only know <Form method=> and <fetcher.Form method=> supports the "non-recommended" methods (which I confirmed just now). I need to double check if there are any other ways.

<Form replace method="post"> works too if you don’t want navigation

@halindraprakoso Thanks for the info. I think that's slightly different from other ways of making requests in two reasons:

• The URL would change if <Form action> attribute points to a different URL. It's just that it will delete the history that user stayed in the current page (If I understand it correctly; I haven't used it yet)
• Even if action attribute points to the current URL, it still has some similarity to "navigates" case: Users are supposed to make one request per page. I added a section to clarify that.

I'm not sure how to add that case in the table while keeping the "navigates" principle. Let me know if you have some ideas. Thanks!