Angular dependency injection into an export function

Question

I am using apollo graphql, and it has a module with a function inside of it.

export function createApollo(httpLink: HttpLink, connectToDevTools: true){

Inside this function you define the url for the graphql endpoint const uri = http://127.0.0.1/graphql for instance.

I would like to import this url form a service (so that I only have to change the backend server url in one place), but I can not inject the service, for the property stays undefined.

export function createApollo(httpLink: HttpLink, connectToDevTools: true, urlservice: UrlsService) {
    const uri = urlservice.graphqlAddress;

Error: Cannot read property 'graphqlAddress' of undefined

I have also tried injecting the service into the modules constructor, but this is even lower down the chain, with the same results.

How do I get an outside property into the function createApollo?

My service basically looks like this:

export class UrlsService {
    ...
    graphqlAddress = 'http://192.168.2.24:8000/graphql/';
    ...
}

GraphQLModule providers:

@NgModule({
    exports: [ApolloModule, HttpLinkModule],
    providers: [
        UrlsService,
        {
            provide: APOLLO_OPTIONS,
            useFactory: createApollo,
            deps: [HttpLink],
        },
    ],
})
export class GraphQLModule {
}

How did you define the provider? You probably just need to add UrlsService as a dependency — David
– David, Commented Oct 5, 2018 at 6:52
@David With or without having the service in the module providers makes no difference, still the same error. — Alfa Bravo
– Alfa Bravo, Commented Oct 5, 2018 at 7:00
And with deps: [HttpLink, UrlsService], it does not work ? Also, your connectToDevTools: true, looks like a mistake. Try removing it if it's always true, otherwise you need to provide it — David
– David, Commented Oct 5, 2018 at 8:04

David · Accepted Answer · 2018-10-05 12:31:03Z

2

When declaring a factory function that takes parameters, you need to declare these parameters in the dependency setting deps , in the providers config. (This is explained in the angular doc). So in your example, you need to add UrlsService

@NgModule({
    exports: [ApolloModule, HttpLinkModule],
    providers: [
        UrlsService,
        {
            provide: APOLLO_OPTIONS,
            useFactory: createApollo,
            deps: [HttpLink, UrlsService],
        },
    ],
})
export class GraphQLModule {
}

Also, the connectDevTools argument does not look like it's declared properly

export function createApollo(httpLink: HttpLink, connectToDevTools: true, urlservice: UrlsService)

edited Oct 5, 2018 at 12:31

answered Oct 5, 2018 at 12:20

David

34.6k13 gold badges90 silver badges124 bronze badges

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

Collectives™ on Stack Overflow

Angular dependency injection into an export function

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related