I am encountering an issue with my query builder service in a component where I need to use it twice. Despite trying to inject the service twice, it seems that they just reference each other instead of functioning independently, as shown below:
@Component({
selector: 'app-manage-users',
templateUrl: './manage-users.component.html',
styleUrls: ['./manage-users.component.scss'],
providers: [UserManagementQueryBuilderProvider]
})
export class ManageUsersComponent implements OnInit {
public constructor(
private readonly queryBuilder: QueryBuilderService,
private readonly qb: QueryBuilderService
) { }
public ngOnInit() {
this.queryBuilder.table('users');
console.log(this.qb['_table']); // Outputs "users"; expecting an empty string.
}
}
It is uncertain whether this issue stems from the way my provider is configured (specifically the multi option), but here is how it is set up:
export const UserManagementQueryBuilderProvider: Provider = {
useFactory: (httpClient: HttpClient) => new QueryBuilderService(httpClient)
.connection(environment.USER_MANAGEMENT_API),
provide: QueryBuilderService,
deps: [HttpClient],
multi: false
};
When I change multi to true, I encounter an error stating that "table" is not a function.
ERROR Error: Uncaught (in promise): TypeError: this.queryBuilder.table is not a function
The structure of the QueryBuilderService is as follows:
@Injectable({ providedIn: 'root' })
export abstract class GraphQLClientService {
public constructor(
private readonly httpClient: HttpClient
) { }
}
@Injectable()
export class QueryBuilderService extends GraphQLClientService { }