Original subtitles

Now that our query service is all put together we're going to need to make some changes to the react

application make sure that it reaches out to the query service to get the data that it needs.

So right now a react application makes get requests to our post service and get requests to our common

service directly whenever it needs to show posts or whenever it needs to show comments.

So that's not what we want anymore.

Rather than making a request to posts or comments we want the react application to make one single request

over to query service where it's going to get all the information it needs to show everything about

our application.

All the posts and all the associated comments as a quick reminder very service runs on part 4000 too.

So we want to make sure that we go round and update our request to go to port four thousand two and

make a GET request to slash post.

The other thing I want to mention very quickly is that we're right now we're just talking about reading

data we're just talking about getting a list opposed to the show to the user the post service and comment

service are still 100 percent in charge of actually creating comments and creating posts.

So if the exact application needs to create a post or create a comment it will still reach out to these

services directly.

All we're talking about right now is getting information to show to the user okay.

So let's open up our ReACT application.

We're gonna make sure that we only make that one request directly to the query service so back inside

my editor I'll find the client directory I'll then find our.

And then finally post list inside a post list.

This is where we are making a request to get a big list of all of our posts from the post service right

now.

That's not what we want anymore.

We instead want to make a request to local host four thousand two and then still slash post again 4000

to is where our query service is running let's then do a quick console log of resident data just so

we can inspect the information that comes back and just make sure that we've got everything we expect

I'm going to say this file go back to where my browser and check out check out the react application

you'll notice that my app is automatically refreshed inside my console I'll see that console log so

this is the big list of posts and embedded comments we got back from the query service.

That's the idea of a post inside is the actual idea The Post along with the title The Post entity array

of associated comments so it looks like it's working correctly right now we have are getting all the

data that we expect it looks like the application itself is still working as well but if you take a

look at the network request blog you'll notice that the react app is still trying to make that request

to the comments and.

It's not actually using the list of comments that is embedded inside of your automatically so we still

have a quick change or two to make back inside my editor I'm going to remove the console log that we

just added I'll then go down to rendered posts remember rendered post is where we iterated over the

list of posts so we got back inside that response and we built up a separate card out of each one we

then eventually redid an instance of the comment list component when we create a comment list we passed

down just the idea the poster we're currently looking at and then it was up to comment list to make

a follow up request and get all the comments associated with that post I.D. That is no longer necessary

we now have all the comments that we need directly inside of this post that we are iterating over to

rather than passing down d post idea to comment list we'll just pass down the list of comments directly

it's all delete that post I did thing and replace it with comment or see me comments is post that comments.

We've already got the list of comments.

We'll just pass them down directly and then leave it up to comment list to iterate over that list and

render them out.

I'll save this.

I'm going to go over to my comment less component now years comment list and then remember comment list

is currently making requests to get all that data.

We're all that list comments no longer necessary at all.

So we can delete that states or you state called We can delete batch data and we can delete yousee fact

all clean up the import statements at the top so we no longer need access.

We no longer need using state or use effect

and then in our props list right here we we're no longer receiving post I.D..

Instead we just received the list of comments it turns out that all the other codes we have inside of

here is going to work just fine.

So we take the comments we receive as a prop we're gonna map them we generate an ally for each one and

then render those allies inside of a well let's go ahead and save this put back where the browser and

see how we're doing.

So I can now refresh the page you'll notice I still see my post right here at the Associated comment

but I only had to make that one single request over to the query service we can still continue to try

to make new posts and comments and whatnot so I'll put in a third post refresh the page and I'll put

in a third comment and submit that and refresh and there we go.

We've got our second post second comment and third post with third comment well I'd say if this worked

out pretty well we have now introduced a brand new service into our application.

It is consuming events from these other services and it's using those events to populate some internal

store of data.

And we did all this to make sure that we can minimize the number of requests are required but more importantly

this really is a demonstration of how you can do some cross service communication.

There's something really interesting about this approach.

Remember I laid out a couple of big benefits to this approach a while ago back in this diagram back

over here I said Hey our career service is not going to have any dependencies like direct dependencies

on other services.

So why is that good.

Well watch this.

If we go back over to our terminal we can now kill a 100 percent.

The comment service that's the comment service and we can destroy the post service as well so we can

pretend that those two services just crashed for who knows what reason.

But you know what our query service is still running just fine.

So we can still serve up data to users of our application without any issue whatsoever.

But I can refresh this.

I still see my data up here if I try to create new posts I will of course get an error because that

post service which is in charge of creating posts is not running but I still have a major portion of

my application running successfully and that's all what this independent idea of independent services

is about.

We can have some services crash.

Others are still working and in general maybe our application will still be in a very usable state all

right.

So this looks good.

But I do want to add in one last feature to this application we'll take a quick pause right here and

I'll see you in just a minute.