TanStackT
TanStack•2y ago•
1 reply
then-purple

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 }),
      });
  }
}



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);
  }
}
Was this page helpful?