How to use the signal based approach with dynamic params?

[badsgahhl]

Hey there!

I'm wondering how I can use dynamic variables from a component to call a query within a service. The way of doing this in react would be:

const [textQuery, setTextQuery] = React.useState()

const {data,isLoading} = useQuery(['entities', textQuery], () => fetch(....))

If i mutate textQuery with for example an text input, the query will refresh automatically.

In Angular on the other hand, how would i do this with the Component and Service Constellation:

export class EntityAutocompleteComponent { 
  // Mutation e.g. through a input field or the angular form stuff
  public textQuery = signal<string>('');
  entities = this.entityService.getEntities({ query: this.textQuery() }).result;
  
}

export class EntityService {
  constructor(private readonly entitiyService: EntitiesApiService) {}
  #query = injectQuery();

  getEntities(params: GetEntitiesRequestParams) {
    return this.#query({
      queryKey: ['entities', ...Object.values(params)] as const,
      staleTime: 2000,
      queryFn: () => {
        return this.entitiyService.getEntities(params).pipe(
          map(response => {
            return response.data!.entities;
          })
        );
      },
    });
  }
}

[luii]

It would basically be this example: https://github.com/ngneat/query?tab=readme-ov-file#utils

[NetanelBasal]

Check the updateOptions method:

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

[badsgahhl]

You are completely right. I oversaw this small Input Binding there. Thanks a lot!