1

I am trying to figure out if there is a way to make my API request more flexible. I am passing params from my grid to by data service which has currently the below code. What I am trying to achieve is 2 things, one I am looking for a way which allows me to pass all params along without having to have them individually specified. Right now it will only pass the tags along but not the librarys as that param is not in the params list. Also I would like to avoid sending an empty query string if there is nothing specified for a params like tags, its present but if user does not select anything it will be empty array

This is a sample what params looks like 

tags: []
librarys: ["Market Update"]
perPage: 100
offset: 0
__proto__: Object

thats the function code

getAllTemplates( params?: IGridDataFetcherParams) {
            console.log(params)
                return this.api.get({
            endpoint: '/template/list',
            params: {
                rowCount: params.perPage,
                offset: params.offset,

                ...(params.qsearch ? {qsearch: params.qsearch} : {} ),
                ...(params.tags && {tags: params.tags} ),
            },
            useAuthUrl: false,
        }).pipe(

            map(res => res as IApiResponseBody),
            tap(res => console.log(res)),
        );
    }

Here is what my interface looks like

export interface IGridDataFetcherParams {
    perPage?: string | number;
    offset?: string | number;
    qsearch?: string | number;
    buckets?: string[];
    bucket_group?: string[];
    librarys?: string[];
    tags?: string[];
    type?: string;
    tracts?: string[];
    city?: string[],
    email?: string,
    phone?: string;
    owner?: string;
    qstype?: string;
}
Dale K
  • 25,246
  • 15
  • 42
  • 71
MisterniceGuy
  • 1,646
  • 2
  • 18
  • 41
  • Take a look at this: https://stackoverflow.com/questions/48817781/overload-request-headers-and-params-with-httpclient-get/48818399#48818399 – R. Richards Dec 14 '19 at 11:58
  • That dont work as it creates a strange output if you pass arrays in the object – MisterniceGuy Dec 15 '19 at 19:00
  • Why not just `params: params`? It only doesn't work for rowCount/perPage due to the name difference but if you don't want to specify separate keys per param that's a pill you'll have to swallow either way. It'd be easy enough to write a wrapper that replaces empty arrays with `null` first for the second issue. – Ingo Bürk Dec 15 '19 at 21:39
  • I am not to concerned about the rowCount and perPage as I can adjust those names on api as I control both. The reason I am trying to make it more flexible is as we now define all query options in the backend which then will be rendered in GUI. But if we add new filter field for now it requires a manual edit in the code and rebuild which is not ideal when you add 2 to 3 new filter options a week – MisterniceGuy Dec 15 '19 at 21:49

1 Answers1

1

What do you think about having a class? Which will be generate the params object. Something like this.

https://stackblitz.com/edit/angular-basic-tutorial-1yni45

Or you can improve the class and return an object that you just need to send to the server

advantages of this approach give you the ability to control everything from one place

Ashot Aleqsanyan
  • 4,252
  • 1
  • 15
  • 27