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.