Add action prop to useFetcher for easier use with resource routes

[AlemTuzlak]

Proposal

Hello fellow Remixers!

I've been using remix for a hot minute and one of the biggest gripes I always had with fetchers is that I can't bind them to a single action/endpoint/resource. I usually create utilities like these across all my remix projects:

export const useCustomFetcher = (action: string) => {
  const fetcher = useFetcher();
  return {
    ...fetcher,
   Form: (props: any) => <FetcherForm {...props} action={action} />,
   submit: <T>(action: T, options?: SubmitFunctionOptions) => {
     fetcher.submit(action, { ...options, action }
   }
  };
};

The above is a simplified implementation to get the point across but you get the general idea, I want to specify something like this for example:

const fetcher = useCustomFetcher("/login")
// this submits to the login route
fetcher.submit(null)

What I propose is the following API (find the PR below):

// bound to the /login
const fetcher = useFetcher({ action: "/login" })

Use cases

This is mostly useful when creating resource routes. Here is an example use-case:

//routes/subscription.activate.ts

// we have our action in the resource route
export const action = () => {
  // activate subscription somehow
  return { subscription }
}

export const useActivateSubscriptionFetcher = () => useFetcher({ action: "/subscription/activate" })

// file-that-uses-the-fetcher.ts
export default Component() {
  const subscriptionFetcher = useActivateSubscriptionFetcher();
  const handleSubmit = () => {
    const data = activateSubscriptionFormData;
    // this submits to the resource route properly
    subscriptionFetcher.submit(data, { method: "post" })
  }
}

Additional consideration

In this fashion, it would also maybe be great if we can specify the method as well, I'd like to hear your opinions on this first though.

Here is the PR that implements it:
#12448

[sergiodxa]

I like the idea, I have never found a case where I use the same fetcher with two different URLs, also in most cases you pass the typeof loader or typeof action to the hook so you can't use it with different routes anyway.

One possible case would be changing a route param, and in most cases for fetchers I just send the data in the body instead of URL (e.g. instead of /like/123 I prefer /like and pass id: 123 in the body)

If we wanted to solve that case, it could be possible to maybe link by route id, so you do:

let fetcher = useFetcher<LikeRoute.ActionData>({ route: "routes/like.$id" })

Then request that param for the URL

fetcher.submit(data, { params: { id: 123 } })

That would help link it to the route and not the actual URL, and the router can generate the URL using the params and the route id.

But that's more complex, and could be solved anyway with the proposed change by dynamically changing the URL of the hook

let fetcher = useFetcher({
  action: `/like/${props.id}` // this must create a new fetcher when props.id change
});

[AlemTuzlak]

I actually really like this idea as well, the only thing this would require is for Pedro to add typesafety to it probably? But it should be easily doable, the changes took me like 5m as you can see in the PR, I've added the action to all the useMemo calls so it should indeed create a different set of callback on action change so that would also work I believe

[okalil]

I think using dynamic url instead of route id would be easier, and we could still use the route typegen for typing fetcher.data.

[okalil]

I think it would make sense to name the param "href", so it could be used for both submit (action) and load (loader).