This is a really good example of reactive programming. Begs the question, would you really need sockets to create a realtime chat app? Great video @Jon
Thanks Geoff. GraphQL definitely has some great perks and I think the two way communication between the client and server could help out a lot for reactive programming applications.
This is brilliant. Thank you. One of many things I don't understand, why is a login usually done with a mutation? Seems it could be a query no? Also, kind of on the same note, I want to use only graphql for interfacing with my server, including sending emails. Would I use a query or a mutation to send an email? I don't plan on actually saving them on a DB. Forgive my ignorance.
Thanks so much! I think the general idea is to use a query for 'GET' requests (getting data from database) and a mutation for 'POST', 'PUT', 'DELETE' requests (Creating or modifying the data/object). The login would most likely be a 'POST' request because you need to post your username and password to the server to get back your authentication cookie so a mutation seems appropriate. It should be noted that you don't have to be limited to only using GraphQL when making your API - if it is going to be difficult, you can use regular REST API end points in combination (e.g. image upload may be easier). With regards to sending an email I've used nodemailer and nodemailer-sendgrid-transport which requires an API key. The free options do tend to end up in junk mail however. You may not even need that if you are sending a simple email, I think if your website is on HTTPS and is trusted you can simply do this through your HTML e.g. . Let me know how it goes, I am also interested in alternatives.
@@JonPeppinck Yes, I have sendgrid and nodemailer all set. Thank you for your reply. Again, appreciate the video. Look forward to checking out some of your other videos as well as future videos.
@@JonPeppinck Thank you again. Server is coming along like a champ. Got the email working. Got a wget to retrieve a file, delete if already exists and save in a location. I like GraphQL because it gives you one end point with lots of options.
Hi Jon, i have question. I use ngfor loop in template for img src. It was like 100 items. Img size just 300kb max. When i scroll up and down the component blinking, like re-render, in fact is not. I could be wrong here. But this is not happening if i use only image as img source no matter how big the lists. Any suggestion for this thing? Thanks.
Hey Aintdra, Thanks for watching! I'm not sure exactly but this may have something to do with calling the 'refetchQueries' in your mutation for long lists with images. I used this as a simple way to display short text based list for this example. The 'blinking' could be due to reloading the images each time a mutation occurs i.e. Making a network request to get all of the list items. If this is happening, you may be able to solve it by removing the refetchQueries call on your mutation and just make the update to the database and update the list using the standard Angular/RxJS/Observables way.
@@hendra5604 Maybe, use pagination? I know Angular Material has a nice table with a pagination that can be use with or without table. Just a suggestion.
Hello friend thanks for these tutorials. I am making an application for my school and I have a problem I want to capture this message in angular { "data": { "createPais": { "success": true, "errors": [ { "path": "Country", "message": "Data entered correctly." } ] } } } How could I do it?.
Hi Hierba, I'll try answer your question but I may need some more information/clarity regarding the context. My understanding is that you want to be able to use the data in Angular relating to whether or not a country has been created, what the country is, alongside some error handling with a message that indicates if the data is in the correct format - All in response to an event that triggers the creation of a new country? If you have the data coming from your server you can create your schema and resolver similar to the 'quotes' function in this video,. Then you can create your query to get your country related data in angular and call from a function that gets triggered. If you are already receiving the country data from you query and you have server side validation, then you may be interested in using observables/Rxjs to handle this data in Angular.
Hello! Thanks for your content, it's hard to find complete and good explanations for the Angular + Apollo stack. I'm having some problems with mutations and variables and I would appreciate if you could help me. This is the mutation definition: export const orderCancellation = gql` mutation cancelOrder($id: ID!, $cancellationReasonId: ID!) { cancelOrder(input: {id: $id, cancellationReasonId: $cancellationReasonId }) { order { id isCancelled } } }`; I made it work writing the IDs directly on the string, but when I try to pass the variables when apollo.mutation() is called it stops to work. The code is: this.apollo.mutate({ mutation: orderCancellation, variables: {id: orderId, cancellationReasonId: reasonId} }); The return is a custom error message in our graphql server Didn't find any result for 'CancelOrderPayload' with the arguments '{:input=>#nil, :cancellation_reason_id=>nil}, @arguments=#nil, :cancellation_reason_id=>nil}>, @maybe_lazies=[]>}.
Hi Rodrigo, Thanks for that. From first glance everything looks okay with your front end query (assuming no minor syntax errors). When I read the error message from the server it sounds like the id and/or cancellationReasonId do not match the values in your database. Perhaps try log those arguments out and checking that both ids match the corresponding database entry? If the ID's are what you are expecting, it is hard to know without seeing your backend, but my second guess would be that perhaps something on the backend isn't set up properly? Best of luck!
@@JonPeppinck We figure it out what was the problem. Our server has declared the IDs for mutations as Integer!, instead of ID!. This is the cause of string ids was working with queries but not with mutations. Thanks for your attention!
Mega Mega Thanks Jon, Great Job!
Thanks so much Olivier - glad it was helpful!
Great tutorial. It's helped me a lot to understand graphql and make the integration in Angular. Thanks!
Awesome! Thanks so much for watching. Enjoy!
This is a really good example of reactive programming. Begs the question, would you really need sockets to create a realtime chat app?
Great video @Jon
Thanks Geoff. GraphQL definitely has some great perks and I think the two way communication between the client and server could help out a lot for reactive programming applications.
Thank you so much to share your knowledge with us, it´s an amazing tutorial!!
I really appreciate the kind feedback Angel. Thank you for checking it out and I'm glad it has helped you!
This is brilliant. Thank you. One of many things I don't understand, why is a login usually done with a mutation? Seems it could be a query no?
Also, kind of on the same note, I want to use only graphql for interfacing with my server, including sending emails. Would I use a query or a mutation to send an email? I don't plan on actually saving them on a DB. Forgive my ignorance.
Thanks so much! I think the general idea is to use a query for 'GET' requests (getting data from database) and a mutation for 'POST', 'PUT', 'DELETE' requests (Creating or modifying the data/object). The login would most likely be a 'POST' request because you need to post your username and password to the server to get back your authentication cookie so a mutation seems appropriate. It should be noted that you don't have to be limited to only using GraphQL when making your API - if it is going to be difficult, you can use regular REST API end points in combination (e.g. image upload may be easier). With regards to sending an email I've used nodemailer and nodemailer-sendgrid-transport which requires an API key. The free options do tend to end up in junk mail however. You may not even need that if you are sending a simple email, I think if your website is on HTTPS and is trusted you can simply do this through your HTML e.g. . Let me know how it goes, I am also interested in alternatives.
@@JonPeppinck Yes, I have sendgrid and nodemailer all set. Thank you for your reply. Again, appreciate the video. Look forward to checking out some of your other videos as well as future videos.
@@stynard Okay, best of luck! Thanks so much :)
@@JonPeppinck Thank you again. Server is coming along like a champ. Got the email working. Got a wget to retrieve a file, delete if already exists and save in a location. I like GraphQL because it gives you one end point with lots of options.
@@stynard Awesome work! Sounds like you have everything under control. I really like GraphQL for projects that have changing requirements too.
Hi Jon, i have question. I use ngfor loop in template for img src. It was like 100 items. Img size just 300kb max. When i scroll up and down the component blinking, like re-render, in fact is not. I could be wrong here. But this is not happening if i use only image as img source no matter how big the lists. Any suggestion for this thing? Thanks.
Hey Aintdra, Thanks for watching! I'm not sure exactly but this may have something to do with calling the 'refetchQueries' in your mutation for long lists with images. I used this as a simple way to display short text based list for this example. The 'blinking' could be due to reloading the images each time a mutation occurs i.e. Making a network request to get all of the list items. If this is happening, you may be able to solve it by removing the refetchQueries call on your mutation and just make the update to the database and update the list using the standard Angular/RxJS/Observables way.
@@JonPeppinck Hi jon, i don't know if it due my hardware or something. It just happened in chrome actually.
@@hendra5604 Maybe, use pagination? I know Angular Material has a nice table with a pagination that can be use with or without table. Just a suggestion.
@@stynard Unfortunately the issue only appear on chrome.
Hello friend thanks for these tutorials.
I am making an application for my school and I have a problem
I want to capture this message in angular
{
"data": {
"createPais": {
"success": true,
"errors": [
{
"path": "Country",
"message": "Data entered correctly."
}
]
}
}
}
How could I do it?.
Hi Hierba,
I'll try answer your question but I may need some more information/clarity regarding the context. My understanding is that you want to be able to use the data in Angular relating to whether or not a country has been created, what the country is, alongside some error handling with a message that indicates if the data is in the correct format - All in response to an event that triggers the creation of a new country? If you have the data coming from your server you can create your schema and resolver similar to the 'quotes' function in this video,. Then you can create your query to get your country related data in angular and call from a function that gets triggered. If you are already receiving the country data from you query and you have server side validation, then you may be interested in using observables/Rxjs to handle this data in Angular.
Hello! Thanks for your content, it's hard to find complete and good explanations for the Angular + Apollo stack. I'm having some problems with mutations and variables and I would appreciate if you could help me. This is the mutation definition:
export const orderCancellation = gql`
mutation cancelOrder($id: ID!, $cancellationReasonId: ID!) {
cancelOrder(input: {id: $id, cancellationReasonId: $cancellationReasonId }) {
order {
id
isCancelled
}
}
}`;
I made it work writing the IDs directly on the string, but when I try to pass the variables when apollo.mutation() is called it stops to work. The code is:
this.apollo.mutate({
mutation: orderCancellation,
variables: {id: orderId, cancellationReasonId: reasonId}
});
The return is a custom error message in our graphql server
Didn't find any result for 'CancelOrderPayload' with the arguments '{:input=>#nil, :cancellation_reason_id=>nil}, @arguments=#nil, :cancellation_reason_id=>nil}>, @maybe_lazies=[]>}.
Hi Rodrigo, Thanks for that. From first glance everything looks okay with your front end query (assuming no minor syntax errors). When I read the error message from the server it sounds like the id and/or cancellationReasonId do not match the values in your database. Perhaps try log those arguments out and checking that both ids match the corresponding database entry? If the ID's are what you are expecting, it is hard to know without seeing your backend, but my second guess would be that perhaps something on the backend isn't set up properly? Best of luck!
@@JonPeppinck We figure it out what was the problem. Our server has declared the IDs for mutations as Integer!, instead of ID!. This is the cause of string ids was working with queries but not with mutations. Thanks for your attention!
Nice work! I'm glad you solved it. Best of luck with everything.