Coding

#23 Finish! | Build a Complete App with GraphQL, Node.js, MongoDB and React.js

  • 00:00:02 welcome back to this series this is the
  • 00:00:05 last part of this series it's time to
  • 00:00:07 finish it up and also fix a bug
  • 00:00:12 the bargain wanna fix is pretty hard to
  • 00:00:15 reproduce unfortunately I failed to
  • 00:00:17 reproduce it but we saw it in the last
  • 00:00:19 part of this series and the dead bark
  • 00:00:22 was related to the the bookings here and
  • 00:00:25 the events were retrieving for the
  • 00:00:26 bookings and that the events we
  • 00:00:28 retrieved here actually didn't match the
  • 00:00:30 events we booked now the problem stems
  • 00:00:33 here from this events function here in
  • 00:00:36 the merge JS file in here we're getting
  • 00:00:40 that array of IDs and we're then
  • 00:00:42 fetching these events in our database
  • 00:00:44 and we're returning the events mapped
  • 00:00:46 with current summer me event which takes
  • 00:00:48 care about merging that with our data
  • 00:00:51 but in the end we return our events here
  • 00:00:53 now the thing that can cause issues here
  • 00:00:57 is that MongoDB does not guarantee the
  • 00:01:01 order in which it returns the result
  • 00:01:03 unless you sort with the help of the
  • 00:01:07 sort method here the problem is that
  • 00:01:10 event loader or data loader which we use
  • 00:01:12 here in the end of course gives us that
  • 00:01:15 array of events and off of event IDs and
  • 00:01:19 therefore when we return our events the
  • 00:01:23 order has to match the order of IDs here
  • 00:01:25 because that is used by data loader to
  • 00:01:28 match the events we returned so we have
  • 00:01:31 to guarantee that we return the events
  • 00:01:33 here in the order of their IDs in that
  • 00:01:36 event IDs array we're getting as an
  • 00:01:37 input now achieving that is not that
  • 00:01:41 difficult we can use events here so this
  • 00:01:44 event is constant we can call sort on
  • 00:01:47 that which is a default JavaScript
  • 00:01:49 method and we can sort here by using
  • 00:01:52 that function which we have to pass as
  • 00:01:55 an argument where we get two elements in
  • 00:01:57 that events array which we have to
  • 00:01:59 compare and we have to return minus one
  • 00:02:01 and one here to define the order of
  • 00:02:04 elements and that's default sort
  • 00:02:05 JavaScript function nothing special here
  • 00:02:08 what I will return here is in the end
  • 00:02:11 just the difference between event IDs
  • 00:02:15 index off now I'm referring to that
  • 00:02:18 array of event IDs which I'm getting
  • 00:02:20 index of a and their underscore ID to
  • 00:02:24 string because a
  • 00:02:26 an event object has retrieved by
  • 00:02:28 Mongoose from MongoDB there we have that
  • 00:02:31 underscore ID property which is this
  • 00:02:33 object ID thing and with two string we
  • 00:02:36 get a string and now I'm searching for
  • 00:02:38 that ID in the event IDs array to find
  • 00:02:40 its position there with the help of
  • 00:02:41 index off and then I find out well what
  • 00:02:45 is the position let's say that is index
  • 00:02:47 1 and I deduct the position of B
  • 00:02:52 basically so in event IDs I then search
  • 00:02:54 within X of B dot underscore ID q string
  • 00:03:00 so sort execute this function here on
  • 00:03:03 every element in this events array and
  • 00:03:07 we then have to return minus 1 or 1 as I
  • 00:03:10 mentioned or basically a negative or a
  • 00:03:13 positive number which defines whether
  • 00:03:15 this element we're looking at goes in
  • 00:03:19 front of the other one so we're
  • 00:03:21 comparing these two pairs and that
  • 00:03:22 decides which element comes first and
  • 00:03:25 that is executed for all elements the
  • 00:03:27 events array and by looking for the IDS
  • 00:03:30 of both a and B in event IDs I find a
  • 00:03:32 position there and I find the order
  • 00:03:34 there and this is my way of ordering the
  • 00:03:36 events array based on the event IDs
  • 00:03:38 array this will then sort the events
  • 00:03:41 array and it will ensure that we
  • 00:03:43 actually do return our sorted events
  • 00:03:47 here sorted by ID which is not
  • 00:03:51 alphabetical but really sorted by ID as
  • 00:03:54 it's sorted in this event IDs array
  • 00:03:56 we're getting therefore we are returning
  • 00:03:58 elements in the order we're getting them
  • 00:04:01 here which helps event loader connect
  • 00:04:04 elements to showcase this let's add a
  • 00:04:07 console log here and let's output events
  • 00:04:09 and event IDs here and save that and I
  • 00:04:14 got two types of events here the niranda
  • 00:04:17 doric is not there but the aviary rents
  • 00:04:19 are there and now if I go to bookings I
  • 00:04:22 get an error let's have a look events
  • 00:04:26 IDs is not too fine yeah I clearly have
  • 00:04:29 a typo somewhere yeah that should not be
  • 00:04:32 events IDs but event IDs as its name
  • 00:04:35 here so let's now wait for this go to
  • 00:04:38 events and go back here you know
  • 00:04:39 our events and if we go back here's our
  • 00:04:41 console.log what we can see is we got
  • 00:04:44 this is the event IDs array and we see
  • 00:04:46 the ID with free at the end comes first
  • 00:04:50 here that is how event loader basically
  • 00:04:52 ordered that or it gave it to us and if
  • 00:04:55 we have a look at the retrieved I events
  • 00:04:56 here we also see it there this is the
  • 00:04:58 event with the ID with the free at the
  • 00:05:00 end and it comes first here as well and
  • 00:05:02 by this by using this logic we ensure
  • 00:05:05 that event loader
  • 00:05:06 can match our data correctly or that
  • 00:05:08 data loader that's the name of the
  • 00:05:10 package can match our events correctly
  • 00:05:12 and therefore this bug should be avoided
  • 00:05:15 now that is it with this application
  • 00:05:18 obviously you can always add more
  • 00:05:21 we could add persistent authentication
  • 00:05:23 so that we don't have to log in again
  • 00:05:26 whenever this page reloads we could
  • 00:05:27 store that token and local storage at an
  • 00:05:30 expiry time even at a refresh token and
  • 00:05:34 so much more you can work on user
  • 00:05:36 interface with data loader you could set
  • 00:05:39 up caching per request instead off the
  • 00:05:42 caching we currently have which is
  • 00:05:44 basically per server lifetime which is
  • 00:05:46 not necessarily optimal these are all
  • 00:05:49 things you can definitely do but this
  • 00:05:51 serious is already huge it's far bigger
  • 00:05:54 than I wanted it to be and it was a lot
  • 00:05:56 of fun creating it I hope you also got a
  • 00:05:59 lot out of it
  • 00:06:00 definitely share your feedback your
  • 00:06:02 ideas and maybe we'll do a part two
  • 00:06:05 maybe we'll add more to this in the
  • 00:06:07 future for now this is the current state
  • 00:06:10 of this series and I hope you learned a
  • 00:06:12 lot about graph QL how it works how you
  • 00:06:15 create a graph QL API how you define a
  • 00:06:18 schema there Howrah solvers work how I
  • 00:06:21 can optimize them with tools like data
  • 00:06:23 loader and why that might be required
  • 00:06:25 and you also learned a lot about react
  • 00:06:27 hopefully how we build a user interface
  • 00:06:29 which now finally at the end doesn't
  • 00:06:31 look that bad how we connect that to the
  • 00:06:34 graph to your API and how we did all
  • 00:06:37 that without the help of any third-party
  • 00:06:38 library now that's not a thing of course
  • 00:06:41 there is Apollo Apollo is a huge library
  • 00:06:44 that can help us with creating both a
  • 00:06:47 graph QL server so the backend as well
  • 00:06:49 as use it on the front-end for efficient
  • 00:06:53 tests and caching of API responses on
  • 00:06:56 the front end you can definitely do that
  • 00:06:58 too you can use that and you will
  • 00:07:00 probably use that in bigger applications
  • 00:07:02 but my goal with this series all the was
  • 00:07:05 to have a look behind the scenes and
  • 00:07:07 teach you everything from the ground up
  • 00:07:09 because what I personally found is that
  • 00:07:11 graph QL can be can look easy when you
  • 00:07:14 see the first time and then it quickly
  • 00:07:16 looks intimidating and I hope that this
  • 00:07:18 series kind of helps you understand
  • 00:07:20 what's happening behind the scenes so
  • 00:07:22 that now you can of course all the use
  • 00:07:24 tools like Apollo ends on that abstract
  • 00:07:27 some complexity away but you know what's
  • 00:07:29 going on behind the scenes so enough of
  • 00:07:32 the talking please share your feedback
  • 00:07:34 share your thoughts your future wishes
  • 00:07:36 will certainly do project serious again
  • 00:07:39 may be building up on this one or may be
  • 00:07:41 building a new one
  • 00:07:42 maybe then using more advanced tools
  • 00:07:44 Apollo and so on we'll see I hope you
  • 00:07:47 liked it and I hope I see you back in
  • 00:07:49 our videos bye