如何使用 Angular 信号更新 TanStack 查询参数？

Question

如何将查询参数与 TanStack Query 和 Angular 信号 一起使用才能发出类似

https://my-api/foo?filter=1,2,3

的请求？

我创建了一项服务：

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

然后我会像这样在我的

.component.ts

文件中更新

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

据我所知，

labels$()

应该改变，然后改变

labelIds$()

，它应该（但实际上不会）触发使用新过滤器重新加载查询字符串

有人已经实施了吗？

Answer 1

如果我正确理解您的意图，这应该会为您提供您正在寻找的内容。

@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(): Result<QueryObserverResult<ListUser[]>> {
    return this.#query.data();
  }
}