Typesafe useFetcher like utility

[dadamssg]

tl;dr

let handler = useRouteHandler({
  method: 'post',
  routeId: 'routes/some.route.$id',
  params: { id: '1' },
})

<handler.Form /> // does not accept 'action' and 'method' props

handler.submit({ data: formData })

handler.data // typed to the above route's action return type

Background

useFetcher has no way to be typesafe because the data changes based on what you do with it. You can theoretically use the same fetcher instance for both a load() and submit() in the same component so unless your route's action and loader have the same return type, the types will lying to you if you typehint the useFetcher. Example:

let fetcher = useFetcher<typeof action>();
fetcher.load()

Here, fetcher.data would be the loader's return data but it's typed as if the action will be called.

Abstraction

For this to work, the intent of the request needs to be established at fetcher initialization.

let fetcher = useFetcher({
  method: 'post',
  routeId: 'routes/some.route.$id',
  params: { id: '1' },
})

However, if this were done to useFetcher, the methods make less sense:

let postFetcher = useFetcher({
  method: 'post',
  routeId: 'routes/some.route.$id',
  params: { id: '1' },
})
postFetcher.load() // ??? only submit() makes sense

let getFetcher = useFetcher({
  method: 'get',
  routeId: 'routes/some.route.$id',
  params: { id: '1' },
})

getFetcher.submit(null, { method: 'post'}) 
// ^ method change negates what was established earlier

I believe this warrants a new utility.

Proposal

A new, useRouteHandler hook that would be configured just enough before use to be typesafe.

let handler = useRouteHandler({
  method: 'post',
  routeId: 'routes/some.route.$id',
  params: { id: '1' },
})

<handler.Form />

handler.submit({ data: formData })

// ^ both do not accept 'method' and 'action' props

We should be able to use fetchers under the hood. Something like this. (useMemo's removed for clarity)

type HandlerFormProps = Omit<FetcherFormProps, "method" | "action">;
type HandlerSubmitOptions = Omit<FetcherSubmitOptions, "method" | "action">;

function useRouteHandler<R extends RouteInput>(route: R) {
  type Resolved = ResolveRoute<R>;
  type Data = Resolved["data"];

  let fetcher = useFetcher<Data>();
  let action = href(route.routeId, route.params)

  if (route.method === "GET") {
    // discard submit
    let { load, submit, Form, ...fetcherParts } = fetcher;
    return {
      ...fetcherParts,
      load: (options?: { flushSync: boolean }) => {
        return load(action, options);
      },
      Form: (props: HandlerFormProps) => (
        <Form
          {...props}
          method="get"
          action={action}
        />
      ),
    };
  }

  // discard load
  let { load, submit, Form, ...fetcherParts } = fetcher;

  return {
    ...fetcherParts,
    submit: (target: SubmitTarget, options?: HandlerSubmitOptions) => {
      return submit(target, {
        ...options,
        method: route.method,
        action,
      });
    },
    Form: (props: HandlerFormProps) => (
      <Form
        {...props}
        method={route.method}
        action={action}
      />
    ),
  };
}

This version still has distinct methods for calling an action(submit) vs a loader(load) but they're mutually exclusive.

Considerations

I know some people prefer the distinction at the callsite but it could probably be normalized into a common function who's arg type changes based on how it's configured.

let postHandler = useRouteHandler({
  method: 'post',
  routeId: 'routes/some.route.$id',
  params: { id: '1' },
})

postHandler.fetch({ data: formData })

let getHandler = useRouteHandler({
  method: 'get',
  routeId: 'routes/some.route.$id',
  params: { id: '1' },
})

getHandler.fetch()

The fetch function could also be named submit since that makes sense for all verbs considering you can submit a get request with a fetcher now.

searchParams

Kinda goofy since they can be part of the action and also become the payload for GET submissions. I'm not sure the best way to handle them.

let handler = useRouteHandler({
  method: 'post',
  routeId: 'routes/some.route.$id',
  params: { id: '1' },
  searchParams: new URLSearchParams({returnTo: '/some/path'})
})

<handler.Form  /> // searchParms embedded in the rendered action

It might make sense to separate them out at the callsite(if we want to support them there) and adjust the body type.

let postHandler = useRouteHandler({
  method: 'post',
  routeId: 'routes/some.route.$id',
  params: { id: '1' },
})

postHandler.fetch({
  // body allowed because method != get
  body: formData,
  searchParams: new URLSearchParams({returnTo: '/some/path'})
})

let getHandler = useRouteHandler({
  method: 'get',
  routeId: 'routes/some.route.$id',
  params: { id: '1' },
})

getHandler.fetch({
  // no body allowed because method = get! 
  body: new URLSearchParams({page: '7'}),
  searchParams: new URLSearchParams({page: '7'})
})

Having a dedicated place to put searchParams for both requests might make more sense from a consistency standpoint. Also matches better with builtin fetch() since bodies are ignored with GET requests.

Something like this.

Alternative

One alternative would be to try to enhance useFetcher and add loaderData and actionData to its return.

let fetcher = useFetcher({ 
  routeId: 'routes/api.users.$id', 
  params: { id: '1' }
});

// No path accepted - always loads /api/users/1
fetcher.load()
fetcher.loaderData // strongly typed

// No action accepted - always submits to /api/users/1
fetcher.submit(data, { method: 'post' })
fetcher.actionData // strongly typed

However, with this approach i think we'd want typesafey on existing methods

fetcher.load() // not allowed for routes that only have an action
fetcher.submit(null, {method: 'get'}) // not allowed for routes that only have an action
fetcher.submit(null, {method: 'post'}) // not allowed for routes that only have a loader

[dadamssg]

Or...

RR8 ditches fetcher.load, fetcher.submit, and fetcher.data. It introduces fetcher.fetch and its arg type changes based on the routeId's capabilities: does it have an action? a loader?

let fetcher useFetcher({
  routeId: 'routes/api.users.$id' // only routes with actions and/or loaders
})

fetcher.fetch({ params: { id: 'abc' }}) // GET
fetcher.fetch({ method: 'post', params: { id: 'abc' } }) // POST

fetcher.loaderData
fetcher.actionData

• method becomes required if route only has action. it cannot be get
• method can only be get if supplied and route only has loader

Although, a GET would need some sort of revalidation opt out flag for it to behave like a GET submit() and retain the auto-revalidation like load().