blog/injection-token-service/

[giscus[bot]]

blog/injection-token-service/

Personal blog by Chau Tran

https://nartc.me/blog/injection-token-service/?fbclid=IwAR3BBUbBGby0q5mEKG8Ie36J53j0H8Uo_JFZphbtDEs23Ebx3a3z8p0nFvo

[AdditionAddict]

Still reading but typo, “this idea if purely exploratory”

[sergidt]

But how do you manage situations like a service needing other configurations, for instance, imagine that in:
path/to/github-api?q=${query}

the string part is dynamic, depending on environments, platform configs, and so on?

[nartc]

Same as you would do with class-based services. Let's take the path/to/github-api for example. The value of this can come dynamically from:

• environment
• DI

Environment

Straightforward, you can just use environment object

import { environment } from 'path/to/environment';

export function githubUserServiceFactory(http: HttpClient) {
    return {
        searchUser: (query = "") =>
            http.get<GithubUser[]>(`${environment.baseUrl}/github-api?q=${query}`),
    };
}

DI

This is probably what most people would do. For this, I would have a token for the baseURL

export const BASE_URL = new InjectionToken<string>('Base URL', {
  factory: () => environment.baseUrl, // we can provide a default value from environment
});

// we can also provide a different value for BASE_URL
/*
bootstrapApplication(AppComponent, {
  providers: [{ provide: BASE_URL, useValue: 'someOtherValue' }]
})
*/

// then the factory can accept it as argument
export function githubUserServiceFactory(http: HttpClient, baseUrl: string) {
    return {
        searchUser: (query = "") =>
            http.get<GithubUser[]>(`${baseUrl}/github-api?q=${query}`),
    };
}

export const GITHUB_USER_SERVICE = new InjectionToken<ReturnType<typeof githubUserServiceFactory>>(
  'GithubUserService',
  {
    factory: () => githubUserServiceFactory(inject(HttpClient), inject(BASE_URL))
  } 
)

[sergidt]

makes totally sense, the same I was thinking, only asking to know we are aligned :D

[sergidt]

Thanks!!