In the last video we saw that defining a get initial props function on the app component.
Somehow disabled the one we had put together inside of our landing page.
So in this video we're gonna figure out how to solve this so quick diagram.
So this is what is going on behind the scenes.
We've got our app component it is trying to fetch some data and get that as props down into the app.
We've also got the landing page rather than calling indexed objects.
I'll call it landing page right here and that it's got has its own get initial props function and right
now the thing is not being invoked.
But here's how we're gonna fix this.
We are going to get that components get initial prompts function and we are going to manually invoke
it inside of the custom app components get initial props.
So we're going to be fetching two sets of data one set of data for the app component and one set of
data for the landing page.
So we'll take all that information and pass it down into the app component as props and we're going
to somehow chop up that information and make sure some of it goes down eventually into the landing page
as well.
Let me show you how we're going to do this.
Back inside my editor I'll find the app components get initial props.
Remember that app context argument right there.
Let's do a full console log of it.
Previously we had just done a console log of the keys this time around.
Let's do a console log of the entire thing.
I can save that and then going to go and refresh my application just to execute that stuff well then
go back over to my terminal and I'll see a big console log right here.
So this big console log is that app context I'm going to scroll up a little bit maybe a lot.
I suppose and then up here is the top of that console log.
You'll notice that it has a property on it of capital C component so that component property right there
is a reference to the component or the page that we are currently trying to render since we have a reference
to the component we can access that components or that pages get initial prompts function directly.
So we are going to get the component dot get initial props and we will just invoke it on our own when
we invoke it.
We'll make sure that we pass down some arguments related to say context so that that thing can work
correctly.
We will let it fetch some data and we're gonna take the data that comes back and we will return it manually
from get initial props.
So let's take a look at how we're going to do this going to delete that console log then right after
we make our own call to print user right here I'm going to say component props or how about page props
little bit easier to pass or understand and then for that we're gonna do in a wait app context dot component
with a capital C dot get initial props and again whenever we call get initial prop something is going
to expect some arguments for us in particular we expected to receive that context argument so we can
take a look at the context off of the app context remember two kinds of different context here the city
X property is intended to go into a individual page the app component context is intended to go into
the app component that we will call give initial props with app context not city X
then we're eventually going to get back to a set of page prompts that's gonna be the set of data that
we had tried to fetch or are trying to fetch from the components or the individual pages get initial
props.
Right now let's just do a console log of that we can do a console log of page props like so at present
the data we're trying to fetch out of that thing is the same information we're trying to fetch.
A moment ago the current user so if everything worked I should get a console log once again of the current
user.
OK let's try this out.
I'm going to go and refresh the page again.
I'll then go back or my journal.
I'm going to scroll down to the bottom and I'll see onto log of current user right there.
Perfect.
So that means we are now executing to get initial prompts functions for both the app component and for
the individual page as well.
Now there is something that we need to be aware of right now we have a get initial prompts defined for
our landing page.
So that's inside of our index not just file but we also have pages such as the sign in and the sign
up that do not have a get initial prompts function.
So we need to make sure that we handle the case where back inside of our app this get initial props
is undefined.
So if nothing is undefined we don't want to try and patch any data to handle this.
We could just do a quick little check I'm gonna say let page props out here.
Well then say if app context dot component dot get initial props.
So if that is defined let's go ahead and try to fetch some data and assign it to this page perhaps variable
so cut that cost space drops or pasted in there.
And now I do not want to redefine page drops.
Instead I'm going to assign to the one we had defined right above.
I'm also going to default the thing to be an empty object so that if we fail this if statement I will
still have some kind of empty object to share around.
So let's save this now.
Now we should be able to visit say the sign up page without having anything crash or anything like that
so if I go back over time my browser I should be able to go to off sign up which does not have a get
initial prompts function but it looks like everything still works.
Same thing for sign in as well.
Let's pull it back over.
So now we are getting some information that is common for every page inside of APP get initial props.
And we've also have some logic inside of here to get some information for a very particular page.
It's not the last thing we have to do is make sure that we take the page props.
We take any data that we're fetching for the app component we need to return all this stuff and then
make sure that it somehow gets divvied up between the header Andy component or the page that we're actually
trying to show.
Two quick possible picks finish this up in just a moment.