Using a class to pass query parameters to HttpClient in Angular.io

Question

I read in this post that I could use fromObject in HttpParamsOptions to use an object as my query parameters on a query. Unfortunately I'm having some issues getting the Object to be in the right shape. I thought that it would be able to consume an object that had all strings for types and am not sure how to cast it into the right shape. I'd prefer not to have to iterate over object keys to get things to fit into this box - it loses all its value if I have to do that.

Can anyone explain to me what's going on here? I've read about the indexable types but that didn't help me figure out how to apply that to this case.

Type error reported:

TS2322: Type '{ fromObject: Query; }' is not assignable to type 'HttpParamsOptions'. 
  Types of property 'fromObject' are incompatible.
    Type 'Query' is not assignable to type '{ [param: string]: string | string[]; }'.
      Index signature is missing in type 'Query'.

Call site (started with {params: query} in the get and decomposed to this):

public retrieve(query: Query): Observable<PolicyRetrieveResult> {
  const q: HttpParamsOptions = {fromObject: query};
  const params = new HttpParams(q);
  return this.http.get<Result>(url, {params: params});
}

My query class:

export class Query {
  id: string;
  source: string = 'constant';
  type: string = 'otherConstant';
}

Here is HttpParamsOptions for reference:

export interface HttpParamsOptions {
    /**
     * String representation of the HTTP params in URL-query-string format. Mutually exclusive with
     * `fromObject`.
     */
    fromString?: string;
    /** Object map of the HTTP params. Mutally exclusive with `fromString`. */
    fromObject?: {
        [param: string]: string | string[];
    };
    /** Encoding codec used to parse and serialize the params. */
    encoder?: HttpParameterCodec;
}

HttpParamsOptions is not a public angular type. You're not supposed to use it. What are you trying to achieve? — JB Nizet
– JB Nizet, Commented Jul 6, 2018 at 13:13
I'm trying to achieve this: this.http.get(url, {params: query}); where query is a class I've defined — Brian
– Brian, Commented Jul 6, 2018 at 13:35

score 3 · Accepted Answer · 2018-07-06 13:50:30Z

3

Since you have strings, to make it simle, I suggest you do something like this instead :

public retrieve(query: Query): Observable<PolicyRetrieveResult> {
  return this.http.get<Result>(url, {params: {...query}});
}

In the future, if you have non string object,s the correct syntax is

params: HttpParams = new HttpParams({ fromObject: query })

Don't use HttpParamsOptions, when you see where it comes from you'll understand why :

import { HttpParamsOptions } from '@angular/common/http/src/params';

edited Jul 6, 2018 at 13:50

answered Jul 6, 2018 at 13:15

user4676340

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

9 Comments

Brian Over a year ago

The new HttpParams has the same exception as above

TS2345: Argument of type '{ fromObject: Query; }' is not assignable to parameter of type 'HttpParamsOptions'.   Types of property 'fromObject' are incompatible. 	Type 'Query' is not assignable to type '{ [param: string]: string | string[]; }'. 	  Index signature is missing in type 'Query'.

user4676340 Over a year ago

Type it as any, and did you try the first solution ?

JB Nizet Over a year ago

It should be {params: { ...query } }

Brian Over a year ago

With the spread operator? Yeah it didn't like it. From what I've read it should work even without the spread operator but I get that bracketed type error no matter where i put params: query. Grabbing the error from the spread operator now

user4676340 Over a year ago

Oh, my bad, I didn't see I forgot one set of brackets ! And it works because it's the correct syntax, the spread operator deconstructs an object. That's the equivalent of re writing all the properties by hand, so you need to surround it with brackets as if it was an object. I edited my answer, thank you for the amend !

|

Collectives™ on Stack Overflow

Using a class to pass query parameters to HttpClient in Angular.io

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related