1 00:00:01,250 --> 00:00:05,750 Now that our query service is all put together we're going to need to make some changes to the react 2 00:00:05,750 --> 00:00:09,540 application make sure that it reaches out to the query service to get the data that it needs. 3 00:00:09,930 --> 00:00:16,130 So right now a react application makes get requests to our post service and get requests to our common 4 00:00:16,130 --> 00:00:20,680 service directly whenever it needs to show posts or whenever it needs to show comments. 5 00:00:20,700 --> 00:00:22,250 So that's not what we want anymore. 6 00:00:22,250 --> 00:00:28,190 Rather than making a request to posts or comments we want the react application to make one single request 7 00:00:28,550 --> 00:00:33,500 over to query service where it's going to get all the information it needs to show everything about 8 00:00:33,500 --> 00:00:34,160 our application. 9 00:00:34,160 --> 00:00:41,710 All the posts and all the associated comments as a quick reminder very service runs on part 4000 too. 10 00:00:41,740 --> 00:00:46,220 So we want to make sure that we go round and update our request to go to port four thousand two and 11 00:00:46,220 --> 00:00:48,920 make a GET request to slash post. 12 00:00:48,950 --> 00:00:53,690 The other thing I want to mention very quickly is that we're right now we're just talking about reading 13 00:00:53,780 --> 00:00:59,410 data we're just talking about getting a list opposed to the show to the user the post service and comment 14 00:00:59,410 --> 00:01:05,590 service are still 100 percent in charge of actually creating comments and creating posts. 15 00:01:05,650 --> 00:01:10,750 So if the exact application needs to create a post or create a comment it will still reach out to these 16 00:01:10,750 --> 00:01:12,460 services directly. 17 00:01:12,460 --> 00:01:17,060 All we're talking about right now is getting information to show to the user okay. 18 00:01:17,100 --> 00:01:18,860 So let's open up our ReACT application. 19 00:01:18,890 --> 00:01:25,490 We're gonna make sure that we only make that one request directly to the query service so back inside 20 00:01:25,490 --> 00:01:30,100 my editor I'll find the client directory I'll then find our. 21 00:01:30,510 --> 00:01:33,970 And then finally post list inside a post list. 22 00:01:33,970 --> 00:01:38,800 This is where we are making a request to get a big list of all of our posts from the post service right 23 00:01:38,800 --> 00:01:39,780 now. 24 00:01:39,850 --> 00:01:41,080 That's not what we want anymore. 25 00:01:41,080 --> 00:01:48,650 We instead want to make a request to local host four thousand two and then still slash post again 4000 26 00:01:48,650 --> 00:01:55,100 to is where our query service is running let's then do a quick console log of resident data just so 27 00:01:55,100 --> 00:01:59,270 we can inspect the information that comes back and just make sure that we've got everything we expect 28 00:02:01,270 --> 00:02:06,130 I'm going to say this file go back to where my browser and check out check out the react application 29 00:02:07,470 --> 00:02:13,050 you'll notice that my app is automatically refreshed inside my console I'll see that console log so 30 00:02:13,100 --> 00:02:18,640 this is the big list of posts and embedded comments we got back from the query service. 31 00:02:18,730 --> 00:02:25,030 That's the idea of a post inside is the actual idea The Post along with the title The Post entity array 32 00:02:25,030 --> 00:02:30,800 of associated comments so it looks like it's working correctly right now we have are getting all the 33 00:02:30,800 --> 00:02:37,050 data that we expect it looks like the application itself is still working as well but if you take a 34 00:02:37,050 --> 00:02:41,430 look at the network request blog you'll notice that the react app is still trying to make that request 35 00:02:41,430 --> 00:02:42,470 to the comments and. 36 00:02:42,870 --> 00:02:48,610 It's not actually using the list of comments that is embedded inside of your automatically so we still 37 00:02:48,610 --> 00:02:53,790 have a quick change or two to make back inside my editor I'm going to remove the console log that we 38 00:02:53,780 --> 00:03:01,560 just added I'll then go down to rendered posts remember rendered post is where we iterated over the 39 00:03:01,560 --> 00:03:07,970 list of posts so we got back inside that response and we built up a separate card out of each one we 40 00:03:07,970 --> 00:03:14,950 then eventually redid an instance of the comment list component when we create a comment list we passed 41 00:03:14,950 --> 00:03:19,690 down just the idea the poster we're currently looking at and then it was up to comment list to make 42 00:03:19,720 --> 00:03:26,500 a follow up request and get all the comments associated with that post I.D. That is no longer necessary 43 00:03:26,890 --> 00:03:33,090 we now have all the comments that we need directly inside of this post that we are iterating over to 44 00:03:33,190 --> 00:03:37,870 rather than passing down d post idea to comment list we'll just pass down the list of comments directly 45 00:03:39,100 --> 00:03:48,250 it's all delete that post I did thing and replace it with comment or see me comments is post that comments. 46 00:03:48,550 --> 00:03:50,020 We've already got the list of comments. 47 00:03:50,020 --> 00:03:54,190 We'll just pass them down directly and then leave it up to comment list to iterate over that list and 48 00:03:54,190 --> 00:03:55,390 render them out. 49 00:03:56,530 --> 00:03:58,170 I'll save this. 50 00:03:58,260 --> 00:04:04,480 I'm going to go over to my comment less component now years comment list and then remember comment list 51 00:04:04,510 --> 00:04:07,030 is currently making requests to get all that data. 52 00:04:07,030 --> 00:04:11,060 We're all that list comments no longer necessary at all. 53 00:04:11,230 --> 00:04:20,810 So we can delete that states or you state called We can delete batch data and we can delete yousee fact 54 00:04:24,510 --> 00:04:28,460 all clean up the import statements at the top so we no longer need access. 55 00:04:28,470 --> 00:04:31,110 We no longer need using state or use effect 56 00:04:34,220 --> 00:04:37,600 and then in our props list right here we we're no longer receiving post I.D.. 57 00:04:37,610 --> 00:04:43,210 Instead we just received the list of comments it turns out that all the other codes we have inside of 58 00:04:43,210 --> 00:04:44,860 here is going to work just fine. 59 00:04:44,980 --> 00:04:51,040 So we take the comments we receive as a prop we're gonna map them we generate an ally for each one and 60 00:04:51,040 --> 00:04:58,360 then render those allies inside of a well let's go ahead and save this put back where the browser and 61 00:04:58,360 --> 00:04:59,610 see how we're doing. 62 00:04:59,950 --> 00:05:04,600 So I can now refresh the page you'll notice I still see my post right here at the Associated comment 63 00:05:05,590 --> 00:05:11,310 but I only had to make that one single request over to the query service we can still continue to try 64 00:05:11,310 --> 00:05:17,680 to make new posts and comments and whatnot so I'll put in a third post refresh the page and I'll put 65 00:05:17,680 --> 00:05:25,390 in a third comment and submit that and refresh and there we go. 66 00:05:25,390 --> 00:05:30,780 We've got our second post second comment and third post with third comment well I'd say if this worked 67 00:05:30,780 --> 00:05:36,050 out pretty well we have now introduced a brand new service into our application. 68 00:05:36,050 --> 00:05:44,250 It is consuming events from these other services and it's using those events to populate some internal 69 00:05:44,250 --> 00:05:45,670 store of data. 70 00:05:45,670 --> 00:05:50,280 And we did all this to make sure that we can minimize the number of requests are required but more importantly 71 00:05:50,340 --> 00:05:55,500 this really is a demonstration of how you can do some cross service communication. 72 00:05:55,500 --> 00:05:57,680 There's something really interesting about this approach. 73 00:05:57,680 --> 00:06:02,550 Remember I laid out a couple of big benefits to this approach a while ago back in this diagram back 74 00:06:02,550 --> 00:06:08,340 over here I said Hey our career service is not going to have any dependencies like direct dependencies 75 00:06:08,370 --> 00:06:09,570 on other services. 76 00:06:09,750 --> 00:06:10,770 So why is that good. 77 00:06:10,770 --> 00:06:12,190 Well watch this. 78 00:06:12,330 --> 00:06:17,600 If we go back over to our terminal we can now kill a 100 percent. 79 00:06:17,650 --> 00:06:23,260 The comment service that's the comment service and we can destroy the post service as well so we can 80 00:06:23,260 --> 00:06:27,210 pretend that those two services just crashed for who knows what reason. 81 00:06:27,250 --> 00:06:30,900 But you know what our query service is still running just fine. 82 00:06:31,120 --> 00:06:36,210 So we can still serve up data to users of our application without any issue whatsoever. 83 00:06:36,210 --> 00:06:37,370 But I can refresh this. 84 00:06:37,390 --> 00:06:43,090 I still see my data up here if I try to create new posts I will of course get an error because that 85 00:06:43,100 --> 00:06:48,430 post service which is in charge of creating posts is not running but I still have a major portion of 86 00:06:48,430 --> 00:06:54,010 my application running successfully and that's all what this independent idea of independent services 87 00:06:54,070 --> 00:06:54,820 is about. 88 00:06:54,820 --> 00:06:56,380 We can have some services crash. 89 00:06:56,410 --> 00:07:02,690 Others are still working and in general maybe our application will still be in a very usable state all 90 00:07:02,690 --> 00:07:02,930 right. 91 00:07:02,960 --> 00:07:03,880 So this looks good. 92 00:07:03,990 --> 00:07:08,690 But I do want to add in one last feature to this application we'll take a quick pause right here and 93 00:07:08,690 --> 00:07:09,560 I'll see you in just a minute.