Best practice for setting query options that require an input parameter

[unifyiGreenleaf]

working on migrating some code to use query. and wonder what the best practice was for setting up a query and detecting changes when using inputs. I currently have this as a code which does work but I'm not sure if it's the best practices with passing null as the Id to the query. left out the template of the component but it follows what is in the README for signals with the result.isLoading, result.data, etc...

export class ProjectMetricsComponent {
    projectId = input.required<Project['id']>();
    readonly #projectService = inject(ProjectService);
    readonly #query = this.#projectService.listProjectMetrics(null);
    readonly metricSummary = this.#query.result;
    constructor() {
      effect(() => {
        const projectId = this.projectId();
        this.#query.updateOptions(this.#projectService.getProjectMetricOptions(projectId));
      });
    }
  }

export class ProjectService {
  getProjectMetricOptions = (projectId: Project['id'] | null) =>
    queryOptions({
      queryKey: [this.#relativeUrl, projectId, 'metrics'],
      queryFn: () =>
        projectId === null
          ? EMPTY
          : this.#apiService.get<ProjectMetricSummary[]>(`${this.#relativeUrl}/${projectId}/metrics`),
    });

  listProjectMetrics = (projectId: Project['id'] | null) => this.#queryClient(this.getProjectMetricOptions(projectId));

}

I had tried to set up the signal effect to set the #query property so I didn't have to use null as an id by doing the following. but in this case the query never fires.

export class ProjectMetricComponent {
    projectId = input.required<Project['id']>();
    readonly #projectService = inject(ProjectService);
    readonly #query; // types left off for example
    constructor() {
        effect(() => {
            const projectId = this.projectId();
            if (query === null) {
                this.#query = this.projectService.listProjectMetrics(projectId);
            } else {
                this.#query.updateOptions(this.#projectService.getProjectMetricOptions(projectId));
            }
        }
    }
}

I was trying to base my solution off the dynamic example but I don't have a route to pull from so I'm confused on what to do with the initial ActivateRoute part that exists in the example.

[NetanelBasal]

import { computedAsync } from 'ngxtension/computed-async';

export class ProjectMetricComponent {
    projectId = input.required<Project['id']>();
    readonly #projectService = inject(ProjectService);

    projects = computedAsync(() => this.projectService.listProjectMetrics(this.projectId()).result$);
}

[NetanelBasal]

https://github.com/ngneat/query/blob/main/src/app/dynamic-page/dynamic-page.component.ts#L18

[unifyiGreenleaf]

Cool thanks! I ll try this out. Haven't seen that extension library before. But looks like exactly what I need