A concept inspired by Tanstack Query and angular.js $resource

query-resource-idea.ts

interface ResourceOptions<T> {
  query: () => Observable<T> | Promise<T>;
}

interface Resource<T> {
  query: () => void;
  data: Signal<T>;
  state: Signal<'IDLE' | 'PROCESSING' | 'EMITTING' | 'COMPLETE'>;
}

function createResource<T>(options: ResourceOptions<T>): Resource<T> {
  // HERE NEEDS TO BE MORE LOGIC
  return {
    query: () => {},
    data: new Signal<T>(), // this is not readable, but an example
    state: new Signal('IDLE'), // this is not readable, but an example
  };
}

const ActivatedRouteResource = new InjectionToken('', () => {
  const activatedRoute = inject(ActivatedRoute);
  const resource = createResource({
    query: () => {
      return combineLatest(activatedRoute.data, activatedRoute.params).pipe(
        map(([data, params]) => {
          return {
            data,
            params,
          };
        })
      );
    },
  });
  resource.query();
  return resource;
});


class MyComponent {
  activatedRouteResource = inject(ActivatedRouteResource);
  id = computed(() => {
    return this.activatedRouteResource.data()?.params['id'];
  });
}

I added the query() call in the InjectionToken Factory

Note: the Resource is lazy until query() is called