T
TanStack•16mo ago
correct-apricot

Reuse queryOptions, with signal based parameters

TLDR; when i change the $filterName, it does not update the query, when i use queryOptions. I have a query, that takes 3 arguments as its queryKey: name,pageIndex,pageSize. As per the docs, i created a function inside a service, that returns a queryOptions function. I think however, the issue here is that the keys initial values are comming from the signal. But further value changes are not propegated to the key, making it so, they queryKey never changes (and no refetching happens) Im almost certain that i have overseen some utility or method to make this work, as i intended - or maybe theres a better and more elegant solution? customer.service.ts 
@Injectable({
  providedIn: 'root',
})
export class CustomersService {
  #apiSdk = inject(ApiSdkService);

  listCustomersOptions(queries: {
    PageIndex: number;
    PageSize: number;
    'Filter.Name'?: string;
  }) {
    return () =>
      queryOptions({
        queryKey: ['Customers', queries],
        queryFn: () => this.#apiSdk.v2Customers.GetCustomers({ queries }),
      });
  }
}
@Injectable({
  providedIn: 'root',
})
export class CustomersService {
  #apiSdk = inject(ApiSdkService);

  listCustomersOptions(queries: {
    PageIndex: number;
    PageSize: number;
    'Filter.Name'?: string;
  }) {
    return () =>
      queryOptions({
        queryKey: ['Customers', queries],
        queryFn: () => this.#apiSdk.v2Customers.GetCustomers({ queries }),
      });
  }
}
customer-page.component.ts 
export class CustomersPageComponent {
  #customersService = inject(CustomersService);

  $pageIndex = signal(1);
  $pageSize = signal(30);

  $filterName = signal<string>('');

  $customersQuery = injectQuery(
    this.#customersService.listCustomersOptions({
      PageIndex: this.$pageIndex(),
      PageSize: this.$pageSize(),
      'Filter.Name': this.$filterName(),
    })
  );

  onFilterNameChange(event: Event) {
    this.$filterName.update(() => (event.target as HTMLInputElement).value);
  }
}
export class CustomersPageComponent {
  #customersService = inject(CustomersService);

  $pageIndex = signal(1);
  $pageSize = signal(30);

  $filterName = signal<string>('');

  $customersQuery = injectQuery(
    this.#customersService.listCustomersOptions({
      PageIndex: this.$pageIndex(),
      PageSize: this.$pageSize(),
      'Filter.Name': this.$filterName(),
    })
  );

  onFilterNameChange(event: Event) {
    this.$filterName.update(() => (event.target as HTMLInputElement).value);
  }
}
1 Reply
fascinating-indigo
fascinating-indigo•16mo ago
Diagnosing from far away because I don't have a coding environment right now: Your queryFn does not invoke any signals, so it's not recomputing anything. One solution might be to have your listCustomersOptions take a signal of options, instead of just an object of options, e.g.: 
  listCustomersOptions(queriesSignal: Signal<{
    PageIndex: number;
    PageSize: number;
    'Filter.Name'?: string;
  }>) {
    return () =>
      const queries = queriesSignal()
      queryOptions({
        queryKey: ['Customers', queries],
        queryFn: () => this.#apiSdk.v2Customers.GetCustomers({ queries }),
      });
  }
}
  listCustomersOptions(queriesSignal: Signal<{
    PageIndex: number;
    PageSize: number;
    'Filter.Name'?: string;
  }>) {
    return () =>
      const queries = queriesSignal()
      queryOptions({
        queryKey: ['Customers', queries],
        queryFn: () => this.#apiSdk.v2Customers.GetCustomers({ queries }),
      });
  }
}
In Component: 
  $customersQuery = injectQuery(
    this.#customersService.listCustomersOptions(computed(() => ({
      PageIndex: this.$pageIndex(),
      PageSize: this.$pageSize(),
      'Filter.Name': this.$filterName(),
    })))
  );
  $customersQuery = injectQuery(
    this.#customersService.listCustomersOptions(computed(() => ({
      PageIndex: this.$pageIndex(),
      PageSize: this.$pageSize(),
      'Filter.Name': this.$filterName(),
    })))
  );

Did you find this page helpful?