How to use the signal based approach with dynamic params? #158

badsgahhl · 2024-02-10T11:38:05Z

badsgahhl
Feb 10, 2024

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