How to update TanStack query parameters with Angular signals?

Question

How can I use query parameters with TanStack Query and Angular signals to be able to have a request like https://my-api/foo?filter=1,2,3?

I've created a service:

@Injectable()
export class FriendsService {
  #baseUrl = inject(BASE_URL)
  #http = inject(HttpClient)
  #query = injectQuery()

  labels$ = signal<Label[]>([])
  labelIds$ = computed(() => {
    return {
      labels:
        this.labels$()
          ?.map((label) => label.id)
          .join(',') || [],
    }
  })

  getEntries(): Result<QueryObserverResult<ListUser[]>> {
    return this.#query({
      enabled: !!this.labelIds$(),
      queryKey: ['friends', this.labelIds$()],
      queryFn: () => firstValueFrom(
          this.#http.get<ListUser[]>(`${this.#baseUrl}/users/friends?labels=${this.labelIds$()}`),
        ),
      retry: 1,
    })
  }
}

Which I then update in my .component.ts file like this

this.friendService.labels$.set([{id: 1, id: 2}])

For what I do understand, the labels$() should change, which then change the labelIds$() which should (but actually doesn't) trigger a reload of the query string with the new filter

Has somebody already implemented it?

I don't see the filters$() which you refer to in your question. The way I've used this is to define #query = injectQuery(() => ({queryFn: ..., queryKey: ...}));. Then #query.data is a Signal which will contain your queryFn() results. Note: the default HttpClient is going to return an Observable so be sure to convert this to a Promise. — Duncan
– Duncan, Commented Oct 2, 2024 at 19:12
@Duncan True, I've wrote it wrong, I was talking about labels$(). And you're right, I've changed it to an observable. still, I'd like to be able tu change the labels$() and this change to trigger a new api request, do you know how to do that ? — Raphaël Balet
– Raphaël Balet, Commented Oct 3, 2024 at 12:18

Duncan · Accepted Answer · 2024-10-03 22:09:41Z

0

If I understand your intent correctly, this should give you what you're looking for. I've left getEntries() in place to match your original code.

@Injectable()
export class FriendsService {
  #baseUrl = inject(BASE_URL)
  #http = inject(HttpClient)
  #query = injectQuery(() => ({
      enabled: !!this.labelIds$(),
      queryKey: ['friends', this.labelIds$()],
      queryFn: () => firstValueFrom(
          this.#http.get<ListUser[]>(`${this.#baseUrl}/users/friends?labels=${this.labelIds$()}`),
        ),
      retry: 1,
    }))

  labels$ = signal<Label[]>([])
  labelIds$ = computed(() => {
    return {
      labels:
        this.labels$()
          ?.map((label) => label.id)
          .join(',') || [],
    }
  })

  getEntries():ListUser[]|undefined{
    return this.#query.data();
  }
}

answered Oct 3, 2024 at 22:09

Duncan

8731 gold badge11 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Raphaël Balet Mar 15 at 18:29

Actually, your code does not really change the logic, but the error was due to the version of tanStack, having the latest version make it work, but I'll accept your answer :)

Collectives™ on Stack Overflow

How to update TanStack query parameters with Angular signals?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related