#7 Dynamic Relations | Build a Complete App with GraphQL, Node.js, MongoDB and React.js

[@harshalmahajan4895]

I'm working from Home due to COVID-19 and following this series of tutorials for GraphQL, Great learning so far! Thanks to Max :)

[@lukask4498]

Same here awesome series. Max is very good explaining clearly how those pieces tied together.

[@r.klaxman2026]

brother can you help my code when i use populate('creator') function my code doesn't work i am stuck here my api is give error: "Cannot return null for non-nullable field Event.creator.", Please

[@lukask4498]

@@r.klaxman2026 Really difficult without seeing your code. Make sure you are referencing 'User' in creator and also exporting both 'Event and eventSchema'

[@williams6726]

@@r.klaxman2026 I'm stuck at the same place actually, did you ever figure it out? I reference User and have proper exports. My query works without the creator attribute.

[@AtifKhan-cm8qv]

@@r.klaxman2026 i think your code should be like this and works for me type User { _id: ID! email: String! password: String } hope i helped

[@lordbeldingford5439]

With mongoose 5+, you can populate nested document with: populate({path: "nestedRef", populate: { path: "subNestedRef" }}) So here, it would look like this: events: async () => { try { const events = await Event.find().populate({ path: "creator", populate: { path: "createdEvents" } }); return events; } catch (err) { throw err; } },

[@ms1901]

That's a great feature, but it, unfortunately, wouldn't work in this case. The video describes a never-ending loop of populated fields, as long as the GraphQL query (or mutation) demands is. The code as you describe it would only work for a loop of populations with a predetermined maximum depth, namely the number of nested populations defined in the code. TL;DR: If the code defines A->B->A->B, then A->B->A->B->A would never be possible in your solution, whilst A->B->A->B through to just A would still work. (It would also be less efficiënt, for it would always go to the maximum depth, even if the GraphQL query only wants A->B)

[@sachin__ak]

@@ms1901 yes true.

[@ИльяКарев-р9ф]

Absolutely best frontend blogger in KZbin. I really love your smiles at the ends of videos, it is a fantastic mix of cuteness & quality :)

[@mateja176]

Mutual recursion rocks the house! It's great that you took out time for refactoring, it's too often disregarded.

[@travisstewart8963]

Pll

[@Gadgetoholic]

At this point, after following your tutorial from #1 of this series - I went on Udemy and purchased your full course. Great job - thank you for helping me out with GraphQL!

[@aadams99]

Will you be adding GraphQL Subscriptions for real-time UI updates? I found this is a big gap in most GraphQL tutorials.

[@bennychewDev]

Thanks again Max! I don't really understand the bind(this) part. But it's an eyeopener to know nested types can be queried with functions instead of using populate, to make it flexible. Edit: Aha! I think I understand the usage of bind(this). Snippet: user: user.bind(this, booking._doc.user), Is this to write it in a way that we can pass the function as a reference, just like in React onClick={handleClick} // omit the (), but at the same time being able to pass in the parameters like myFunc(a, b)?

[@bhargavshah878]

Hey Max, Greetings! Why do we need to bind the user function to this? It does not use this at all. Am I missing something?

[@valonhaliti2882]

I have the same question.

[@shauryadhadwal6031]

Me too!

[@ashfaqsherwa4787]

I have the same question. I tried removing .bind() and made regular function calls. On mutation createEvent, I am going three level deep to get creator, createdEvents and again their creator. Without .bind() this goes into an endless loop. It would be great Max can explain why is he using bind() here.

[@wusswuzz5818]

Max is using a concept called currying. It is the technique of taking a general function with given parameters making a copy of it and hard coding one or all those parameters. This is done with bind. The "this" keyword in this case is irrelevant, in that he does not make use of it, but it's required to be there. const generalFunc = function(x, y) { return x * y } if we want x to always be 3 then we can use bind. const generalFuncWith3Hardcoded = generalFunc.bind(this, 3) so you can call generalFuncWith3HardCoded like this generalFuncWith3HardCoded(2) // where 2 is the y parameter Look back at the code you will see that he sets up a general function that takes for instance a user id const getUserById = async userId => {} then else where he makes a copy of this function with a specific user ID and set it as one of the object fields. return ({ ...createdEvent._doc, creator: getUserById.bind(this, createdEvent._doc.creator),

[@GooseGumlizzard]

@@wusswuzz5818 thanks for the explanation

[@blank583]

Hi! I just started studying graphql and got comfortable just by watching your previous episodes. I'm gonna finish this though haha! Thanks for this series man! You're great! ❤ 🤗

[@razvancurcudel]

Performing 2 additional queries for every event query (for taking the user details and his created events) isn't a performance problem for bigger applications ?

[@Max-vn8ym]

You would think that but you have to remember that you also have to do less queries because of it. And in most applications there are far more queries than mutations. Someone correct me if i'm wrong.

[@cesmejia4862]

Max, recursive queries are not working anymore... any working solution anyone?

[@ratnabhkumarrai5594]

did u find any ?

[@billpliske]

Max, I'm not completely understanding when/why you use ._doc

[@alextjn]

I think it's a thing for older mongoose versions, because I cannot find anything about it in the current version's docs. I'm using { ...result.toObject({ .versionKey: false }) } instead (Works the same as far as I can see)

[@N96123]

It is about versions. I simply return the result not even map it or wihout accessing any property.

[@N96123]

By the way, i just realized that if you gonna spread and object you have to use _doc otherwise you get error. for example: return events.map(event => { return { ...event._doc, // correct ...event, // wrong creator: user.bind(this,event.creator) } })

[@anishagarwal6482]

@@N96123 lol, just saw your comment after 2 hours of brainstorming. thanks !

[@VIVEKsingh-gk3et]

wonderfully explained! as always

[@neiker234]

If you will just throw the exception on the catch, you can just remove the try catch block

[@DrSarge37]

Not going to lie... Seeing a spinner for in my case 2 events is crazy... It should basically be instant, especially when I am running my mongodb instance on my machine.

[@stephenmabuza2185]

Thanks so much Max for the clarity on zooming deeper into the data tree 🌲.This is how bing & Netflix was able to read user messages from Facebook data 👍.Zuckerberg left the door open. Don’t know if It is possible to add permissions on some certain branches of the graphql node ?

[@iyankamau]

using this.bind to mimic multilevel population is not the most performant approach. You could use this to go as deep as required: Event.find().populate({ path: "creator", populate: { path: "createdEvents" populate: { path: "..." } } });

[@DjSkywalkerz]

i'm trying your solution and got an error: ""Schema hasn't been registered for model \"Event\". Use mongoose.model(name, schema)""

[@DjSkywalkerz]

ok so the solution is to pass the model to populate like so: Event.find().populate({ path: "creator", populate: { path: "createdEvents" model : Event populate: { path: "..." } } });

[@iyankamau]

@@DjSkywalkerz Yes that's correct. You don't need to pass model though, unless you have two separate MongoDB instances of the Event model. Please checkout this link: mongoosejs.com/docs/populate.html

[@dylant5965]

Why do you have to use bind if its a arrow function? It definitely works without doing that on my end.

[@dylant5965]

Also is all the then and catch statements really necessary? Everything seems to work without adding .then {...event._doc} to everything which was not even explained well. Like your tutorials just curious because it all works the same without it.

[@waliddu62]

nice video again. And guys for your information sometimes there are things that max shows that dont work anymore because mongoose/graphql have been updated but I think you can found the solution by yourself without problem

[@renon3359]

Best video on GraphQL on the net. Thanks Max :)

[@academind]

Thanks a lot for your awesome Aritra!

[@ManishSharma-xu3gf]

I have a query related to the loop you are using to create a relation in resolvers. What if there is huge data is looping that may cause errors? And how to handle relationships in the case of microservices.

[@putenz87]

Ei Max why we are able to retrieve the user with the function user? I mean, the user function returns a promise, so the value will be the promise object, not the user.... am i missing something?

[@ZainAli-dw7rj]

Make sure you don't have any null ref in DB. It will throw error while populating.

[@tanujdave814]

Awesome explain! You made mistake and solve them by explaining that is nice way to explain

[@hamzakhattabi9251]

It's very unpleasant to use ._doc on each spread operator =(

[@ywohuetautboen]

Max thanks for dropping the video as you said you would! Totally awesome mate. Can't wait for the next one! This is my favorite series thus far. I am following along but building an app to search the database that has 45MB of data about items in the game DAoC. Can you point me in the direction of building an importer for the JSON file, it's 45MB and the import tool for MongoDB is limited to 16MB.

[@Raviraj-1514]

asyn await was bit tricky for me . is it compulsury to use asyn await or it is ok with then and catch?

[@ebawho]

First of all, Thanks Max for these great videos. I understand conceptually what .bind(this) does, but I am having a hard time figuring out why it is used here, for example "creator: user.bind(this, event.creator)" Why would simply "user(event.creator)" not work? What am I missing? Can you explain a bit as to why that is in here and its functionality? Thanks!

[@victors16811]

bind just creates a new function from another function but for this case also avoid to be called before passing down. another approach to bind the function automatically and pass parameters without execute the function is using double arrow function const user = (userId) => () => { ... } this way you can pass a parameter without executing. userId("sss");

[@psyfozim]

@@victors16811 I did not know that double arrow function trick. Thanks Victor!

[@cesarjunior2190]

Why do you catch and throw the error again? Isn't it easier to just let the error be thrown without catching it since you only catch it and throw it again?

[@CoolMani02]

hi @Max, I am Facing the issue getting data on multiple doc , its take too much of time, how to reduce the fetching time now its take 6 sec, but i need in 1 to 2 sec please help me for that, thank you max

[@issariyasimsri8689]

Hi Max, Can I use createdEvents: () => events(user._doc.createdEvents) instead of createdEvents: events.bind(this,user._doc.createdEvents) ?

[@anvt8457]

I have the same doubt, bind() making it more complex

[@mikezcooler]

Max great series. but around 9:36, when you have replaced properties with functions, this had me real confused as to how it even worked, as you're assigning using a function, and so I couldn't see how it was to be called and functions are of course first class objects. It was only few minutes later that you mentioned that graphql would see that it was a function and invoke it. Would be helpful to have said this point earlier as I stopped the video to see why.

[@apoorvvardhan9611]

Small doubt , in the events function you have written "creator: user.bind(this, event.creator)" and in querying events "creator: user.bind(this, event._doc.creator)" , so just "event.creator" will also work here just as we access id right? By the way great video series. Thanks, Max.

[@phamvietlinh4255]

I change the code to creator: user(event._doc.creator) and it work well. I have a little doubt like you do. Why have to user.bind() ?

[@faxxo9635]

thing is, you store id in mongoDB, so creator without populate function will give you objectID not a actual creator !

[@zhihanzhao4374]

Any one have the error output after implemented the dynamic relations? I follow every steps, but when I query the events ' creator's createdEvents' creator, it can not be fetched deeply.

[@PressStartLetsPlay]

is anyone else now able to query the hashed password?

[@ivanaleksandrov7157]

Max, I'd love to see your take on phantomjs with Nodejs or headless browsers in general, maybe in some next video? Thanks. :)

[@riongull]

Thanks, Max. These tutorials are convincing me that Prisma is the way to go. Why define Schemas for both GraphQL and a database. Why not just let GraphQL drive the database?

[@sivakrishna4270]

As of now you can't use custom Ids with prisma. And maintaining a docker container is another thing. But for something quick it's a good choice.

[@aadams99]

Prisma is shit. Stay away from it, abstracts too much away, ties you down. What Max is doing is bear-bones GraphQL and it's great!

[@FaithfulAnere]

i for one totally dig Prisma and good thing is it supports mongodb now even though its in its prime its totally good of a news. Ids with prisma are not really an issue at the end of the day and Ids are generally not customized so i also think prisma is the way to go. And as far as maintaining prisma in docker is concerned its not as difficult as it seems on first thought. Its totally good what Max is doing and super a way to go as well, I totally love coming across Max for clarity of a lot of things. you gotta know what happens under that bed anyway, so yeah Max is always the man.

[@rvanek1]

Thank you, this is really good tutorial. You learn so many things from one video!

[@academind]

Thank you Roman, happy to read that :)

[@standcontractdelta8120]

Extremely helpful, thank you so much

[@hasithudayanga6160]

If you want to go deep to fetch data. Rather than a manual setup you could use this. const events = await Event.find() .populate({ path: "creator", populate: { path: "createdEvents", model: "Event", populate: { path: "creator", model: "User", }, }, }) .lean();

[@martinfu7659]

creator: user.bind(this, event._doc.creator), the result shows "Cannot return null for non-nullable field User.email" while query

[@martinfu7659]

Sorry, I got a typo in the user function, missing a _ in the return{...user._doc} expression.

[@Iwillownyouandbehappy]

Noooice, waiting for next episodes.

[@academind]

The next parts will be released next week.

[@icaropereira4797]

Nice video, Max! Thanks =)

[@pradeepsaravanau]

without bind i tried the log the events but the events are looping , can anyone explain please ,,

[@jazimabbas8168]

I think if we use some third party libraries like underscore.js then our code more readable instead manually using spread operator

[@iliaposmac8672]

It was awesome. It is really hard to understand, i reviewed 3 times 6th and 7th videos , and finally i did it. Watching you video, i started to understand all this "complicated" things. Its enough good to be a best video on #youtubeIT.

[@iliaposmac8672]

And also, i improved my english:D:D double profit :D:D

[@ywohuetautboen]

Max, I think there is another password security problem at 15:45 in the video, I think you need to null the password in the user arrow function. In your source file *./graphql/resolvers/index.js* between line 28 and 29 should probably add *password: null,*

[@N96123]

I simply removed the password from User type so no one can query it. It is not appears in the list when you type ctry+space

[@ardilesmontenegroprogramme3910]

Another solution is to place "select: false" on the password field of the user mongoose schema. This way, it will always return null when its called, and you will not have to change the code on the graphql resolvers. mongoosejs.com/docs/api.html#schematype_SchemaType-select

[@Cohti]

@@ardilesmontenegroprogramme3910 Thanks for this tip, was super helpful!

[@levyadams1225]

@@ardilesmontenegroprogramme3910 you rock!

[@jiraiya52]

Hey max! How about virtuals operation to show them in graphql?

[@khandoor7228]

Amazing Max really great as usual

[@academind]

Thanks so much :)

[@Gorr1995]

22:34 - string#69 event._doc.date -> result._doc.date . Currect me if i'm wrong

[@r.klaxman2026]

can anyone help my code when i use populate('creator') function my code doesn't work i am stuck here my api is gives error: "Cannot return null for non-nullable field Event.creator.", Please

[@parrou3]

I see that response time is big! please check at 24:57 , any comment please ?is it a normal behaviour ? is there any benchmark to compare graphQL vs rest API , thanks

[@SkitchAle]

I was wondering that too. I think it was about 2/3 seconds per query for only 6 events. Not good really.

[@luismunoz9126]

he fixe it later, look at your code, in my computer it goes fast

[@parrou3]

Thanks

[@luismunoz9126]

@@parrou3 medium.freecodecamp.org/five-common-problems-in-graphql-apps-and-how-to-fix-them-ac74d37a293c

[@phamnhans]

yeah. i like async await. I want to use it my project. thank Sir!

[@angelxav1]

You're a legend. Extremely concise and clear explanation. Thanks !!

[@rockon7478]

anyone confused why. bind() method is used, here's why: .bind method is used as a way to be able to pass arguments to the function when that function is invoked because in here we are just passing the reference of the function. i.e it was not necessary to do it in this way it could have been done in this way also: -------------------------- events.map(event => { return { ...event._doc, _id: event.id, date: new Date(event._doc.date).toISOString(), creator: () => user.bind(event.creator) }; }); ----------------------- return { ...event._doc, _id: event.id, creator: () => user.bind(event.creator) };

[@mariri_]

You don't need bind if you are using arrow functions since the value of "this" is not lost in arrow functions.

[@paligamy93]

What's happening here is pretty weird if you don't understand bind. user is a Function and when you call Function.bind(context, args) it creates another object. Within the Functional Programming field of computer science, bind normally means that you're going to define the values of some or all the function's arguments and thus create a new function. So if you had f(x, y) = x*y if you bound x to 7 and called it g and asked what the definition of g was it would be g(y) = 7*y So why would Academind here not just call the user Function and instead bind it? Well it seems that if Graphql sees that creator's type is Function and not Object, it will call that function. Graphql will not have the context to actually populate the arguments to call the function user so you must bind them. Graphql will then be able to call `event.creator()` without any arguments. My suspicion is that if you were to assign it as this it would also work: { ...event.doc, _id: event.id, creator: ()=> {return user(event.creator)} }

[@paligamy93]

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

[@paligamy93]

Try this in the developer tools: const func = (arg) =>{ console.log(arg) } const foo = func.bind(this, 'Hello, world') foo() //will print 'Hello, world' typeof(foo) //will return 'function'

[@munkh-erdenets5796]

Hi Max. How can i resolve "Cannot read property '_doc' of null" problem. Thanks

[@kariimmuhamad7025]

I also have this issue, did you resolve it?

[@munkh-erdenets5796]

@@kariimmuhamad7025 yeah, i followed the instruction part 6.

[@rajnishtiwari1227]

was bind() really required ?

[@zoroXgamings]

waiting for a full course with graphql and node express react on udemy

[@zaimanza]

I need help. I am getting [Function: bound ] AsyncFunction whenever i use bind

[@mariri_]

You don't need to `.bind` if you're using arrow functions. Since they are block scoped. It worked for me without it.

[@mariri_]

Pass it like so...For example: createdEvents: events(user.createdEvents)

[@shameekagarwal4872]

1. i am using graphqlobjecttype and not buildschema 2. instead of writing the two separate functions, i am simply ading additional logic to the types now you can have any level of nesting which i believe was the motto of this tutorial first part the only thing bad about this is repeated use of graphqlnonnull and if someone knows of a better approach e.g. using '!' please let me know here is my code - ideone.com/2rIqYQ

[@hamzaayech5966]

Liked even before watching the video.

[@academind]

Thank you Hamza, hope you also like it after watching the video!

[@anvt8457]

i didn't get user.bind() part,cant we just call user(creatorobject)

[@kennethjoris2212]

Yes you can

[@mariri_]

yes if you're using arrow functions since the value of "this" is not lost in arrow functions. Look up arrow functions and how it effects the "this" keyword.

[@yovanyluis]

Nice video, thanks for sharing. Can you give your thoughts about how does AWS AppSync compares to this?

[@aadams99]

AWS AppSync is dog food. Don't go near it. Forces you (almost) into using DynamoDB just for starters. Terriable developer experiance.

[@FaithfulAnere]

@@aadams99 i totally agree with you. I hate the idea of being forced to use DynamoDB it literally cracks open my head - #StayAway

[@abdalhadiabdallah4629]

Thanks for the video, but i'm wondering why we writing graphql code in string, why there is no file extension like .ql or something?

[@Dangnguyenhai141213]

You can define your GraphQL types, schemas by using methods shipped by graphqljs library. All are JavaScript objects instead strings.

[@aadams99]

You don't need a .graphql extension for anything extra really! :D And all graphql code schema code is in a string no matter what! He's just not breaking the schema/resolvers out into separate files (yet).

[@FaithfulAnere]

Yeah just like Aaron mentioned, wait till Max breaks it up then you will gain more clarity. #coolSeries

[@anders8638]

I do not understand why this code is not working... Anybody figured this out? events: () => { return Event.find() .populate('creator') .then((events) => { return events.map((event) => { return { ...event._doc, _id: event.id, creator: { ...event._doc.creator._doc, _id: event._doc.creator.id, }, }; }); }) .catch((err) => { throw err; }); }, query { events { creator { _id } } } error "Cannot read property '_doc' of null"

[@artyte_b]

why is bind necessary right here?

[@HarshalHirve555]

Hey Max, thank you so much for the series. This is much helpful. But, as i was going through the graphql eco-system, please help me understand about these: - graphql - express-graphql - apollo-server - apollo-client - graphql-yoga - prisma If i were to start to a LIVE PROJECT, which combination to use ? What is industry recommended standards ?

[@aadams99]

This tutorial "series" Max is doing is meant to help you understand: graphql, express-graphql, and I think he'll get into apollo-client too. The rest you have listed are just abstractions or tools to help you implement GraphQL Server/Client, and I think you'll have to look elsewhere for more info on that (thank goodness). I'd stay away from Yoga/Prisma. Apollo Server is great, but at the same time kinda does the same thing as express-graphql (which is the GraphQL server tech he chose to implement/teach).

[@HarshalHirve555]

@@aadams99 Hey Aaron, thank you for your reply. Got it. No issues. Merry Christmas....

[@narutokunnn]

Where can i download this project? He said there will be a link with the video but I dont see anything in the description

[@AtifKhan-cm8qv]

lol you still watch on covid. same. take care everyone this is the finished code link kzbin.info?q=https%3A%2F%2Fgithub.com%2Facademind%2Fyt-graphql-react-event-booking-api%2Ftree%2F06-finish-events-schema&v=bgq7FRSPDpI&redir_token=criiOEn8LRjnL6v28eVLuI5raQ18MTU5MzU5Njk2NEAxNTkzNTEwNTY0&event=video_description

[@narutokunnn]

@@AtifKhan-cm8qv thanks!

[@nishantdande9920]

Superb tut

[@arsamsarabi]

Setting the below globally fixed the ID issue for me const { ObjectId } = mongoose.Types ObjectId.prototype.valueOf = function () { return this.toString() }

[@dextersinister6704]

This is what I did too.

[@quantum634]

Where do you add that ? do the express server ?

[@arsamsarabi]

@@quantum634 yes near the top of my index.js before using mongoose for anything else

[@gopinathkrm58]

nice video Max

[@sanskaarpatni9137]

Where can I donate? Patreon?

[@academind]

We don't have that, you can get one of our courses (academind.com/learn/our-courses/) if you want to, with that you get a course where you learn something new and we earn some money :)

[@MikeStoneJapan]

This series is serious

[@academind]

:D

[@moduntilitbreaks]

I'm not quite following, what's the proper implementation of async await return here: kzbin.info/www/bejne/mJjUaHmIiLV3pqs

[@gregoryprosper]

You forgot to add this one to the playlist.

[@academind]

That is correct, added it now, thanks for the hint Gregory.

[@AnkitBhatt]

Github code is not updated as per videos

[@academind]

You can actually find the code here => academind.com/learn/node-js/graphql-with-node-react-full-app/

[@SARAVANAKUMARPS]

What is the prettier plugin you are using max

[@academind]

I actually just use the Material Icon theme and the Angular Essentials extension by John Papa.

[@HarshalHirve555]

...please release next videos soon. Cant wait.. :)

[@academind]

Next one will be published tomorrow ;)

[@HarshalHirve555]

@@academind Thank you. Can you also please reply to my below comment too?

[@aadhinana]

Greatttttt!

[@mykhailobryndzak]

thank you!

[@melghost18]

.bind(this) actually its .bind(null) but better () => () =>

[@adamkenton2585]

Does anyone else get this problem too ? imgur.com/a/B3218yv

[@vaibhavthalanki7320]

it is an infinite loop, itll consume your memory

[@abdouseck4894]

didn't you just create an infinite loop yourself?

[@rajnishtiwari1227]

exactly, i even consoled it on terminal, and it was a infinite loop

[@kadekeqw23]

This is complicated...

[@alexperry8096]

So many mongodb bad habits in your code man