1 00:00:01,410 --> 00:00:03,920 Our query service has a little bit scaffolding put together. 2 00:00:03,930 --> 00:00:08,420 So now we need to make sure that it can receive events of type post created income and created. 3 00:00:08,470 --> 00:00:12,070 Whenever we get post created we're gonna save the post whenever we get common created. 4 00:00:12,070 --> 00:00:15,020 We're gonna save the comment with the associated post. 5 00:00:15,070 --> 00:00:19,690 The first thing you do back over here is decide on a data structure to use to save all these posts and 6 00:00:19,690 --> 00:00:20,730 comments. 7 00:00:20,740 --> 00:00:27,120 We're going to once again use a simple object to store all the posts and comments. 8 00:00:27,210 --> 00:00:31,530 Let me very quickly give you an example of what this object is going to look like eventually so you 9 00:00:31,530 --> 00:00:32,520 don't have to write this code out. 10 00:00:32,520 --> 00:00:36,890 This is a quick example of what post is going to look like. 11 00:00:36,950 --> 00:00:44,590 The Post will be equal eventually to having an object full of some keys and for every one of these keys 12 00:00:45,060 --> 00:00:50,360 we're gonna have the idea of the post that would be identical to the idea right there. 13 00:00:50,440 --> 00:00:56,890 It will have the title The Post and it will have an array of comments associated with this. 14 00:00:56,920 --> 00:01:06,830 And of course every comment will have its own ideas and some content like so to over time as users add 15 00:01:06,830 --> 00:01:08,720 in more post to our application. 16 00:01:08,810 --> 00:01:12,930 We would have say a second post and then a third post and so on. 17 00:01:13,070 --> 00:01:15,430 Again that's what this post object is going to look like. 18 00:01:15,500 --> 00:01:19,940 We just need to make sure that as we receive all these different events we insert data into this post 19 00:01:19,970 --> 00:01:23,100 object with the appropriate structure. 20 00:01:23,210 --> 00:01:28,920 So inside of our post to events right here we're gonna take a look at that req objects. 21 00:01:29,060 --> 00:01:33,720 Remember the wrecked body property is going to be the event itself that we actually care about. 22 00:01:33,800 --> 00:01:36,080 So let's take a look at that event. 23 00:01:36,140 --> 00:01:42,740 Remember that every event that we create as a type and a data property will pull that out of record 24 00:01:42,740 --> 00:01:44,200 body. 25 00:01:44,260 --> 00:01:49,280 We will then set up a very simple series of if statements to take a look at that type. 26 00:01:49,350 --> 00:01:59,920 So let's say if Type is equal to post created then let's go ahead and run some code or if type is equal 27 00:01:59,920 --> 00:02:09,910 to comment created we'll do something entirely different so let's handle post created first if it's 28 00:02:09,910 --> 00:02:11,890 equal the post created that we want to take. 29 00:02:11,890 --> 00:02:12,700 The I.D. 30 00:02:16,120 --> 00:02:22,120 and the title out of data because remember with post created that event is always going to have an I.D. 31 00:02:22,150 --> 00:02:30,100 and a title and we're going to insert that information into our post object we'll say post at I.D. is 32 00:02:30,100 --> 00:02:39,270 going to be equal to an object of IP and title and that should be it will probably also want to default 33 00:02:39,270 --> 00:02:44,400 the value of comments to be an empty array is as well so that later on whenever someone you mentioned 34 00:02:44,400 --> 00:02:48,270 event of common created and we receive that we don't have to worry about creating that array or anything 35 00:02:48,270 --> 00:02:56,850 like that Dallas handle a event of type common created remember an event of type common created is going 36 00:02:56,850 --> 00:03:04,810 to have slightly different structure to it that's going to have an I.D. content and a post I.D. So let's 37 00:03:04,810 --> 00:03:09,850 pull that information out say I.D. content and post I.D. 38 00:03:13,920 --> 00:03:21,780 then we will find the appropriate posts inside of our post object Z a post is posted at post i.e. 39 00:03:25,270 --> 00:03:32,790 well then take a look at post dot comments and we'll push in this new comment so our new comment is 40 00:03:32,790 --> 00:03:40,590 going to have a given I.D. and some content and that's to be it. 41 00:03:40,650 --> 00:03:45,060 Now of course at the very bottom here after we have processed the events this still is a root handler. 42 00:03:45,070 --> 00:03:47,650 So we need to make sure that we send back some kind of response. 43 00:03:47,720 --> 00:03:55,190 We'll do a resort sense of just an empty object to say hey we received the event and processed it then 44 00:03:55,190 --> 00:03:58,360 finally let's go back up to our slash post and point 45 00:04:01,700 --> 00:04:06,620 and anytime someone tries to get the collection of all the posts we have we'll just send back the entire 46 00:04:06,620 --> 00:04:08,040 post object. 47 00:04:08,070 --> 00:04:17,240 They'll do a red dot sent of posts and that should be at let's say this. 48 00:04:17,350 --> 00:04:22,130 I'm going to go back over to my terminal you'll notice I've changed the layout here just make sure everything 49 00:04:22,130 --> 00:04:23,420 is all a bit more legible. 50 00:04:23,510 --> 00:04:30,750 So the order now is the react app those comments very empty. 51 00:04:30,980 --> 00:04:35,400 And the event boss right here so we're going to try to create a new post and a comment. 52 00:04:35,400 --> 00:04:39,410 And we're right now just going to make sure that we don't see any errors coming out of this window right 53 00:04:39,410 --> 00:04:42,010 here because that's where our query service is running. 54 00:04:42,110 --> 00:04:45,830 We're not actually using the query service inside the reactor application just yet again. 55 00:04:45,860 --> 00:04:49,030 I just want to make sure we don't have any errors. 56 00:04:49,180 --> 00:04:57,550 So going to flip back over to the react application going to enter in a title your post I'll refresh 57 00:04:57,910 --> 00:05:03,710 and I'll add in some comment to that post and refresh everything over here still works. 58 00:05:03,840 --> 00:05:09,420 So we expected because we haven't made any change to really any existing code just yet and if I go back 59 00:05:09,470 --> 00:05:14,590 to my terminal window it looks like the query service is running successfully as well cause we can't 60 00:05:14,590 --> 00:05:20,300 really see any data we can't really verify that it's receiving these events or processing them correctly. 61 00:05:20,320 --> 00:05:28,020 We'll tell you what about after we process an event inside of our query service that we run these two 62 00:05:28,020 --> 00:05:33,020 if statements let's just print out the current data structure or the current post collection. 63 00:05:33,010 --> 00:05:47,510 We have it's all save this I'm going to go back over again I'll enter in a second post and refresh and 64 00:05:47,510 --> 00:05:55,070 then a second comment and submit and now if I go back over my terminal I should see the appropriate 65 00:05:55,070 --> 00:05:58,790 data being reflected inside of my query service. 66 00:05:58,790 --> 00:06:03,770 Take a look at that we've got two separate console logs the first one was from receiving the event of 67 00:06:03,780 --> 00:06:09,160 post created and it looks like we received that post and add it to our post collection. 68 00:06:09,410 --> 00:06:12,380 And the second console log right here is from creating the comment. 69 00:06:12,500 --> 00:06:17,630 So there's the exact same post there is our list of comments and you can see that there is a object 70 00:06:17,660 --> 00:06:22,490 inside that array is being abbreviated right now just because node when it prints out a nested data 71 00:06:22,490 --> 00:06:27,680 structure or nested object doesn't want to recursively print out everything inside there at a and same 72 00:06:27,680 --> 00:06:28,280 depth. 73 00:06:28,340 --> 00:06:30,670 So chances are the correct comment is inside there. 74 00:06:30,830 --> 00:06:33,830 We just can't really see it effectively using this tool just yet. 75 00:06:34,610 --> 00:06:34,920 All right. 76 00:06:34,950 --> 00:06:36,640 Once this looks pretty good. 77 00:06:36,740 --> 00:06:43,250 So in theory our query service now has all the data that is required to get the entire list of posts 78 00:06:43,370 --> 00:06:45,260 and all the associated comments. 79 00:06:45,330 --> 00:06:49,790 Now the last thing to do is update our ReACT application and make sure that the react application will 80 00:06:49,790 --> 00:06:55,190 make a request to this end point to get this data structure right here are set and then use that structure 81 00:06:55,370 --> 00:07:00,850 to list out all the posts and comments let's take a quick pause right here and start to work on the 82 00:07:00,850 --> 00:07:02,290 react app in just a moment.