Our coat definitely works right now but it's really messy at present.
Anytime we want to make a request inside of it get initial props function.
We would have to set up this if statement.
We would have to write out this really long year L and so on.
So I think that would be worth our time to try to extract a lot of this logic into a separate helper
file that we can more easily use any time we need to make a request from a get initial props function.
So here's my idea I think that we should build a separate file and inside there we're going to write
out a helper function called build client this build client function is going to take some incoming
request that has those headers on it that we really care about then inside that function we're going
to have some logic to try to build a pre configured version of axioms that's going to be pre configured
to work regardless of what environment we are on.
So the logic inside there is going to take a look at that incoming request it's going to take a look
at whether it is in the browser or the server environment and then it will eventually return a version
of axioms that has already been configured to work in either the browser or the server for us.
So that's the idea so let's create a new file that's going to house this build client function back
inside my editor I'm gonna find the client directory I'll create a new folder inside there are called
API and then inside of that I'm going to make a new file called build client dot J.S. inside of here
at the very top I'm going to import axioms from axioms I'll then do an export default
and I'm going to assume that the argument to this is going to be an object that's going to contain the
request that we care about by going to attempt to D structure off the wreck property from this incoming
argument then inside of here we need to essentially do very similar to what we just did back inside
of get initial prompts we need to first decide what environment we are in so we'll once again do a type
of check on window I'll say if type of window is equal to the string undefined then that must mean we
are on the server otherwise we must be on the browser now in each of these cases we're going to create
an instance of axioms that is pre configured to work in either the server or the browser to do so I'm
going to write out return axles dot create that's how we create a pre configured version of axioms once
we return the thing it will be like a normal axis client but we'll have some base your l or domain wired
up to it and we'll also have some headers wired up to it as well so if we are on the server then we
want to set a base you are L for this axis instance to use notes that you are all right here has capital
you are L then inside there will specify that really long domain that we saw just a moment ago.
So in total it will be h t DP colon slash slash ingress engine Gen-X ingress engine X SBC luster local
now please do double check your you are all obviously a very easy to make a typo in their will also
set up some headers for this thing to use as well so we want to use these same headers that are inside
of the incoming requests that we'll put in req dot headers
now if we are on the browser well let's create a separate instance of axles for that door I'm going
to do return axial stock create and in this case we really don't need to set any particular base your
l We will set it to base your l I've just forward slash like so and we do not need to include any headers
because the browser is going to take care of all that stuff for us to be honest with you we barely even
needs but the base url inside of here we probably could just leave it off entirely ok so that should
be it.
So now any time that we want to get a copy of access to use we will import build client we'll run this
function and pass in some object that has the request on it.
So let's go back over to our landing page and try making use of this back inside of index J S right
here I'll go to the very top I should not need the axles in for anymore.
Instead I'm going to import build client from up one directory API build client
then down inside of get initial props I should be able to delete everything inside there
and I will replace it with data is build client I'm going to pass in an object that has the wreck property
on it and you'll notice that I am now essentially duplicating this thing I'm pulling just the wrecked
property off and I'm passing in a wreck as an object so rather than trying to pull anything off here
we're going to receive this entire first argument the first argument is function we usually refer to
as context so we can now just take that entire context thing and pass it directly through to build a
client.
Now when we call build a client right here remember that's just gonna give us our Acciona instance we
still have to actually make a request using it.
So I'm going to chain on a dot get and we'll make our actual request.
So I'm going to make my request to API users current user and because that is an async function.
I'll make sure that I mark this entire thing as a wait
and then finally we'll return data at the very bottom okay.
So that should be it really quick.
I want to flip back over make sure you're ok everything looks good so I to say this in a flip back over
the browser and do a quick test or refresh.
OK.
Looks like in the browser it work correctly it looks like on the server it work correctly as well.
Well I'd say this is working out pretty well.
I would like to test one last thing I want to test where we do a soft transition the page so I can navigate
over to sign up I'll put in a fake email a fake password sign up.
Yep that looks good as well.
Well something else is pretty good.
Now one thing we might do it's a little bit challenging to really understand what the awake you were
does when we have some chain method calls like this.
So one thing you might do just to make this a little bit more legible we might decide to define the
client ahead of time using build client and then do a client dot get that word very easily improve the
readability of this and just make it a little bit more obvious what was going on so I'll save that as
well and everything should still work as expected.
OK.
So that's pretty much it.
So now moving forward any time you need to make a request from a get initial prompts function we're
going to first build OK our client and then use that to make our actual request Well let's take a pause
right here.
Now that we've got this all working and we'll continue in just a moment.