Fun-grained Reactivity in Angular: Part 3 - Client-Side HTTP

// refresh.ts
import { HttpResourceRef } from "@angular/common/http";
import { DestroyRef } from "@angular/core";
import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
import { interval } from "rxjs";

// refresh resource every n miliseconds or don't refresh if undefined provided. 0 also excluded, due to it not being a valid usecase
export function refresh<T>(resource: HttpResourceRef<T>, destroyRef: DestroyRef, refresh?: number): HttpResourceRef<T> {
  if (!refresh) return resource; // no refresh requested

  // we can use RxJs here as reloading the resource will always be a side effect & as such does not impact the reactive graph in any way.
  let sub = interval(refresh)
    .pipe(takeUntilDestroyed(destroyRef))
    .subscribe(() => resource.reload());

  let reload = (): boolean => {
    sub.unsubscribe(); // do not conflict with manual reload

    const hasReloaded = resource.reload();

    // resubscribe after manual reload
    sub = interval(refresh)
      .pipe(takeUntilDestroyed(destroyRef))
      .subscribe(() => resource.reload());

    return hasReloaded;
  };

  return {
    ...resource,
    reload,
    destroy: () => {
      sub.unsubscribe();
      resource.destroy();
    },
  };
}

// retry-on-error.ts
import { type HttpResourceRef } from "@angular/common/http";
import { effect, ResourceStatus } from "@angular/core";

export type RetryOptions =
  | number
  | {
      max?: number;
      backoff?: number;
    };

// Retry on error, if number is provided it will retry that many times with exponential backoff, otherwise it will use the options provided
export function retryOnError<T>(res: HttpResourceRef<T>, opt?: RetryOptions): HttpResourceRef<T> {
  const max = opt ? (typeof opt === "number" ? opt : opt.max ?? 0) : 0;
  const backoff = typeof opt === "object" ? opt.backoff ?? 1000 : 1000;

  let retries = 0;

  let timeout: ReturnType<typeof setTimeout> | undefined;

  const onError = () => {
    if (retries >= max) return;
    retries++;

    if (timeout) clearTimeout(timeout);

    setTimeout(() => res.reload(), retries <= 0 ? 0 : backoff * Math.pow(2, retries - 1));
  };

  const onSuccess = () => {
    if (timeout) clearTimeout(timeout);
    retries = 0;
  };

  // same as refresh this can again be a simple side effect
  const ref = effect(() => {
    switch (res.status()) {
      case ResourceStatus.Error:
        return onError();
      case ResourceStatus.Resolved:
        return onSuccess();
    }
  });

  return {
    ...res,
    destroy: () => {
      ref.destroy(); // cleanup on manual destroy
      res.destroy();
    },
  };
}

// persist-values.ts
import { type HttpHeaders, type HttpResourceRef } from "@angular/common/http";
import { linkedSignal, type Signal, type ValueEqualityFn, type WritableSignal } from "@angular/core";

function presist<T>(value: WritableSignal<T>, usePrevious: Signal<boolean>, equal?: ValueEqualityFn<T>): WritableSignal<T>;

function presist<T>(value: Signal<T>, usePrevious: Signal<boolean>, equal?: ValueEqualityFn<T>): Signal<T>;

function presist<T>(value: WritableSignal<T> | Signal<T>, usePrevious: Signal<boolean>, equal?: ValueEqualityFn<T>): WritableSignal<T> | Signal<T> {
  // linkedSignal allows us to access previous source value
  const persisted = linkedSignal<
    {
      value: T;
      usePrevious: boolean;
    },
    T
  >({
    source: () => ({
      value: value(),
      usePrevious: usePrevious(),
    }),
    computation: (source, prev) => {
      if (source.usePrevious && prev) return prev.value;

      return source.value;
    },
    equal,
  });

  // if original value was WritableSignal then override linkedSignal methods to original...angular uses linkedSignal under the hood in ResourceImpl, this applies to that.
  if ("set" in value) {
    persisted.set = value.set;
    persisted.update = value.update;
    persisted.asReadonly = value.asReadonly;
  }

  return persisted;
}

export function persistResourceValues<T>(resource: HttpResourceRef<T>, persist = false, equal?: ValueEqualityFn<T>): HttpResourceRef<T> {
  if (!persist) return resource;

  return {
    ...resource,
    statusCode: presist<number | undefined>(resource.statusCode, resource.isLoading),
    headers: presist<HttpHeaders | undefined>(resource.headers, resource.isLoading),
    value: presist<T>(resource.value, resource.isLoading, equal),
  };
}

// extended-resource.ts
import { httpResource, type HttpResourceOptions, type HttpResourceRef, type HttpResourceRequest } from "@angular/common/http";
import { computed, DestroyRef, effect, inject } from "@angular/core";
import { createEqualRequest } from "./equal-request";
import { persistResourceValues } from "./persist-values";
import { refresh } from "./refresh";
import { retryOnError, type RetryOptions } from "./retry-on-error";

export type ExtendResourceOptions<TResult, TRaw = TResult> = HttpResourceOptions<TResult, TRaw> & {
  keepPrevious?: boolean; // Keep the previous value when refreshing
  refresh?: number; // Refresh the value every n milliseconds
  retry?: RetryOptions; // Retry on error options
  onError?: (err: unknown) => void; // Error handler, useful for say displaying a toast
};

export type ExtendedResourceRef<TResult> = HttpResourceRef<TResult>;

export function extendedResource<TResult, TRaw = TResult>(
  request: () => HttpResourceRequest | undefined,
  options: ExtendResourceOptions<TResult, TRaw> & {
    defaultValue: NoInfer<TResult>;
  }
): ExtendedResourceRef<TResult>;

export function extendedResource<TResult, TRaw = TResult>(request: () => HttpResourceRequest | undefined, options?: ExtendResourceOptions<TResult, TRaw>): ExtendedResourceRef<TResult | undefined>;

export function extendedResource<TResult, TRaw = TResult>(request: () => HttpResourceRequest | undefined, options?: ExtendResourceOptions<TResult, TRaw>): ExtendedResourceRef<TResult | undefined> {
  const stableRequest = computed(() => request(), {
    equal: createEqualRequest(options?.equal),
  });

  const destroyRef = options?.injector ? options.injector.get(DestroyRef) : inject(DestroyRef);

  let resource = httpResource<TResult>(stableRequest, {
    ...options,
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    parse: options?.parse as any, // Not my favorite thing to do, but here it is completely safe.
  }) as HttpResourceRef<TResult>; // type case due to TS infering that it could also be TResult | undefined. This inference is not correct as function overloading prevents it.

  resource = refresh(resource, destroyRef, options?.refresh);
  resource = retryOnError(resource, options?.retry);
  resource = persistResourceValues<TResult>(resource, options?.keepPrevious, options?.equal);

  const onError = options?.onError; // Put in own variable to ensure value remains even if options are somehow mutated in-line
  if (onError) {
    const onErrorRef = effect(() => {
      const err = resource.error();
      if (err) onError(err);
    });

    // cleanup on manual destroy, I'm comfortable setting these props in-line as we have yet to 'release' the object out of this lexical scope
    const destroyRest = resource.destroy;
    resource.destroy = () => {
      onErrorRef.destroy();
      destroyRest();
    };
  }

  return resource;
}

// circuit-breaker.ts
import { computed, effect, Signal, signal, untracked } from "@angular/core";

type CircuitBreakerState = "CLOSED" | "OPEN" | "HALF_OPEN";

export type CircuitBreaker = {
  isClosed: Signal<boolean>;
  status: Signal<CircuitBreakerState>;
  fail: () => void;
  success: () => void;
  halfOpen: () => void;
  destroy: () => void;
};

// false allows for opt out of circuit breaker, full CircuitBreaker allows sharing between multiple resources
export type CircuitBreakerOptions = false | CircuitBreaker | { treshold?: number; timeout?: number };

// allow for top level creation (for example in a service)
function internalCeateCircuitBreaker(treshold = 5, resetTimeout = 30000): CircuitBreaker {
  const halfOpen = signal(false);
  const failureCount = signal(0);

  const status = computed<CircuitBreakerState>(() => {
    if (failureCount() >= treshold) return "CLOSED";
    return halfOpen() ? "HALF_OPEN" : "OPEN";
  });

  const isClosed = computed(() => status() === "CLOSED");

  const success = () => {
    failureCount.set(0);
    halfOpen.set(false);
  };

  const tryOnce = () => {
    if (!untracked(isClosed)) return;
    halfOpen.set(true);
    failureCount.set(treshold - 1);
  };

  const effectRef = effect((cleanup) => {
    if (!isClosed()) return;

    const timeout = setTimeout(tryOnce, resetTimeout);

    return cleanup(() => clearTimeout(timeout));
  });

  const fail = () => {
    failureCount.set(failureCount() + 1);
    halfOpen.set(false);
  };

  return {
    status,
    isClosed,
    fail,
    success,
    halfOpen: tryOnce,
    destroy: () => effectRef.destroy(),
  };
}

function createNeverBrokenCircuitBreaker(): CircuitBreaker {
  return {
    isClosed: computed(() => false),
    status: computed(() => "OPEN"),
    fail: () => {
      // noop
    },
    success: () => {
      // noop
    },
    halfOpen: () => {
      // noop
    },
    destroy: () => {
      // noop
    },
  };
}

export function createCircuitBreaker(opt?: CircuitBreakerOptions): CircuitBreaker {
  if (opt === false) return createNeverBrokenCircuitBreaker();

  if (opt && "isClosed" in opt) return opt;

  return internalCeateCircuitBreaker(opt?.treshold, opt?.timeout);
}

// We add CircuitBreaker options to our options type

export type ExtendedResourceOptions<TResult, TRaw = TResult> = {
  ...rest
  circuitBreaker?: CircuitBreakerOptions
}


// We also finaly use our type extension to add a disabled signal, this allows us to react to CircutBreaker closing within our UI, by say disabling buttons
export type ExtendedResourceRef<TResult> = HttpResourceRef<TResult> & {
  disabled: Signal<boolean>;
};

// And we integrate it within the function itself.


export function extendedResource<TResult, TRaw = TResult>(
  request: () => HttpResourceRequest | undefined,
  options?: ExtendResourceOptions<TResult, TRaw>
): ExtendedResourceRef<TResult | undefined> {
  const cb = createCircuitBreaker(options?.circuitBreaker);

  const stableRequest = computed(
    () => {
      // returning undefined disables this resource
      if (cb.isClosed()) return undefined;
      return request();
    },
    {
      equal: createEqualRequest(options?.equal),
    }
  );

  ...other resource code


  // iterate circuit breaker state, using an effect since, again, this is inherently a side effect
  const cbEffectRef = effect(() => {
    const status = resource.status();
    if (status === ResourceStatus.Error) cb.fail();
    else if (status === ResourceStatus.Resolved) cb.success();
  });

  return {
    ...resource,
    disabled: computed(() => cb.isClosed() || stableRequest() === undefined), // also disabled if the returned request is undefined
    reload: () => {
      cb.halfOpen(); // open the circuit for manual reload
      return resource.reload();
    },
    destroy: () => {
      cbEffectRef.destroy();
      cb.destroy();
      resource.destroy();
    },
  };

// cache.ts
import { HttpEvent } from "@angular/common/http";
import { computed, inject, Injector, InjectionToken, Provider, Signal, untracked } from "@angular/core";
import { Subject } from "rxjs";
import { v7 } from "uuid";
import { mutable } from "./mutable";

type LRUCleanupType = {
  type: "lru";
  checkInterval: number;
  maxSize: number;
};

type OldsetCleanupType = {
  type: "oldest";
  checkInterval: number;
  maxSize: number;
};

type CacheEntry<T> = {
  value: T;
  created: number;
  stale: number;
  useCount: number;
  expiresAt: number;
  timeout: ReturnType<typeof setTimeout>;
};

export type CleanupType = LRUCleanupType | OldsetCleanupType;

const ONE_DAY = 1000 * 60 * 60 * 24;
const ONE_HOUR = 1000 * 60 * 60;

const DEFAULT_CLEANUP_OPT = {
  type: "lru",
  maxSize: 200,
  checkInterval: ONE_HOUR,
} satisfies LRUCleanupType;

export class Cache<T> {
  private readonly internal = mutable(new Map<string, CacheEntry<T>>());
  private readonly destroy$ = new Subject<void>();
  private readonly cleanupOpt: CleanupType;

  constructor(
    private readonly ttl: number = ONE_DAY,
    private readonly staleTime: number = ONE_HOUR,
    cleanupOpt: Partial<CleanupType> = {
      type: "lru",
      maxSize: 1000,
      checkInterval: 1000 * 60 * 60, // 1 hour
    }
  ) {
    this.cleanupOpt = {
      ...DEFAULT_CLEANUP_OPT,
      ...cleanupOpt,
    };
    if (this.cleanupOpt.maxSize <= 0) throw new Error("maxSize must be greater than 0");

    // cleanup cache based on provided options regularly
    const cleanupInterval = setInterval(() => {
      this.cleanup();
    }, cleanupOpt.checkInterval);

    const destroyId = v7();

    // cleanup if object is garbage collected, this is because the cache can be quite large from a memory standpoint & we dont want all that floating garbage
    const registry = new FinalizationRegistry((id: string) => {
      if (id === destroyId) {
        clearInterval(cleanupInterval);
        this.destroy$.next();
      }
    });

    registry.register(this, destroyId);
  }

  private getInternal(key: () => string | null): Signal<CacheEntry<T> | null> {
    const keySignal = computed(() => key());

    return computed(() => {
      const key = keySignal();
      if (!key) return null;
      const found = this.internal().get(key);
      if (!found || found.expiresAt <= Date.now()) return null;
      found.useCount++;
      return found;
    });
  }

  getUntracked(key: string): CacheEntry<T> | null {
    return untracked(this.getInternal(() => key));
  }

  get(key: () => string | null): Signal<CacheEntry<T> | null> {
    return this.getInternal(key);
  }

  store(key: string, value: T, staleTime = this.staleTime, ttl = this.ttl) {
    const entry = this.getUntracked(key);
    if (entry) {
      clearTimeout(entry.timeout); // stop invalidation
    }

    const prevCount = entry?.useCount ?? 0;

    this.internal.mutate((map) => {
      map.set(key, {
        value,
        created: entry?.created ?? Date.now(),
        useCount: prevCount + 1,
        stale: Date.now() + staleTime,
        expiresAt: Date.now() + ttl,
        timeout: setTimeout(() => this.invalidate(key), ttl),
      });
      return map;
    });
  }

  invalidate(key: string) {
    const entry = this.getUntracked(key);
    if (!entry) return;
    clearTimeout(entry.timeout);
    this.internal.mutate((map) => {
      map.delete(key);
      return map;
    });
  }

  private cleanup() {
    if (untracked(this.internal).size <= this.cleanupOpt.maxSize) return;

    const sorted = Array.from(untracked(this.internal).entries()).toSorted((a, b) => {
      if (this.cleanupOpt.type === "lru") {
        return a[1].useCount - b[1].useCount; // least used first
      } else {
        return a[1].created - b[1].created; // oldest first
      }
    });

    const keepCount = Math.floor(this.cleanupOpt.maxSize / 2);

    const removed = sorted.slice(0, sorted.length - keepCount);
    const keep = sorted.slice(removed.length, sorted.length);

    removed.forEach(([, e]) => {
      clearTimeout(e.timeout);
    });

    this.internal.set(new Map(keep));
  }
}

type CacheOptions = {
  ttl?: number;
  staleTime?: number;
  cleanup?: Partial<CleanupType>;
};

const CLIENT_CACHE_TOKEN = new InjectionToken<Cache<HttpEvent<unknown>>>("INTERNAL_CLIENT_CACHE");

export function provideCache(opt?: CacheOptions): Provider {
  return {
    provide: CLIENT_CACHE_TOKEN,
    useValue: new Cache(opt?.ttl, opt?.staleTime, opt?.cleanup),
  };
}

export function injectCache(injector?: Injector) {
  return injector ? injector.get(CLIEANT_CACHE_TOKEN) : inject(CLIENT_CACHE_TOKEN);
}

// cache.interceptor.ts
import { HttpContext, HttpContextToken, type HttpEvent, type HttpHandlerFn, type HttpInterceptorFn, type HttpRequest, HttpResponse } from "@angular/common/http";
import { Observable, of, tap } from "rxjs";
import { injectCache } from "./cache";

type CacheEntryOptions = {
  key?: string;
  ttl?: number;
  staleTime?: number;
  cache: boolean;
};

const CACHE_CONTEXT = new HttpContextToken<CacheEntryOptions>(() => ({
  cache: false,
}));

export function setCacheContext(
  ctx = new HttpContext(),
  opt: Omit<CacheEntryOptions, "cache" | "key"> & {
    key: Required<CacheEntryOptions>["key"];
  }
) {
  return ctx.set(CACHE_CONTEXT, { ...opt, cache: true });
}

function getCacheContext(ctx: HttpContext): CacheEntryOptions {
  return ctx.get(CACHE_CONTEXT);
}

export function createCacheInterceptor(allowedMethods = ["GET", "HEAD", "OPTIONS"]): HttpInterceptorFn {
  const CACHE_METHODS = new Set<string>(allowedMethods);

  return (req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> => {
    const cache = injectCache();

    if (!CACHE_METHODS.has(req.method)) return next(req);
    const opt = getCacheContext(req.context);

    if (!opt.cache) return next(req);

    const key = opt.key ?? req.urlWithParams;
    const entry = cache.getUntracked(key);

    // If the entry is not stale, return it
    if (entry && entry.stale > Date.now()) return of(entry.value);

    // resource itself handles case of showing stale data...the request must process as this will "refresh said data"

    return next(req).pipe(
      tap((e) => {
        if (e instanceof HttpResponse && e.ok) {
          cache.store(key, e, opt.staleTime, opt.ttl);
        }
      })
    );
  };
}

// persist-values.ts
export function persistResourceValues<T>(resource: HttpResourceRef<T>, hasCachedValue: Signal<boolean>, persist = false, equal?: ValueEqualityFn<T>): HttpResourceRef<T> {
  if (!persist) return resource;

  return {
    ...resource,
    statusCode: presist<number | undefined>(resource.statusCode, resource.isLoading),
    headers: presist<HttpHeaders | undefined>(resource.headers, resource.isLoading),
    value: presist<T>(
      resource.value,
      computed(() => resource.isLoading() || !hasCachedValue()), // should show cached value if available
      equal
    ),
  };
}

// has-slow-connection.ts

// check if user on slow mobile connection
export function hasSlowConnection() {
  if ("connection" in window.navigator && typeof window.navigator.connection === "object" && !!window.navigator.connection && "effectiveType" in window.navigator.connection && typeof window.navigator.connection.effectiveType === "string") return window.navigator.connection.effectiveType.endsWith("2g");

  return false;
}

// extended-resource.ts

// first we add the new configuration options
type ResourceCacheOptions =
  | true
  | {
      ttl?: number;
      staleTime?: number;
      hash?: (req: HttpResourceRequest) => string;
    };

export type ExtendResourceOptions<
  TResult,
  TRaw = TResult
> = HttpResourceOptions<TResult, TRaw> & {
  ...rest
  cache?: ResourceCacheOptions; // Cache options, undefined = no cache
};

// add prefetch to Ref
export type ExtendedResourceRef<TResult> = HttpResourceRef<TResult> & {
  disabled: Signal<boolean>;
  prefetch: (req?: Partial<HttpResourceRequest>) => Promise<void>;
};

export function extendedResource<TResult, TRaw = TResult>(
  request: () => HttpResourceRequest | undefined,
  options?: ExtendResourceOptions<TResult, TRaw>
): ExtendedResourceRef<TResult | undefined> {
  const cache = injectCache(options?.injector);


  ...otherCode


  const hashFn =
    typeof options?.cache === 'object'
      ? options.cache.hash ?? urlWithParams
      : urlWithParams;

  const staleTime =
    typeof options?.cache === 'object' ? options.cache.staleTime : 0;
  const ttl =
    typeof options?.cache === 'object' ? options.cache.ttl : undefined;

  const cacheKey = computed(() => {
    const r = stableRequest();
    if (!r) return null;
    return hashFn(r);
  });

  const cachedRequest = options?.cache
    ? computed(() => {
        const r = stableRequest();
        if (!r) return r;

        return {
          ...r,
          context: setCacheContext(r.context, {
            staleTime,
            ttl,
            key: cacheKey() ?? hashFn(r),
          }),
        };
      })
    : stableRequest;

  // we now use the request, with the added cache context for our http call, so that the interceptor can update it
  let resource = httpResource<TResult>(cachedRequest, {
    ...options,
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    parse: options?.parse as any, // Not my favorite thing to do, but here it is completely safe.
  }) as HttpResourceRef<TResult>;



  // get full HttpResonse from Cache
  const cachedEvent = cache.get(cacheKey);

  const parse = options?.parse ?? ((val: TRaw) => val as unknown as TResult);

  const cachedValue = computed((): TResult | undefined => {
    const ce = cachedEvent();
    if (!ce || !(ce instanceof HttpResponse)) return;
    return parse(ce.body as TRaw);
  });

  // value is updated every time cachedValue changes (due to other resources), falls back to resource.value (defaultValue if provided)
  const value = options?.cache
    ? toWritable(
        computed((): TResult => {
          return cachedValue() ?? resource.value();
        }),
        resource.value.set,
        resource.value.update
      )
    : resource.value;

  ...otherCode

  resource = persistResourceValues<TResult>(
    { ...resource, value }, // pass cached value to be 'persisted' in ui as well
    computed(() => !!cachedValue()),
    options?.keepPrevious,
    options?.equal
  );

  ...otherCode


  // we override the set function so that the cache is also updated when manually setting (propagating any state changes throughout our app)
  const set = (value: TResult) => {
    resource.set(value);
    const k = untracked(cacheKey);
    if (options?.cache && k)
      cache.store(
        k,
        new HttpResponse({
          body: value,
          status: 200,
          statusText: 'OK',
        })
      );
  };

  const update = (updater: (value: TResult) => TResult) => {
    set(updater(untracked(resource.value)));
  };

  const client = options?.injector
    ? options.injector.get(HttpClient)
    : inject(HttpClient);

  return {
    ...resource,
    value,
    set,
    update,
    disabled: computed(() => cb.isClosed() || stableRequest() === undefined),
    reload: () => {
      cb.halfOpen(); // open the circuit for manual reload
      return resource.reload();
    },
    destroy: () => {
      cbEffectRef.destroy();
      cb.destroy();
      resource.destroy();
    },
    prefetch: async (partial) => {
      // do not prefetch if no cache or if on slow mobile connection
      if (!options?.cache || hasSlowConnection()) return Promise.resolve();

      const request = untracked(cachedRequest);
      if (!request) return Promise.resolve();

      const prefetchRequest = {
        ...request,
        ...partial,
      };

      try {
        // no need to store response to variable, it is stored in cache due to interceptor
        await firstValueFrom(
          client.request<TRaw>(
            prefetchRequest.method ?? 'GET',
            prefetchRequest.url,
            {
              ...prefetchRequest,
              headers: prefetchRequest.headers as HttpHeaders,
              observe: 'response',
            }
          )
        );

        return;
      } catch (err) {
        if (isDevMode()) console.error('Prefetch failed: ', err);
        return;
      }
    },
  };
}

import { type HttpResourceRequest } from "@angular/common/http";
import { computed, DestroyRef, inject, ResourceStatus, Signal, signal } from "@angular/core";
import { takeUntilDestroyed, toObservable } from "@angular/core/rxjs-interop";
import { combineLatestWith, filter, map } from "rxjs";
import { createEqualRequest } from "./equal-request";
import { extendedResource, type ExtendedResourceRef, type ExtendResourceOptions } from "./extended-resource";

type StatusResult<TResult> =
  | {
      status: ResourceStatus.Error;
      error: unknown;
    }
  | {
      status: ResourceStatus.Resolved;
      value: TResult;
    };

export type MutationResourceOptions<TResult, TRaw = TResult, TCTX = void> = Omit<
  ExtendResourceOptions<TResult, TRaw>,
  "onError" | "keepPrevious" | "refresh" | "cache" // we can't keep previous values, refresh or cache mutations as they are meant to be one-off operations
> & {
  onMutate?: (value: NoInfer<TResult>) => TCTX;
  onError?: (error: unknown, ctx: NoInfer<TCTX>) => void;
  onSuccess?: (value: NoInfer<TResult>, ctx: NoInfer<TCTX>) => void;
  onSettled?: (ctx: NoInfer<TCTX>) => void;
};

export type MutationResourceRef<TResult> = Omit<
  ExtendedResourceRef<TResult>,
  "prefetch" | "value" | "hasValue" | "set" | "update" // we don't allow manually viewing the returned data or updating it manually, prefetching a mutation also doesn't make any sense
> & {
  mutate: (value: Omit<HttpResourceRequest, "body"> & { body: TResult }) => void;
  current: Signal<(Omit<HttpResourceRequest, "body"> & { body: TResult }) | null>;
};

export function mutationResource<TResult, TRaw = TResult, TCTX = void>(request: () => Omit<Partial<HttpResourceRequest>, "body"> | undefined, options: MutationResourceOptions<TResult, TRaw, TCTX>): MutationResourceRef<TResult> {
  const equal = createEqualRequest(options.equal);

  const baseRequest = computed(() => request(), {
    equal,
  });

  const nextRequest = signal<(Omit<HttpResourceRequest, "body"> & { body: TResult }) | null>(null, {
    equal: (a, b) => {
      if (!a && !b) return true;
      if (!a || !b) return false;
      return equal(a, b);
    },
  });

  const req = computed((): HttpResourceRequest | undefined => {
    const nr = nextRequest();
    if (!nr) return;

    const base = baseRequest();

    const url = base?.url ?? nr.url;
    if (!url) return;

    return {
      ...base,
      ...nr,
      url,
    };
  });

  const { onMutate, onError, onSuccess, onSettled, ...rest } = options;

  const resource = extendedResource<TResult, TRaw>(req, {
    ...rest,
    defaultValue: null as TResult, // doesnt matter since .value is not accessible
  });

  let ctx: TCTX = undefined as TCTX;

  const destroyRef = options.injector ? options.injector.get(DestroyRef) : inject(DestroyRef);

  const error$ = toObservable(resource.error);
  const value$ = toObservable(resource.value);

  const statusSub = toObservable(resource.status)
    .pipe(
      combineLatestWith(error$, value$),
      map(([status, error, value]): StatusResult<TResult> | null => {
        if (status === ResourceStatus.Error && error) {
          return {
            status: ResourceStatus.Error,
            error,
          };
        }

        if (status === ResourceStatus.Resolved) {
          return {
            status: ResourceStatus.Resolved,
            value,
          };
        }

        return null;
      }),
      filter((v) => v !== null),
      takeUntilDestroyed(destroyRef)
    )
    .subscribe((result) => {
      if (result.status === ResourceStatus.Error) onError?.(result.error, ctx);
      else onSuccess?.(result.value, ctx);

      onSettled?.(ctx);
      ctx = undefined as TCTX;
      nextRequest.set(null);
    });

  return {
    ...resource,
    destroy: () => {
      statusSub.unsubscribe();
      resource.destroy();
    },
    mutate: (value) => {
      ctx = onMutate?.(value.body as TResult) as TCTX;
      nextRequest.set(value);
    },
    current: nextRequest,
  };
}

export type MutationResourceOptions<
  TResult,
  TRaw = TResult,
  TCTX = void
> = Omit<
  ExtendResourceOptions<TResult, TRaw>,
  'onError' | 'keepPrevious' | 'refresh' | 'cache' // we can't keep previous values, refresh or cache mutations as they are meant to be one-off operations
> & {
  ...rest
  optimisticlyUpdate?: HttpResourceRef<TResult>;
};



export function mutationResource<TResult, TRaw = TResult, TCTX = void>(
  request: () => Omit<Partial<HttpResourceRequest>, 'body'> | undefined,
  options: MutationResourceOptions<TResult, TRaw, TCTX>
): MutationResourceRef<TResult> {

  ...rest

 const {
    onMutate: providedOnMutate,
    onError: providedOnError,
    onSuccess: providedOnSuccess,
    onSettled,
    ...rest
  } = options;

  let prevOptimisticValue: TResult | null = null;

  const optimisticResource = options.optimisticlyUpdate;

  const onMutate = optimisticResource
    ? (val: TResult) => {
        prevOptimisticValue = untracked(optimisticResource.value);
        optimisticResource.set(val);
        return providedOnMutate?.(val);
      }
    : providedOnMutate;

  const onError = optimisticResource
    ? (err: unknown, ctx: TCTX) => {
        if (prevOptimisticValue !== null)
          optimisticResource.set(prevOptimisticValue);

        providedOnError?.(err, ctx);
      }
    : providedOnError;

  const onSuccess = optimisticResource
    ? (val: TResult, ctx: TCTX) => {
        optimisticResource.set(val);
        providedOnSuccess?.(val, ctx);
      }
  ...rest
}

// Heavily inpsired by: https://dev.to/kasual1/request-deduplication-in-angular-3pd8
import { HttpContext, HttpContextToken, HttpInterceptorFn, type HttpEvent, type HttpHandlerFn, type HttpRequest } from "@angular/common/http";
import { finalize, shareReplay, type Observable } from "rxjs";

const NO_DEDUPE = new HttpContextToken<boolean>(() => false);

export function noDedupe(ctx: HttpContext = new HttpContext()) {
  return ctx.set(NO_DEDUPE, true);
}

export function createDedupeRequestsInterceptor(allowed = ["GET", "DELETE", "HEAD", "OPTIONS"]): HttpInterceptorFn {
  const inFlight = new Map<string, Observable<HttpEvent<unknown>>>();

  const DEDUPE_METHODS = new Set<string>(allowed);

  return (req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> => {
    if (!DEDUPE_METHODS.has(req.method) || req.context.get(NO_DEDUPE)) return next(req);

    const found = inFlight.get(req.urlWithParams);

    if (found) return found;

    const request = next(req).pipe(
      finalize(() => inFlight.delete(req.urlWithParams)),
      shareReplay()
    );
    inFlight.set(req.urlWithParams, request);

    return request;
  };
}