Mixing
Angular - Returning data from GraphQL
So, I'm having an issue while working with Angular. I need to get some user data stored in graphcool so I can work with name (string) and balance (number), but it's only working when I call userName and userBalance in HTML, not in TS, here's my TS component:
public userName: Observable<string>;
public userBalance: Observable<number>;
public getUserById: string;
constructor(
private activatedRoute: ActivatedRoute,
private userService: UserService
) {
this.getUserId = this.activatedRoute.snapshot.params['userId'];
this.userName = this.userService.getUserById(this.getUserId)
.pipe(map(res => res[0].name));
this.userBalance = this.userService.getUserById(this.getUserId)
.pipe(map(res => res[0].balance));
}
And this is the method getUserById() in UserService.ts:
getUserById(userId: string): Observable<User> {
return apollo
.query<AllUsersQuery>({
query: SINGLE_USER_QUERY,
variables: {
userId
}
}).pipe(
map(res => res.data.allUsers)
);
}
Whenever I try to print userName and userBalance into console, it returns an Observable instead of a string and a number. But, in HTML, this works well:
<div>Name:
<p>{{ userName | async }}</p>
</div>
<div>Balance:
<p>$ {{ userBalance | async }}</p>
</div>
I guess it has something to do with async. How can I return the same values as I get in my HTML to my TS background?
I think it's also important to point that I tried using .subscribe instead of .map and I could see the actual values on console, but, outside that subscription the values didn't show.
Thank you for your attention!
html angular rxjs graphql apollo
asked Nov 19 '18 at 19:44
Gabriel FernandesGabriel Fernandes
1
add a comment |
So, I'm having an issue while working with Angular. I need to get some user data stored in graphcool so I can work with name (string) and balance (number), but it's only working when I call userName and userBalance in HTML, not in TS, here's my TS component:
public userName: Observable<string>;
public userBalance: Observable<number>;
public getUserById: string;
constructor(
private activatedRoute: ActivatedRoute,
private userService: UserService
) {
this.getUserId = this.activatedRoute.snapshot.params['userId'];
this.userName = this.userService.getUserById(this.getUserId)
.pipe(map(res => res[0].name));
this.userBalance = this.userService.getUserById(this.getUserId)
.pipe(map(res => res[0].balance));
}
And this is the method getUserById() in UserService.ts:
getUserById(userId: string): Observable<User> {
return apollo
.query<AllUsersQuery>({
query: SINGLE_USER_QUERY,
variables: {
userId
}
}).pipe(
map(res => res.data.allUsers)
);
}
Whenever I try to print userName and userBalance into console, it returns an Observable instead of a string and a number. But, in HTML, this works well:
<div>Name:
<p>{{ userName | async }}</p>
</div>
<div>Balance:
<p>$ {{ userBalance | async }}</p>
</div>
I guess it has something to do with async. How can I return the same values as I get in my HTML to my TS background?
I think it's also important to point that I tried using .subscribe instead of .map and I could see the actual values on console, but, outside that subscription the values didn't show.
Thank you for your attention!
html angular rxjs graphql apollo
asked Nov 19 '18 at 19:44
Gabriel FernandesGabriel Fernandes
1
YouruserNameanduserBalancevariables are indeedObservables, which is why you see them as such when you log them to the console in your TypeScript. Theasyncpipe in your template is taking care of subscribing to theObservablefor you and is why you are seeing the value there instead of theObservable. What are you trying to do in your TypeScript file with those values? Knowing that can help to give you some code on how to handle this.
– Daniel W Strimpel
Nov 19 '18 at 19:56
@DanielWStrimpel I'm just at the beginning of this project, but I assume in the future I'm going to needuserBalancevalue to apply some math, update this value then send it back to database. That's why I'm looking for an easy way to get this value not just in this component, but wherever I may need to manipulate it (a deposit / withdrawal system, for example). Is it possible?
– Gabriel Fernandes
Nov 19 '18 at 22:13
The reactive way to do calculations with userBalance would be to use RxJS operators like map (and combineLatest if you need values from multiple Observables). The simplest way to do this if you're not experienced with RxJS would be to have a variable in your component class that you set inside the subscribe function.this.userName.subscribe(name=>this.userNameValue = name)
– Benjamin Kindle
Jan 6 at 3:19
add a comment |
So, I'm having an issue while working with Angular. I need to get some user data stored in graphcool so I can work with name (string) and balance (number), but it's only working when I call userName and userBalance in HTML, not in TS, here's my TS component:
public userName: Observable<string>;
public userBalance: Observable<number>;
public getUserById: string;
constructor(
private activatedRoute: ActivatedRoute,
private userService: UserService
) {
this.getUserId = this.activatedRoute.snapshot.params['userId'];
this.userName = this.userService.getUserById(this.getUserId)
.pipe(map(res => res[0].name));
this.userBalance = this.userService.getUserById(this.getUserId)
.pipe(map(res => res[0].balance));
}
And this is the method getUserById() in UserService.ts:
getUserById(userId: string): Observable<User> {
return apollo
.query<AllUsersQuery>({
query: SINGLE_USER_QUERY,
variables: {
userId
}
}).pipe(
map(res => res.data.allUsers)
);
}
Whenever I try to print userName and userBalance into console, it returns an Observable instead of a string and a number. But, in HTML, this works well:
<div>Name:
<p>{{ userName | async }}</p>
</div>
<div>Balance:
<p>$ {{ userBalance | async }}</p>
</div>
I guess it has something to do with async. How can I return the same values as I get in my HTML to my TS background?
I think it's also important to point that I tried using .subscribe instead of .map and I could see the actual values on console, but, outside that subscription the values didn't show.
Thank you for your attention!
html angular rxjs graphql apollo
asked Nov 19 '18 at 19:44
Gabriel FernandesGabriel Fernandes
1
So, I'm having an issue while working with Angular. I need to get some user data stored in graphcool so I can work with name (string) and balance (number), but it's only working when I call userName and userBalance in HTML, not in TS, here's my TS component:
public userName: Observable<string>;
public userBalance: Observable<number>;
public getUserById: string;
constructor(
private activatedRoute: ActivatedRoute,
private userService: UserService
) {
this.getUserId = this.activatedRoute.snapshot.params['userId'];
this.userName = this.userService.getUserById(this.getUserId)
.pipe(map(res => res[0].name));
this.userBalance = this.userService.getUserById(this.getUserId)
.pipe(map(res => res[0].balance));
}
And this is the method getUserById() in UserService.ts:
getUserById(userId: string): Observable<User> {
return apollo
.query<AllUsersQuery>({
query: SINGLE_USER_QUERY,
variables: {
userId
}
}).pipe(
map(res => res.data.allUsers)
);
}
Whenever I try to print userName and userBalance into console, it returns an Observable instead of a string and a number. But, in HTML, this works well:
<div>Name:
<p>{{ userName | async }}</p>
</div>
<div>Balance:
<p>$ {{ userBalance | async }}</p>
</div>
I guess it has something to do with async. How can I return the same values as I get in my HTML to my TS background?
I think it's also important to point that I tried using .subscribe instead of .map and I could see the actual values on console, but, outside that subscription the values didn't show.
Thank you for your attention!
html angular rxjs graphql apollo
html angular rxjs graphql apollo
asked Nov 19 '18 at 19:44
Gabriel FernandesGabriel Fernandes
1
asked Nov 19 '18 at 19:44
Gabriel FernandesGabriel Fernandes
1
asked Nov 19 '18 at 19:44
Gabriel FernandesGabriel Fernandes
1
asked Nov 19 '18 at 19:44
Gabriel FernandesGabriel Fernandes
1
asked Nov 19 '18 at 19:44
Gabriel FernandesGabriel Fernandes
1
1
YouruserNameanduserBalancevariables are indeedObservables, which is why you see them as such when you log them to the console in your TypeScript. Theasyncpipe in your template is taking care of subscribing to theObservablefor you and is why you are seeing the value there instead of theObservable. What are you trying to do in your TypeScript file with those values? Knowing that can help to give you some code on how to handle this.
– Daniel W Strimpel
Nov 19 '18 at 19:56
@DanielWStrimpel I'm just at the beginning of this project, but I assume in the future I'm going to needuserBalancevalue to apply some math, update this value then send it back to database. That's why I'm looking for an easy way to get this value not just in this component, but wherever I may need to manipulate it (a deposit / withdrawal system, for example). Is it possible?
– Gabriel Fernandes
Nov 19 '18 at 22:13
The reactive way to do calculations with userBalance would be to use RxJS operators like map (and combineLatest if you need values from multiple Observables). The simplest way to do this if you're not experienced with RxJS would be to have a variable in your component class that you set inside the subscribe function.this.userName.subscribe(name=>this.userNameValue = name)
– Benjamin Kindle
Jan 6 at 3:19
add a comment |
YouruserNameanduserBalancevariables are indeedObservables, which is why you see them as such when you log them to the console in your TypeScript. Theasyncpipe in your template is taking care of subscribing to theObservablefor you and is why you are seeing the value there instead of theObservable. What are you trying to do in your TypeScript file with those values? Knowing that can help to give you some code on how to handle this.
– Daniel W Strimpel
Nov 19 '18 at 19:56
@DanielWStrimpel I'm just at the beginning of this project, but I assume in the future I'm going to needuserBalancevalue to apply some math, update this value then send it back to database. That's why I'm looking for an easy way to get this value not just in this component, but wherever I may need to manipulate it (a deposit / withdrawal system, for example). Is it possible?
– Gabriel Fernandes
Nov 19 '18 at 22:13
The reactive way to do calculations with userBalance would be to use RxJS operators like map (and combineLatest if you need values from multiple Observables). The simplest way to do this if you're not experienced with RxJS would be to have a variable in your component class that you set inside the subscribe function.this.userName.subscribe(name=>this.userNameValue = name)
– Benjamin Kindle
Jan 6 at 3:19
Your
userName and userBalance variables are indeed Observables, which is why you see them as such when you log them to the console in your TypeScript. The async pipe in your template is taking care of subscribing to the Observable for you and is why you are seeing the value there instead of the Observable. What are you trying to do in your TypeScript file with those values? Knowing that can help to give you some code on how to handle this.– Daniel W Strimpel
Nov 19 '18 at 19:56
Your
userName and userBalance variables are indeed Observables, which is why you see them as such when you log them to the console in your TypeScript. The async pipe in your template is taking care of subscribing to the Observable for you and is why you are seeing the value there instead of the Observable. What are you trying to do in your TypeScript file with those values? Knowing that can help to give you some code on how to handle this.– Daniel W Strimpel
Nov 19 '18 at 19:56
@DanielWStrimpel I'm just at the beginning of this project, but I assume in the future I'm going to need
userBalance value to apply some math, update this value then send it back to database. That's why I'm looking for an easy way to get this value not just in this component, but wherever I may need to manipulate it (a deposit / withdrawal system, for example). Is it possible?– Gabriel Fernandes
Nov 19 '18 at 22:13
@DanielWStrimpel I'm just at the beginning of this project, but I assume in the future I'm going to need
userBalance value to apply some math, update this value then send it back to database. That's why I'm looking for an easy way to get this value not just in this component, but wherever I may need to manipulate it (a deposit / withdrawal system, for example). Is it possible?– Gabriel Fernandes
Nov 19 '18 at 22:13
The reactive way to do calculations with userBalance would be to use RxJS operators like map (and combineLatest if you need values from multiple Observables). The simplest way to do this if you're not experienced with RxJS would be to have a variable in your component class that you set inside the subscribe function.
this.userName.subscribe(name=>this.userNameValue = name)– Benjamin Kindle
Jan 6 at 3:19
The reactive way to do calculations with userBalance would be to use RxJS operators like map (and combineLatest if you need values from multiple Observables). The simplest way to do this if you're not experienced with RxJS would be to have a variable in your component class that you set inside the subscribe function.
this.userName.subscribe(name=>this.userNameValue = name)– Benjamin Kindle
Jan 6 at 3:19
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53381613%2fangular-returning-data-from-graphql%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53381613%2fangular-returning-data-from-graphql%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Your
userNameanduserBalancevariables are indeedObservables, which is why you see them as such when you log them to the console in your TypeScript. Theasyncpipe in your template is taking care of subscribing to theObservablefor you and is why you are seeing the value there instead of theObservable. What are you trying to do in your TypeScript file with those values? Knowing that can help to give you some code on how to handle this.– Daniel W Strimpel
Nov 19 '18 at 19:56
@DanielWStrimpel I'm just at the beginning of this project, but I assume in the future I'm going to need
userBalancevalue to apply some math, update this value then send it back to database. That's why I'm looking for an easy way to get this value not just in this component, but wherever I may need to manipulate it (a deposit / withdrawal system, for example). Is it possible?– Gabriel Fernandes
Nov 19 '18 at 22:13
The reactive way to do calculations with userBalance would be to use RxJS operators like map (and combineLatest if you need values from multiple Observables). The simplest way to do this if you're not experienced with RxJS would be to have a variable in your component class that you set inside the subscribe function.
this.userName.subscribe(name=>this.userNameValue = name)– Benjamin Kindle
Jan 6 at 3:19