CODEWITHSUNDEEP
angulartypescript
peckoski
peckoski

Reputation: 115

How can i make my query parameters to be type safe?

I have maked service where I need to send query parameters dynamically.

METHOD SERVICE So I have this method in my AuctionService.

getBids(id:number, params?: any) {
  return this.http.get(this._GET_AUCTION_URL + '/' + ApiPaths.auction + '/' + id + '/bids', {params});
}

From my component when I send the query parameters

COMPONENT.ts

  let queryParams = {
      filterSupplierName: 'sds',
      filterBidAwardStatus: ['Awarded', 'Ignored']
    }

 this.getAuctionService
    .getAuctionBidsByGuidUsingGET(id, queryParams)
    .subscribe((data) => {
...

it makes dynamically the GET url to be like so

https://some-url/api/22222/bids?filterSupplierName=sds&filterBidAwardStatus=Awarded&filterBidAwardStatus=Ignored

NOW I WANT TO MAKE TYPE SAFETY IN MY query params, so from component when I try to send for example some property which key or values is not correct, to show some compilation error.

So I need to have filterSupplierName of type string OR filterBidAwardStatus OF type array of string.

So when I try that

export interface IBidsFilter {
  filterSupplierName: string;
  filterBidAwardStatus: string[];
}
getBids(id:number, params?: IBidsFilter) {
  return this.http.get(this._GET_AUCTION_URL + '/' + ApiPaths.auction + '/' + id + '/bids', {params});
}

I get error No overload

No overload matches this call.
  The last overload gave the following error.
    Type 'ITest' is not assignable to type 'HttpParams | { [param: string]: string | string[]; }'.
      Type 'ITest' is not assignable to type '{ [param: string]: string | string[]; }'.
        Index signature is missing in type 'ITest'

The only solution that I found is adding as any but it is not so good solution

getBids(id:number, params?: IBidsFilter) {
  return this.http.get(this._GET_AUCTION_URL + '/' + ApiPaths.auction + '/' + id + '/bids', {params: params as any});
}

How can I solve this with another solution?

Upvotes: 1

Views: 3583

Answers (3)

nancy
nancy

Reputation: 48

Spread syntax

getBids(id: number, params?: IBidsFilter) {
    const sendParams = { ...params }
    return this.httpc.get('', { params: sendParams });
}

view doc in Spread syntax

If u r looking for array params in http get

getBids(id: number, params?: IBidsFilter) {
    const sendParams: MapOfKey = {};

    Object.keys(params || {}).forEach(key => {
      let value = params[key];
      if (Array.isArray(value)) {
        sendParams[key] = JSON.stringify(value);
        return;
      }

      sendParams[key] = value;
    })

    return this.httpc.get('', { params: sendParams });
}

export type MapOfKey = {
  [key: string]: string;
}

That result is like

http://localhost:4200/?filterSupplierName=nailon&filterBidAwardStatus=%5B%221%22,%222%22%5D

Upvotes: 0

Den
Den

Reputation: 786

You can do this with HTTPParams()

let queryParams = new HttpParams();
let arr = ['abc','def','ghi','jkl'];
queryParams.set('test',arr[0]);
queryParams.set('test',arr[1]);
queryParams.set('test',arr[2]);
queryParams.set('test',arr[3]);

return this.http.get(`${your-url}`, queryParams);

Upvotes: 0

Gaël J
Gaël J

Reputation: 15115

Angular HTTP client expects query parameters with string types only because you can only send string in a URL in the end.

That is it expects params to be of type { [key:string] : string | string[] }. (actually it allows some other variations but that's the idea)

This means you should convert your IBidsFilter to the type above.

Note that your error talks about a ITest that is not part of IBidsFilter, I assume you didn't copy the whole definition.

Upvotes: 1

Related Questions