#9 Refactoring our Code | Build a Complete App with GraphQL, Node.js, MongoDB and React.js

00:00:01 hi welcome back to the serious great to
00:00:04 have you back on board again in this
00:00:06 video we'll do some cleanup work we'll
00:00:08 make sure that our schema and our
00:00:10 resolvers do you have clean code that
00:00:13 it's reusable easy to maintain and also
00:00:17 that we fix one back which I introduced
00:00:19 in the past so let's dive in
00:00:24 let's actually start with that black
00:00:26 which I have here in my resolvers there
00:00:29 I do actually return my events at some
00:00:33 point we quickly find that here in my
00:00:39 events function up there I do return my
00:00:42 events and I want to return my mapped
00:00:44 events here now the problem of course is
00:00:47 that map returns a new array and
00:00:50 therefore if a return events here I'm
00:00:52 not returning my map array I still
00:00:55 return the old events so what I should
00:00:57 do here really is I should just return
00:00:59 events map up there and get rid of that
00:01:01 return event statement down there so
00:01:04 this was the one bag which I wanted to
00:01:05 fix now I also want to work on code
00:01:09 reusability and optimize this code a
00:01:12 little bit because for example one thing
00:01:14 I'm doing is when I'm mapping my event
00:01:17 I'm always doing the same steps I spread
00:01:20 the event doc fields I then replace the
00:01:24 ID I replaced a date I replace the
00:01:28 Creator now I do this up there and if we
00:01:31 scroll down a little bit I do the same
00:01:33 thing here for example and I might have
00:01:36 a number place where I do it as well so
00:01:38 in the end yeah here for example so in
00:01:41 the end what I want to do I want you
00:01:43 kind of standardize this I want to
00:01:46 create a function where I simply pass my
00:01:49 event object in and which returns me
00:01:52 that transformed event object so that I
00:01:55 can simply call this function in all the
00:01:57 places where I did need to transform my
00:01:59 event and for this I will again add a
00:02:02 function here in this resolver and I
00:02:06 will name this function transform event
00:02:10 you can name it however you want but I'm
00:02:12 the end want to put in an event and get
00:02:14 an event out just an event which has all
00:02:17 the fields I need and therefore there
00:02:19 will have an an argument which is
00:02:23 basically the event I want to change you
00:02:25 can name it however you want I will name
00:02:27 it event here so I pass in that event
00:02:30 argument and I simply want to return a
00:02:33 new object which is basically this
00:02:37 object here so where I map my event into
00:02:40 something new so I will return this
00:02:42 object event is the name I was using
00:02:45 there too so I can actually leave all
00:02:47 the code I have in there now I can call
00:02:50 transform event here where I return this
00:02:53 I can simply call transform event and
00:02:55 pass in my event now event here of
00:02:57 course refers to dis event not the dis
00:02:59 event up there which is a local variable
00:03:02 available in this function so I can call
00:03:06 transform event here and let's see where
00:03:09 else do we need it well here where I
00:03:11 return a single event there i should
00:03:13 also return my transformed event so
00:03:16 let's call transform event and pass in
00:03:18 the event there too let's return it here
00:03:21 for the user I don't need that there I'm
00:03:24 binding my created events to the events
00:03:27 function which is fine here where I then
00:03:30 have this events resolver there I also
00:03:33 return my event like this I don't want
00:03:36 to return it like this instead here I
00:03:38 want to have the same logic as before I
00:03:41 want to call transform event and pass in
00:03:44 that event if I scroll down to bookings
00:03:46 there this is fine for now create event
00:03:50 there again I'm transforming my event
00:03:53 here and I don't want to do that so here
00:03:56 just as I did before I will call
00:03:59 transform event and here this is named
00:04:01 result so will pass and result but still
00:04:04 this will call this transform event
00:04:06 function where I do pull out my ID and
00:04:09 so on
00:04:09 so I do that down there when I create an
00:04:13 event now here now let's move on and
00:04:17 let's see if I'm doing this anywhere
00:04:20 else when I book an event were using
00:04:22 this differently when I cancel an event
00:04:25 here again there I have my booking and
00:04:28 the booking has an event field and then
00:04:30 I do all the same transformations with
00:04:33 that so here I also want to call

00:04:35 transform event and I pass in booking
00:04:38 dot event by the way if you're wondering
00:04:41 why I'm using booking event and not
00:04:42 booking dot underscore dot event this
00:04:45 would work too actually but the the
00:04:48 fields of
00:04:51 entity which is stored in the database
00:04:53 are always available on the top-level
00:04:55 element to the underscores dark field is
00:04:58 just special in a sense of this is then
00:05:01 just that data data we stored in the
00:05:04 database with no metadata on the top
00:05:06 level we got the stored data and the
00:05:08 metadata and I don't want to return the
00:05:10 metadata when I return the response
00:05:12 therefore always a dig into the document
00:05:14 there if I just want to pull out one
00:05:17 element which I then use somewhere else
00:05:19 in this case in the transform event
00:05:20 function it's fine to access this on the
00:05:23 top level
00:05:23 so if dad let's save that and let's see
00:05:26 if this still works in my database I
00:05:29 currently have no bookings I have a
00:05:30 couple of events and I have one user or
00:05:34 users actually so let's create a new
00:05:37 event now shall we let's test this first
00:05:40 so we'll have a mutation where I create
00:05:42 an event the event input is passed and
00:05:45 there well you know what we need a title
00:05:48 after refactoring the description this
00:05:54 should still work the price 999 whoops
00:06:00 should be a float though 999 and the
00:06:03 date for this I'll again use my
00:06:05 developer tools new date – ISO string
00:06:09 and then simply grab that string and use
00:06:13 this year as a date and now for the
00:06:17 generated event I want to get the ID I
00:06:19 want to get to create your email address
00:06:22 if I'd enter doesn't look too bad so
00:06:26 this was an event being created let me
00:06:29 now query for my events so here I will
00:06:32 search for events and for each event I
00:06:36 want to get the title and when I get the
00:06:39 creator email address and to be really
00:06:42 fancy let's also get the created events
00:06:45 IDs then if I now hit enter this goes
00:06:48 ahead and execute the query and there I
00:06:51 get my events gets testing which is from
00:06:54 this user who created all these events
00:06:56 there and got a never event number then
00:06:59 after refactoring off this user who has
00:07:02 two events he created
00:07:05 so this doesn't look too bad let's now
00:07:08 also book an event so for this I will
00:07:12 actually change this query here and get
00:07:14 the ID for all my events Robert Andy
00:07:16 creator data so let's now maybe book
00:07:21 this event here so let's add a mutation
00:07:28 book and event the event ID should be
00:07:32 this ID and then we can get information
00:07:36 about booking for example about the user
00:07:40 get the email address of the user
00:07:42 doesn't look too bad
00:07:43 now with that finally I just want to
00:07:47 cancel that bookings I'll grab that ID
00:07:49 here cancel booking the booking ID is
00:07:53 this ID and what we get back here is the
00:07:56 event which we cancelled and that was
00:07:59 the testing event so this now all works
00:08:01 with that refactoring in place but of
00:08:04 course we can do more for example what
00:08:06 we also can do here is this date thing
00:08:09 I'm always doing the same transformation
00:08:12 to my dates right I pass it in to the
00:08:14 date constructor and then here I call to
00:08:18 I so string of course we could create a
00:08:20 helper for this and now since this is
00:08:22 not really a helper related only to the
00:08:25 events I will create a separate helper
00:08:27 folder here or maybe named helpers and
00:08:33 in there I want to have my date J's file
00:08:36 because we could have more date related
00:08:38 helper functions I will only export one
00:08:41 here I'll use that our exports syntax no
00:08:45 chairs offers so not module exports but
00:08:48 exports and then we can assign a name
00:08:51 and store something in there
00:08:52 so here I'll have my date to string
00:08:57 helper let's say and this shall be a
00:09:00 function where I get a date and where I
00:09:05 then simply return new date with that
00:09:09 date being passed in to either string so
00:09:12 a really simple function that just takes
00:09:14 a date and transforms it to a nice and
00:09:16 string and now we can import that into
00:09:18 the
00:09:18 resolver file here so here I'll have my
00:09:24 object which I'll get from this helpers
00:09:27 folder from the date file there and this

00:09:30 is a JavaScript object and I can use
00:09:32 object D structuring to pull out that
00:09:35 date to string field and store it in a
00:09:38 separate constant here in this resolvers
00:09:40 file and now I can use stage two string
00:09:43 as a function in all these places here
00:09:46 so there where I pass an event dog date
00:09:49 I can use data to string just like this
00:09:52 and it should still work and we can do
00:09:55 that in all the places where we have a
00:09:57 new date in here so here for example
00:10:01 there I want to use data to string date
00:10:06 to string and get rid of 2i so string at
00:10:09 the end of course and we have another
00:10:12 occurrence down there here there I also
00:10:17 want to use state to string and replace
00:10:21 that with this so now just a quick check
00:10:25 here let's run a simple query where I
00:10:28 get all events and let's get their dates
00:10:30 I still get the right format but now I'm
00:10:33 using my helper function which allows us
00:10:35 to well put all that logic into one
00:10:38 place when everything we can do is just
00:10:41 as we created this transform even
00:10:42 function for well centralizing this
00:10:46 transformation logic we have for every
00:10:48 event we're working with we can do the
00:10:51 same for bookings because if you have a
00:10:53 look at the bookings here I'm
00:10:55 transforming my booking and I'm also
00:10:58 doing the same a little bit server down
00:11:02 here this is also my booking so it would
00:11:06 make sense to also put that into a
00:11:08 dedicated function transform booking
00:11:11 seems like a fitting name since I named
00:11:13 TR one transform event there I'll get my
00:11:16 booking data or my booking object and
00:11:20 here I want to return to transformed
00:11:23 object so let's scroll down to the place
00:11:25 where we do transform it here let's cut
00:11:29 that from there and move it up here
00:11:32 and I already named it booking here so
00:11:34 this code will continue to work I use
00:11:36 booking there to pull out all the things
00:11:39 that transform all the things I want to
00:11:41 transform and therefore we can now
00:11:43 simply call transform booking in the
00:11:46 place where I cut this here transform
00:11:50 booking and pass in the single booking
00:11:53 to apply the transformation and do the
00:11:56 same when we create a booking when we
00:11:58 book an event there I also do all these
00:12:02 transformations here I do it on the
00:12:04 result because the result here is my
00:12:06 booking but still I can call transform
00:12:08 booking and simply pass in the result
00:12:10 there now let's see that if I take any
00:12:14 event quickly fetch the idea here let's
00:12:20 say that one and I then again book it so
00:12:24 I'll add my mutation and book the event
00:12:28 with this ID here let's quickly get the
00:12:33 booking idea that seems to work
00:12:36 let's book again and now output the
00:12:39 updated add state there's all the works
00:12:41 and let's now run another query where we
00:12:44 get all the bookings and there I want to
00:12:47 have the event title let's say and the
00:12:51 event date and I want to have the
00:12:54 updated at date for the booking itself
00:12:56 if I run this this also looks good the
00:12:59 dates look good to me
00:13:00 booking data seems to be retrieved
00:13:02 correctly I seem to have two bookings
00:13:05 let's cross validate in our MongoDB
00:13:09 Explorer here looks good too so now we
00:13:13 well optimized this a bit as well the
00:13:17 final thing I want to do for now is I
00:13:19 want to split my resolvers so that I
00:13:22 don't have this one huge resolver file
00:13:24 but that I instead have multiple files
00:13:26 where every file has its own
00:13:28 responsibility for example it would make
00:13:31 sense to have and let's say events
00:13:34 resolver which takes care about the
00:13:37 event creation event querying and then
00:13:39 have a booking
00:13:41 resolver which is responsible for
00:13:43 booking events and cancelling bookings
00:13:45 so
00:13:46 to split this up all I have to do is I
00:13:50 have to move my logic over into these
00:13:52 files which is a bit of copy and pasting
00:13:55 for now so here I will for example use
00:13:58 that data to string thing which I will
00:14:00 need in both files and it will import it
00:14:03 in both files therefore I will also need
00:14:06 the event model here obviously in my
00:14:10 events file so I will import it here and
00:14:14 now what I have to do here is I need to
00:14:18 export an object with all my event

00:14:21 related resolvers so I can go down to my
00:14:26 marginal export here and simply grab
00:14:29 grab it entirely maybe that hold marshal
00:14:32 exports and then I'll just remove what I
00:14:34 don't need so copy that whole module
00:14:37 exports from index J s move it into
00:14:40 events J s and now there I won't need to
00:14:44 cancel booking functionality so we can
00:14:45 get rid of that I don't need book event
00:14:48 because I want to handle that in the
00:14:49 booking resolver I won't need create
00:14:53 user of course because no users should
00:14:56 be created here I want to be able to
00:14:58 create an event here I don't need to be
00:15:00 able to retrieve my bookings here so we
00:15:02 can get rid of that I want to be able to
00:15:05 retrieve my events though and of course
00:15:08 since I reference transform event here I
00:15:11 want to move that into that file too so
00:15:14 I'll cut transform event from index J s
00:15:17 and move that into events J s so moved
00:15:20 add into there so now I have dead in
00:15:23 here but there of course I do reference
00:15:26 that user function you might remember
00:15:28 that user function which in the ends
00:15:30 allows us to populate our user data on
00:15:34 the mod and actually all these
00:15:37 population functions events single event
00:15:40 and user they will be used by our
00:15:43 different resolver parts you could say
00:15:46 so we should outsource them into a
00:15:49 separate file from which we can import
00:15:51 in all the average solvers so that we
00:15:53 don't have to cross import and create
00:15:55 infinite loops from our different
00:15:57 resolver files so for this
00:16:00 there are different ways of setting this
00:16:01 up you could move this into helpers file
00:16:03 I want to keep it in there resolvers
00:16:06 folder because in the end this is
00:16:08 resolver related but I will treat a new
00:16:10 file in there and maybe named as merge
00:16:13 jeaious because the functionality and
00:16:15 there is about merging data but you can
00:16:18 name just differently of course and in
00:16:20 that merge J's file I will add my free
00:16:24 functions up there events
00:16:26 single event and user I will cut it from
00:16:30 the index.js file here and move it into
00:16:32 the merge J's file and then there I
00:16:35 simply want to export that so we'll add
00:16:38 export which is named user which points
00:16:42 at that user function I have here I will
00:16:45 have an export which is named events
00:16:48 which points at that events function I
00:16:50 defined up there and of course I'll also
00:16:53 have my single event here so I'll name
00:16:55 exports certain single event I'll add
00:16:59 this to and point at my single event so
00:17:02 now I export all that in emerge as file
00:17:04 and this means we can import it for
00:17:06 example in the events J's file there
00:17:09 will again use object D structuring I'll
00:17:13 require my merge file here and here in
00:17:18 this file I want to retrieve my user so
00:17:23 that I can still use this user function
00:17:25 now I'm importing this here so I can use
00:17:27 it and I do I need something else here
00:17:31 got transformed event in here rest
00:17:35 should be fine so we'll need the other
00:17:39 functionalities in our other files I
00:17:41 will also add a off J's file or a user J
00:17:44 s however you want to name it which is
00:17:46 responsible for creating users and so on
00:17:48 so now events seems to be finished let's
00:17:51 now go back to index J s where I already
00:17:53 ready removed some things now I want to
00:17:56 remove my event related things there too
00:17:58 so the event related resolvers create
00:18:01 event I don't need that here anymore
00:18:03 because I have to add my events J's file
00:18:05 in my resolvers folder our parts stay
00:18:09 there so let's now copy that entire
00:18:13 I'll content maybe move it into bookings
00:18:16 jeaious and replace that import with it
00:18:18 I won't need be tripped in there I won't
00:18:23 need event add user in here but I will
00:18:27 need the booking model and it will need
00:18:29 data to string because I'm using it here
00:18:31 got transferring booking and whenever
00:18:34 thing I need here is I need a single
00:18:36 event and I need a user functions which
00:18:38 I export in my merge file so here I will
00:18:42 import that again we'll use string
00:18:46 interpolation let's require merge here
00:18:50 this merge J's file and then in there
00:18:53 let's grab the single event and the user
00:18:57 function which I'm using here and here
00:19:00 and now if I go down to the resolver we
00:19:03 certainly need the bookings right

00:19:04 because that is what this file is all
00:19:06 about we won't need create user that is
00:19:10 not the responsibility of this file we
00:19:12 will need to be able to book an event so
00:19:15 that is something we do need here and I
00:19:18 also want to be able to cancel a booking
00:19:19 so I'll leave that in here too so now
00:19:22 this is my updated resolver for bookings
00:19:28 now let's go back to index J s and there
00:19:31 let's now get rid of transform booking
00:19:34 we don't need it here let's get rid of
00:19:36 bookings and off book event and cancel
00:19:40 booking and all that is left is to
00:19:42 create user functionality so we'll now
00:19:45 cut the entire content from index trace
00:19:47 and move it into off J s there however I
00:19:51 don't need day to string I don't need
00:19:53 the booking model I don't need the event
00:19:55 model so we can remove that I will need
00:19:58 bcrypt
00:19:59 I will you need the user model because I
00:20:01 am creating my user here but that is it
00:20:05 that is all I need here so now with that
00:20:09 I split up all my resolvers the question
00:20:12 now of course is how do I get them back
00:20:14 together because splitting them up is
00:20:16 nice but we need to have one resolver
00:20:19 root value object which we then pass to
00:20:22 app j s to this root value field and I'm
00:20:26 importing graph QL
00:20:27 soldiers from my index file in that
00:20:29 resolvers folder and that file is empty
00:20:32 now which is certainly not what I can
00:20:33 import well it's pretty easy to make
00:20:35 this work
00:20:36 in the index.js file in the resolvers
00:20:39 folder i need to import my individual
00:20:41 resolver pieces which i have in a
00:20:44 separate files so we'll add a couple of
00:20:46 imports here for example d off resolver
00:20:50 which I require from the off file and
00:20:56 then I'll repeat that for my two other
00:20:57 resolvers so of course here I have the
00:21:00 events resolver from the events file and
00:21:04 I have the booking resolver from the
00:21:08 booking file now keep in mind in every
00:21:12 file I have this module exports syntax
00:21:16 where I export one object which has a
00:21:18 couple of fields which has my different
00:21:20 resolver functions basically now since I
00:21:23 will now merge them into one global
00:21:25 object we must of course ensure that we
00:21:27 have no naming clashes so that we never
00:21:30 use a name twice and that is true for a
00:21:33 graph GL in general it doesn't know
00:21:35 namespaces every resolver fits a field
00:21:39 in the schema and therefore you have to
00:21:40 avoid duplication they're nested fields
00:21:43 are of course ok but on the top level
00:21:46 here if we have bookings and book event
00:21:48 then of course we can only have them
00:21:51 once because in the schema we also only
00:21:53 have bookings and book event so here we
00:21:56 can't have bookings twice for example so
00:21:59 that is what you have to keep in mind
00:22:01 and what we have in our resolvers
00:22:03 anyways so now i'm just importing these
00:22:06 different objects and all i do in there
00:22:08 in x JS file i now merge them into one
00:22:11 root resolver so i'll name this root
00:22:14 resolver here and this will now be a
00:22:16 javascript object and there I will use
00:22:19 the spread operator to spread all the
00:22:22 fields so all the resolver functions of
00:22:24 my offers solver into it of my events
00:22:28 resolver and of my booking resolver and
00:22:33 now I will simply export this root
00:22:36 resolver and that is what I therefore
00:22:39 will import in app jeaious
00:22:41 I exported here in app j/s I do import
00:22:45 it and therefore I correctly assign it
00:22:47 here and I can use it let's quickly see
00:22:50 if that really works so for dad one
00:22:52 final round of playing around let's get
00:22:54 the bookings event is not defined here
00:22:57 we already got an error yeah
00:23:01 in book event I use the event model to
00:23:04 find an event but I'm not importing it
00:23:07 so good thing we're testing here I need
00:23:10 the event model indeed so let's require
00:23:13 it in this file from the event file in
00:23:18 the models folder but we'll also have a
00:23:21 different problem which I just realized
00:23:23 in my merge J's file there I also of
00:23:28 course I used the event model and saans
00:23:31 I need to import this here too
00:23:33 so let's import event by requiring it
00:23:38 from the models folder and they are from
00:23:41 the event file and of course I don't
00:23:43 just work with the event model here I

00:23:45 also work with the user model so it
00:23:48 should import this as well so let's
00:23:50 import user by requiring that from
00:23:53 models user and one other thing I can do
00:23:57 that events function here I'm actually
00:24:00 only using it in the merge file I'm
00:24:02 using it for the user here there and
00:24:04 therefore we don't actually have to
00:24:07 export this we can comment this out
00:24:09 right now we're not needing this
00:24:10 anywhere else if we later needed in
00:24:12 another file we can of course re add
00:24:15 this and make sure we do export it but
00:24:17 now I only use events internally but now
00:24:20 with that let's run this again transform
00:24:23 event is not defined make sense of
00:24:28 course I am transforming some events
00:24:31 there to here so I should make sure I
00:24:33 have this import it there too and since
00:24:36 I have that in the events resolver file
00:24:38 I will actually grab that and add this
00:24:41 to my merge J's file as well let me
00:24:44 restructure this let's add transform
00:24:45 event in here now there I use that user
00:24:48 function so won't need to export this
00:24:51 anymore
00:24:51 and actually now we'll change the way
00:24:54 this rigs
00:24:55 in general I could have of course also
00:24:57 import that transform event from the
00:24:58 events file in the booking file but I
00:25:00 now want to centralize this so I'm not
00:25:02 exporting my helper functions I'll just
00:25:05 export transform event and also
00:25:08 transform booking let me grab that added
00:25:12 to merge add this here and now add
00:25:15 exports transform event will point at
00:25:19 the transform event constant which holds
00:25:22 that function and exports transform
00:25:25 booking will of course point at that
00:25:27 transform booking function here now I
00:25:30 have these merging functions in the
00:25:33 merge chess file there I use the user
00:25:35 single event and events indirectly a
00:25:40 function which I define in there and now
00:25:43 in events J's where I remove this I just
00:25:45 have to import this so we'll import
00:25:47 transform event here from merge don't
00:25:50 need date to string there anymore
00:25:52 because I'm now doing this in merge
00:25:53 therefore I needed here though so I
00:25:56 should import the h2 string by using
00:26:00 object D structuring I should import dad
00:26:04 from my top-level helpers folder and
00:26:08 there the date file so now I'm using day
00:26:10 to string in the merge chairs file
00:26:12 because here I now have my transform
00:26:15 functions where I am using that day to
00:26:16 string logic in events chess I now
00:26:19 import transform event from merge and in
00:26:22 booking jeaious
00:26:23 I now can get rid of date to string and
00:26:25 from merge I will import transform
00:26:28 booking and transfer me event because I
00:26:30 am using both in that file ok so that
00:26:33 was again a Robert big restructuring but
00:26:36 I think it makes more sense it this way
00:26:38 let's now run this again this now looks
00:26:42 better we got our bookings let's also
00:26:45 get our events here maybe the ID and
00:26:48 title and date and the creator there the
00:26:54 email and which other events this
00:26:56 creator created let's hit enter for this
00:27:00 quite complex query and no error this
00:27:03 looks good
00:27:04 so this now all seems to work and now
00:27:06 whilst this was a vid
00:27:08 full of restructuring only we have a
00:27:11 cleaner structure and we have a
00:27:13 structure which now makes it easier to
00:27:15 work with our code since we now have
00:27:17 nice chunks of code focused on certain
00:27:19 responsibilities instead of having this
00:27:21 one huge resolver file and therefore we
00:27:25 now get the structure with which I now
00:27:26 want to continue to add authentication
00:27:29 as a next step

You may also like