createResource Without Error Propagation

[theduke]

In the UIs I'm building I often don't just want to show an error instead of the previous content when a failure occurs. I instead want to do things like show an inline error message inside the content, show a retry button, ...

I find that the combination of createResource and <ErrorBoundary> often makes this extremely cumbersome or impossible, especially with nested state, or when mutating data previously obtained via createResource(), processing the error somehow, ...

You can make sure to always catch errors in the loader for the resource, but now the resource data needs to represent the error state, which is redundant because the resource already stores this information.

It would be great to get something like a createFallibleResource() (or a {propagateErrors: false} option) which doesn't propagate errors upwards.

I quickly put together a little wrapper that does this.
It's pretty hacky though...

Any chance to get something like this upstream?

export type FallibleResource<O> = Resource<O> & { caughtError?: any };

export type FallibleResourceReturn<
  T,
  O extends ResourceOptions<T | undefined> | undefined,
  K = T
> = [
  FallibleResource<
    O extends undefined | null
      ? T | undefined
      : NonNullable<O>["initialValue"] extends undefined
      ? T | undefined
      : T
  >,
  ResourceActions<K>
];

export function createFallibleResource<T, S = true>(
  fetcher: ResourceFetcher<S, T>,
  options?: ResourceOptions<undefined>
): FallibleResourceReturn<T | undefined, typeof options>;
export function createFallibleResource<T, S = true>(
  fetcher: ResourceFetcher<S, T>,
  options: ResourceOptions<T>
): FallibleResourceReturn<T, typeof options>;
export function createFallibleResource<T, S>(
  source: ResourceSource<S>,
  fetcher: ResourceFetcher<S, T>,
  options?: ResourceOptions<undefined>
): FallibleResourceReturn<T | undefined, typeof options>;
export function createFallibleResource<T, S>(
  source: ResourceSource<S>,
  fetcher: ResourceFetcher<S, T>,
  options: ResourceOptions<T>
): FallibleResourceReturn<T, typeof options>;

export function createFallibleResource<T, S>(
  source: ResourceSource<S> | ResourceFetcher<S, T>,
  fetcher?:
    | ResourceFetcher<S, T>
    | ResourceOptions<T>
    | ResourceOptions<undefined>,
  options?: ResourceOptions<T> | ResourceOptions<undefined>
): FallibleResourceReturn<T | undefined, typeof options> {
  if (arguments.length === 2) {
    if (typeof fetcher === "object") {
      options = fetcher as ResourceOptions<T> | ResourceOptions<undefined>;
      fetcher = source as ResourceFetcher<S, T>;
      source = true as ResourceSource<S>;
    }
  } else if (arguments.length === 1) {
    fetcher = source as ResourceFetcher<S, T>;
    source = true as ResourceSource<S>;
  }
  options || (options = {});

  const [getError, setError] = createSignal<any | undefined>();

  const wrappedFetcher = async function () {
    try {
      let output = (fetcher as any)(arguments);
      if (typeof output === "object" && "then" in output) {
        output = await output;
      }
      return output;
    } catch (error: any) {
      setError(error);
      return undefined;
    }
  };

  const xSource = source as any;
  const res: any =
    xSource === true
      ? createResource(wrappedFetcher as any, options)
      : createResource(source as any, wrappedFetcher as any, options);
  const getter = res[0];

  const wrappedGetter = function () {
    return getter();
  };

  Object.defineProperty(wrappedGetter, "loading", {
    get: () => getter.loading,
  });
  Object.defineProperty(wrappedGetter, "caughtError", {
    get: () => getError(),
  });
  res[0] = wrappedGetter;
  return res;
}