- 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
