The last thing we have to do to try out this get blog post function is call it from one of our different
screens.
It's gonna open up my index screen not J.S. file.
So inside of here we can now D structure off of used context the get blog post function that we just
added in and remember anytime that we have a function like this one right here that modifies our state
like any state inside of application at all.
We're never going to call that function from directly inside of our body.
So I'm never going to write out get blog posts right there like so.
The reason is as soon as we start to render our index screen component we're going to call get blog
posts that's going to initiate our API requests.
The API request will eventually be resolved.
Update our state and cause our component to be re rendered when our component gets re rendered.
Get blog posts we'll be called automatically a second time so we'll then kick off another API request.
We'll eventually get some response.
Update our State Index screen gets rendered a third time and well lo and behold get blog posts is called
again and we end up in an infinite loop.
So remember to solve that we instead use that hook from react the one called use effect.
So gonna import that right now.
Remember the U.S. fact took is used to make sure that we only run some bit of code.
One time when a component is first rendered so inside of index screen a call use effect.
I'll put in an arrow function and then ace argument or me a empty array as the second argument.
Remember that empty array right there means that we only want to run that error function exactly one
time when our component first shows up on the screen.
So now inside of this arrow function it is safe to call get blog posts because it's only going to be
invoked exactly one time so inside of your all call get blog posts.
That should really be it.
So now save this.
And if I open up my application I see nothing at all which is actually to be expected.
Remember right now we don't actually have any blog buzz whatsoever on our API.
Now we can change that up or fix that up very easily.
Hopefully you still have your code Ed open from when we were customizing our Jason server.
It looks like I closed mine so I got really quickly change back over to that directory that's running
our Jason server.
And start my code editor inside there again.
Here it is right here.
Remember we created that DB Jason File this DVD Jason File is going to eventually contain all the different
blog posts that we've created on our API.
If we want to we can manually change this file and that will essentially inject some information into
our server so we can manually add in a blog post right now.
Just adding in an object inside of that empty array.
So let's try doing that.
I'm gonna put a new object inside of here I'm gonna give it an I.D. of 1 a title of API post and some
content of content for my post.
Remember we are currently inside of a Jason file so you have to add in these double quotes everywhere.
Single quotes will not work so once I've got that all inside of here I'll save the file and that should
automatically reload my Jason server.
I can confirm that if I just flip over to my terminal and find the window that's running my Jason server.
So here's that window that's running Jason server you'll see that it says DB Jason has changed reloading.
If you don't see that message you can stop your server with control C and then start it back up with
NPM run DV OK.
So now that our Jason server is running and we've got at least one blog post inside there we can now
flip back over to our application and do a manual refresh.
Remember you can manually refresh your app on a physical device by shaking your phone really quickly
and then tapping on refresh on the IOW simulator you can hit commander and on Android you can hit R
twice in a row.
Alternatively you can just make a little change to your code and save it.
And that should automatically refresh.
OK.
So right away I'll see that I've got my blog post that I just created appearing on the screen.
Awesome.
Now at this point if you do not see a blog post appearing it is incredibly likely and very possible
that something is not quite going correctly with and grog.
So the first thing that first little bit of troubleshooting to do if you do not see a blog post appear
right here is to try to access that blog post manually.
Let me show you how to do that the to access that blog post manually and see what information are Jason
server has.
I'm going to go back over my terminal going to find a window that's running and grok I'm going to make
sure that I still have an okay session status as long as I do I'll then open up that you URL right there
or at least right now I'm just gonna copy it.
I'll then go over to my browser paste that you URL and then go to slash blog posts so you can see right
here.
I'm definitely seeing one blog post available.
If you cannot see any blog posts or if you get a message like connection not found or a forum for anything
like that that means that something is not quite correctly set up within grok.
But if you do see this blog post it means that something must be wrong with your react native application
instead.
So you can really use the existence of this you are all right here.
Remember you're gonna have a slightly different identifier than I if this page works.
Well that means something must be wrong with React Native IF IT DOESN'T WORK SOMETHING IS WRONG WITH
AND grok now obviously hopefully at this point everything works out just fine.
But I just want to mention this in case it's not quite working.
All right.
So now that we've got our list of information right here appearing let's take another quick pause and
then come back the next video we're gonna start to focus on how we can make sure that we create blog
posts on our API as well so quick pause we'll take care of that in the next video.