Coding

#13 Hitting the API | Build a Complete App with GraphQL, Node.js, MongoDB and React.js

  • 00:00:01 hi and welcome back to this series now
  • 00:00:05 in the last parts of this series we
  • 00:00:07 started working on our react.js
  • 00:00:09 front-end for our graph QL back-end and
  • 00:00:13 this is taking shape but thus far we
  • 00:00:16 haven't added any code that would
  • 00:00:18 actually interact with our graph QL API
  • 00:00:20 and that is exactly what we'll do in
  • 00:00:22 this video here because now we will
  • 00:00:25 finally start to add some authentication
  • 00:00:27 logic so that we can use our graph QL
  • 00:00:30 endpoints for creating users and for
  • 00:00:33 logging users in
  • 00:00:38 so let's go to our off page in our react
  • 00:00:43 app here and let's build a sign up and
  • 00:00:46 login form because that sounds like a
  • 00:00:47 good start if we wanna well send G
  • 00:00:50 respective requests to the backend so
  • 00:00:53 I'll add a form element there and in
  • 00:00:56 that form I'll add a death with maybe a
  • 00:01:00 class form control which we can use for
  • 00:01:02 styling if we wish to do so so let's
  • 00:01:06 quickly add that here and inside of that
  • 00:01:13 div I will add a label and that label
  • 00:01:17 will be for my email address which I
  • 00:01:20 want to get so the text will be email
  • 00:01:24 and below that I want to have an input
  • 00:01:25 and that input will be of type email and
  • 00:01:29 we'll get the ID email and for here
  • 00:01:34 needs to be changed to HTML 4 which is
  • 00:01:37 the react attribute or property for the
  • 00:01:41 for attribute in HTML because 4 is a
  • 00:01:44 keyword in JavaScript we have to use
  • 00:01:46 that ok so now we got that input we got
  • 00:01:49 that label let's now copy that and also
  • 00:01:53 create a password field here also of
  • 00:01:56 type passwords to hide the characters
  • 00:01:59 here that has some text of password and
  • 00:02:03 below that I want to have two buttons
  • 00:02:06 actually one which allows me to toggle
  • 00:02:09 between sign up and log in and the other
  • 00:02:11 one which actually submits the form so
  • 00:02:14 here I'll add another DEATH with maybe a
  • 00:02:17 class name of forum actions and in there
  • 00:02:20 I want to have my my buttons the first
  • 00:02:23 button will be of type button so that
  • 00:02:25 this button does not trigger the
  • 00:02:28 surrounding form element and does not
  • 00:02:30 submit the form and that will be my
  • 00:02:33 switch to let's say signup and we will
  • 00:02:36 set this text dynamically soon button
  • 00:02:39 and the other button well dad will be a
  • 00:02:41 button of type submit' which should
  • 00:02:43 actually trigger the submit event on our
  • 00:02:45 form here and therefore I will also say
  • 00:02:49 submit on the button
  • 00:02:50 now if we
  • 00:02:51 safe dad will see our page update and we
  • 00:02:53 get this ugly form here now speaking of
  • 00:02:56 ugly I think you can't really see
  • 00:02:58 authenticate now that is something we
  • 00:02:59 set up on the last video now I will
  • 00:03:02 change this I'm not happy with that
  • 00:03:04 maybe a little bit of a brighter yellow
  • 00:03:08 whitish color is it's better here and of
  • 00:03:10 course you can choose a different style
  • 00:03:12 you can underline that you can change
  • 00:03:13 the background whatever you want now
  • 00:03:16 back to that form here however I want to
  • 00:03:18 style that form a little bit too and for
  • 00:03:21 that I'll add a new file here off CSS
  • 00:03:25 and there I will select my overall form
  • 00:03:29 element right I could do that I'll
  • 00:03:31 actually not do this I'll add a class
  • 00:03:32 here off forum so that I don't style all
  • 00:03:36 form elements on my page instead I'll
  • 00:03:39 give this a class of off form here and
  • 00:03:42 now I can style that for that to have an
  • 00:03:45 effect I need to import my style sheet
  • 00:03:47 here of course so that these styles get
  • 00:03:50 added and now here I want to give that a
  • 00:03:53 width of let's say 40 R M and a max
  • 00:03:57 width of 80% of the page width I want to
  • 00:04:01 Center it in the middle with margin auto
  • 00:04:03 left and right top and bottom let's say
  • 00:04:05 you REM to have some distance to the
  • 00:04:08 header and so on actually let's bump
  • 00:04:12 this up to 5mm here looks a bit better
  • 00:04:14 and now remember I added these form
  • 00:04:18 control class names here which surround
  • 00:04:20 my labels and my inputs well I'll take
  • 00:04:24 these
  • 00:04:24 LM ctrl or take axis or control over my
  • 00:04:28 form control here and I want to style
  • 00:04:31 both my labels and also my inputs in
  • 00:04:34 there and give them a width of 100% and
  • 00:04:38 changed them to display:block so that
  • 00:04:40 they take two full available with they
  • 00:04:43 can get and now that form is actually a
  • 00:04:47 little bit too big let's change that to
  • 00:04:49 25 Ram here yeah that looks better so
  • 00:04:52 now I got that set up now some distance
  • 00:04:54 between these form controls would be
  • 00:04:56 nice too
  • 00:04:56 so for each form control I'll add a
  • 00:04:59 margin to the bottom so margin bottom of
  • 00:05:04 let's say
  • 00:05:05 REM so that there's some distance
  • 00:05:07 between these blocks off of input
  • 00:05:09 elements maybe we also want to give our
  • 00:05:13 form control label some margin to the
  • 00:05:16 bottom so that there is some distance
  • 00:05:18 between the label and the actual input
  • 00:05:20 of thought five REM yeah like that and
  • 00:05:24 now let's also make sure these buttons
  • 00:05:27 look good
  • 00:05:28 first of all I'll actually switch their
  • 00:05:30 order so that the submit button comes
  • 00:05:32 first and then I want to style my
  • 00:05:34 buttons here form actions select the
  • 00:05:39 button in there and the button in my
  • 00:05:41 form action should have a background
  • 00:05:44 color which is let's say in that bluish
  • 00:05:49 color I also used here so there's light
  • 00:05:52 blue color this is the background color
  • 00:05:55 the font should be inherited so that it
  • 00:05:59 takes the same font family and a default
  • 00:06:02 font size as the rest of the page or
  • 00:06:03 actually the parent element but
  • 00:06:05 therefore also the rest of the page here
  • 00:06:07 has don't forget the hashtag here
  • 00:06:11 let's give it a border of one pixel
  • 00:06:13 solid and that same bluish color and
  • 00:06:16 maybe give it rounded corners here like
  • 00:06:21 this so that it looks like that now Q
  • 00:06:25 enhance this look a little bit let's add
  • 00:06:28 some padding left right top and bottom
  • 00:06:31 let's say dot five rim left and right
  • 00:06:34 one rim maybe let's also add some margin
  • 00:06:37 to the left and right of one R M for
  • 00:06:41 these buttons let a little bit less
  • 00:06:44 padding top and bottom top to five now I
  • 00:06:47 don't want to have a margin for to the
  • 00:06:50 very left here for this button so what
  • 00:06:52 I'll actually do is I'll change this and
  • 00:06:54 give them a margin to the right of one R
  • 00:06:56 M so that there is no margin to the left
  • 00:06:58 and to make them a little bit prettier
  • 00:07:02 I will also first of all change that
  • 00:07:07 border radius to free pixels and give
  • 00:07:10 them a box shadow of one pixel one pixel
  • 00:07:14 five pixels and then
  • 00:07:18 parent black color so that they look a
  • 00:07:22 little bit more like buttons and last
  • 00:07:24 but not least we could give them some
  • 00:07:25 white text if we wanted to so a color of
  • 00:07:29 white which will style the text
  • 00:07:31 appropriately though that is up to you
  • 00:07:33 if you want to do that it could be a bit
  • 00:07:34 hard to read but I'll go with that and
  • 00:07:36 let's now also add a cursor:pointer to
  • 00:07:39 indicate that they are clickable when we
  • 00:07:41 hover over them because our mouse now
  • 00:07:43 changes now obviously we want to have
  • 00:07:45 some hover effect too probably
  • 00:07:47 so let's actually add a hover and also
  • 00:07:51 an active style so that both whilst they
  • 00:07:55 button is scattered button is getting
  • 00:07:57 pressed as well as when we're hovering
  • 00:07:58 over it it changes its style and there
  • 00:08:01 I'll start with the background I have
  • 00:08:04 but maybe make that a bit darker when we
  • 00:08:06 hover over it something like that and
  • 00:08:09 the same for the border color I want to
  • 00:08:12 have the same border color so that we
  • 00:08:14 see no difference between border and
  • 00:08:16 background yeah and now I guess it's
  • 00:08:19 clear that we can push these buttons now
  • 00:08:22 obviously as always change this to your
  • 00:08:24 likings change the colors whatever you
  • 00:08:26 want
  • 00:08:26 I don't want to send a request to my
  • 00:08:29 back-end and for that we need to start
  • 00:08:31 our back-end server now before we go
  • 00:08:33 there and run an NPM start there are two
  • 00:08:35 important things to keep in mind the
  • 00:08:37 first thing you have to keep in mind is
  • 00:08:39 that your front-end development server
  • 00:08:41 needs to keep on running because we have
  • 00:08:43 that separation of servers we have our
  • 00:08:45 back-end API server which we could host
  • 00:08:47 on a totally different server than our
  • 00:08:50 reaaahhr bill to react up in the end and
  • 00:08:52 therefore we need to keep this front and
  • 00:08:55 server process running and the second
  • 00:08:56 important part related to that is that
  • 00:08:59 our reactive runs on port 3000 by
  • 00:09:02 default and that is also the port I used
  • 00:09:05 for the front-end in the past now I will
  • 00:09:07 change this to 8,000 so that we don't
  • 00:09:09 clash here because we can't run both on
  • 00:09:11 the same port obviously and with that I
  • 00:09:14 will open a new terminal with the old
  • 00:09:17 pro SSD front-end server still running
  • 00:09:19 in a different terminal and in that new
  • 00:09:22 terminal I never get into the main
  • 00:09:23 project folder
  • 00:09:24 so not in the front that folder but the
  • 00:09:26 whole project folder and run NPM start
  • 00:09:29 there to bring up the node server with
  • 00:09:31 the
  • 00:09:31 port and now we have that back and
  • 00:09:34 running we got the front and running now
  • 00:09:36 we can start sending requests now let's
  • 00:09:39 briefly have a look at our schema here
  • 00:09:41 to see which requests we can send and I
  • 00:09:44 want to start with a request to that
  • 00:09:47 create user endpoint so that we can
  • 00:09:49 create a new user which makes sense as a
  • 00:09:52 first step I guess so for this let's go
  • 00:09:55 back into D off J's file because there
  • 00:09:59 we added all the styling but we got no
  • 00:10:01 logic in there we got these two buttons
  • 00:10:04 but these buttons don't do anything now
  • 00:10:07 let's make sure they do something by
  • 00:10:10 also gathering our inputs here when we
  • 00:10:13 press the submit button so here in this
  • 00:10:16 off page component I will add a new
  • 00:10:20 method here submit handler name is up to
  • 00:10:26 you which I'll create like this and in
  • 00:10:28 this method here I want to read the
  • 00:10:31 email and the password and send it to
  • 00:10:33 the backend basically and we'll add log
  • 00:10:35 and logic later now to get these values
  • 00:10:38 we could use two approaches the first
  • 00:10:40 approach is that we set up two-way
  • 00:10:42 binding so we basically basically start
  • 00:10:44 managing state here and then we bind the
  • 00:10:47 values of our inputs to that state and
  • 00:10:50 listen to the change event on that
  • 00:10:52 that's a typical pattern you see a lot
  • 00:10:54 but we can also use refs references and
  • 00:10:57 I'll do that for that we'll add the
  • 00:10:59 constructor which receives props and
  • 00:11:01 which needs to call super props first
  • 00:11:03 and then I can set up two references
  • 00:11:05 here with the ref API which is built-in
  • 00:11:08 to react their first reference will be
  • 00:11:11 stored in a class property which I'll
  • 00:11:13 name email l because the reference will
  • 00:11:16 be to the full element not just to the
  • 00:11:18 value we entered and this can be created
  • 00:11:20 by calling react create ref here now the
  • 00:11:24 second reference will be my password l
  • 00:11:27 my password element and I also create
  • 00:11:30 that with create react wrath and I
  • 00:11:32 create wrath and these are two different
  • 00:11:35 references stored in two different
  • 00:11:37 properties now they don't are they
  • 00:11:40 aren't useful in these properties we
  • 00:11:43 need to connect them to the Dom elements
  • 00:11:45 – the JSX elements we do that with the
  • 00:11:47 special ref property which react nose
  • 00:11:50 and for the email input I'll bind that
  • 00:11:53 to this email l and for the password
  • 00:11:56 I'll bind it to you this has word l so
  • 00:12:00 now that is connected and now we can
  • 00:12:02 access these references and therefore
  • 00:12:05 the elements at which they point
  • 00:12:07 anywhere in this component and I want to
  • 00:12:10 use these references here to submit
  • 00:12:12 handler so in the submit handler we can
  • 00:12:15 now start reading these values for
  • 00:12:18 example from the email L there we have a
  • 00:12:21 current prop that is given to us by
  • 00:12:23 react and that Kurt prop will now be
  • 00:12:26 referring to the actual element and
  • 00:12:28 there we can since we know that it is an
  • 00:12:31 input element we can get D value and the
  • 00:12:34 same for the password we can access this
  • 00:12:37 password L current value like this now
  • 00:12:41 what we want to do of course is we want
  • 00:12:43 to validate that the user did enter
  • 00:12:46 valid or at least some email and some
  • 00:12:48 password now I'll not add full
  • 00:12:50 validation here we could do that we
  • 00:12:52 could check if it if the password if the
  • 00:12:55 email is a valid email address we could
  • 00:12:58 also mark the input with a red border if
  • 00:13:01 it's wrong feel free to do that I want
  • 00:13:03 to send a request here so I will
  • 00:13:06 actually do a very simple validation I
  • 00:13:08 will trim the email value to remove any
  • 00:13:11 excess white space at the beginning and
  • 00:13:13 end and then check if the length is
  • 00:13:16 equal to zero which means it's empty and
  • 00:13:19 if that is the case or if the same is
  • 00:13:22 the case for the password so if it's R
  • 00:13:24 in that and the length is equal to zero
  • 00:13:26 then we have even or email and no email
  • 00:13:29 or no password or both and then I just
  • 00:13:32 want to return I will not continue
  • 00:13:33 otherwise if we make it past this if
  • 00:13:37 check we have an email and we have a
  • 00:13:38 password so in that case I want to send
  • 00:13:41 a request to the back end here now for
  • 00:13:44 the moment let's console.log email and
  • 00:13:47 password to confirm that this works and
  • 00:13:49 let's now connect the submit handler to
  • 00:13:52 our form and for that on that whole form
  • 00:13:55 element I will listen to the on submit
  • 00:13:58 event and bind this submit handler and
  • 00:14:03 thanks to the way I wrote this method
  • 00:14:06 with this arrow function notation I
  • 00:14:08 don't need to bind this or anything like
  • 00:14:10 this the this keyword in this method
  • 00:14:13 will always refer to the class because
  • 00:14:15 I'm using the arrow function notation
  • 00:14:17 here now with that disability vent is
  • 00:14:20 bound to the form because this button
  • 00:14:23 here is of type submit this event will
  • 00:14:25 actually be triggered there's one last
  • 00:14:27 thing I want to do when this gets
  • 00:14:29 submitted the default behavior of the
  • 00:14:31 browser will be to actually send the
  • 00:14:33 request to the same URL dispatch is
  • 00:14:36 running on so it would send a request to
  • 00:14:38 our development server which of course
  • 00:14:40 will not achieve anything I want to
  • 00:14:42 prevent that default from happening and
  • 00:14:45 we can do this with the event object we
  • 00:14:47 get when these submit event occurs this
  • 00:14:50 event object is passed into this method
  • 00:14:52 which we bound here or which we bound
  • 00:14:55 here with its reference being shared
  • 00:14:57 here automatically so we actually can
  • 00:15:00 expect the event object here as an
  • 00:15:02 argument and the first thing I want to
  • 00:15:04 do here is I want to call prevent
  • 00:15:06 default to make sure that no request
  • 00:15:08 gets sent now if that if we save all of
  • 00:15:11 that let me open up the developer tools
  • 00:15:13 here and bring up that console so that
  • 00:15:15 we can see any output and now let's
  • 00:15:19 enter tests at test comm and here maybe
  • 00:15:23 tester and submit this and we see it
  • 00:15:26 here this is the input I just entered if
  • 00:15:28 I click switch to sign up we don't see
  • 00:15:30 anything because this does not trigger
  • 00:15:32 the submit event as it shouldn't but we
  • 00:15:34 can hit that and you see that count go
  • 00:15:36 up so we can catch these values now of
  • 00:15:40 course we want to not just output them
  • 00:15:42 here we want to send the request and for
  • 00:15:43 that we'll use the fetch API here though
  • 00:15:46 you could also use Axius or any other
  • 00:15:49 library for sending HTTP requests and
  • 00:15:52 react apps all used to fetch API which
  • 00:15:54 is built-in to modern browsers now there
  • 00:15:57 we need to pass the URL and the name
  • 00:15:59 kind of implies that you can use this
  • 00:16:01 method to well fetch data turns out you
  • 00:16:04 can not just do that you can also use it
  • 00:16:06 to send data and that is of course what
  • 00:16:08 we will do here now the URL will send
  • 00:16:12 – is localhost colon 8080 is on the
  • 00:16:19 front end that is our endpoint which we
  • 00:16:21 have here so that is the URL to which I
  • 00:16:24 want to send a request but we need to
  • 00:16:26 configure that request because by
  • 00:16:27 default it will be a get request and it
  • 00:16:29 doesn't hold any data it will have the
  • 00:16:31 wrong headers now we can pass a
  • 00:16:34 JavaScript object to this fetch method
  • 00:16:36 as a second argument – now configure
  • 00:16:38 that request and there we can set the
  • 00:16:40 method and we need to set it to post of
  • 00:16:43 course because graph QL works with post
  • 00:16:46 we'll also need to set a body and I'll
  • 00:16:48 come back to this in a second I first of
  • 00:16:52 all want to setup the headers though
  • 00:16:53 because that is easy to overlook and it
  • 00:16:55 will make sure that this fails if we do
  • 00:16:57 it incorrectly for our graph QL server
  • 00:17:00 on the backend to work we need to tell
  • 00:17:02 that server in which format we're
  • 00:17:04 sending the request and I will send it
  • 00:17:06 in JSON format so a string which in the
  • 00:17:09 end contains a JavaScript object which
  • 00:17:11 will describe my graph QL query and I'll
  • 00:17:14 show you that object and that data in a
  • 00:17:15 second
  • 00:17:16 therefore I need to let the backend note
  • 00:17:19 that I'm sending well JSON data and
  • 00:17:24 Fredette all at the content-type header
  • 00:17:27 with the value of application jason and
  • 00:17:32 this will make sure that the back and
  • 00:17:33 tries to parse the incoming data as JSON
  • 00:17:35 and it will be our a graphical endpoint
  • 00:17:38 which testers now important this will
  • 00:17:41 fail
  • 00:17:42 still and I will show you why and fix it
  • 00:17:44 in an soon but first of all let's go
  • 00:17:48 back to the front that here and let's
  • 00:17:50 work on that body I will prepare it here
  • 00:17:53 it's essentially our query or our
  • 00:17:55 request whatever request body whatever
  • 00:17:57 you want to call it and that is
  • 00:18:00 generally a Java Script object which we
  • 00:18:03 will string if I into JSON format so we
  • 00:18:06 pass request body this object here into
  • 00:18:10 Jason string if I to turn it into the
  • 00:18:12 right format now of course we don't send
  • 00:18:14 an empty object but this object can have
  • 00:18:17 a couple of fields for example it must
  • 00:18:19 have a query field and that will hold as
  • 00:18:21 a value a string and I'll use back ticks
  • 00:18:24 years so that I can
  • 00:18:25 right a multi-line string now in this
  • 00:18:29 string we put our graphical query syntax
  • 00:18:31 so if we're sending a mutation we write
  • 00:18:34 mutation here then we can give this any
  • 00:18:37 name we want or leave it out and now in
  • 00:18:40 curly braces we target a specific end
  • 00:18:44 point like create user so that's what
  • 00:18:47 I'll do here
  • 00:18:47 I'll send us to create user and in there
  • 00:18:52 we need to pass in some arguments of
  • 00:18:54 course we have our user input to be
  • 00:18:56 precise right we can see that here user
  • 00:18:58 input and that isn't essentially an
  • 00:19:00 object with email and password so let's
  • 00:19:03 add a colon here and then the curly
  • 00:19:07 braces and then we'll have email and
  • 00:19:09 password as fields here and now
  • 00:19:12 important the email needs to be passed
  • 00:19:14 between double quotes because it must be
  • 00:19:16 a string and therefore it has to be a
  • 00:19:17 string here q and so asked so we do have
  • 00:19:21 to do it for the password now since I
  • 00:19:24 use back 6 here we can dynamically
  • 00:19:25 inject the value and I'll show a more
  • 00:19:27 elegant way of doing that soon but for
  • 00:19:29 now I'll do it like this we can inject
  • 00:19:31 the value with that string literal
  • 00:19:33 injection syntax and I can pass my email
  • 00:19:35 here and for the password between double
  • 00:19:38 quotes I can pass the password like this
  • 00:19:41 now as we know by our schema for the
  • 00:19:46 create user here we get back a user
  • 00:19:48 object and that user object has an ID
  • 00:19:51 email and so on so I actually want to
  • 00:19:53 get some of that data so I add opening
  • 00:19:56 closing curly braces and then I want to
  • 00:19:58 get that ID and that email let's say now
  • 00:20:01 this would be valid graph killed syntax
  • 00:20:03 and we put that in our query property
  • 00:20:05 here now we can send this request and we
  • 00:20:08 can simply see if that works
  • 00:20:09 so let's go there let's enter some dummy
  • 00:20:13 data here and make sure by the way that
  • 00:20:17 you clean up your back-end database and
  • 00:20:20 purge all the data we played around with
  • 00:20:23 so that we can really create new users
  • 00:20:26 and you don't fail because you try to
  • 00:20:28 create users which already exists so
  • 00:20:30 clear your existing database first and
  • 00:20:33 once it did this hit submit and you
  • 00:20:36 should get an error here and you'll get
  • 00:20:38 a core
  • 00:20:39 error to be precise you get an or error
  • 00:20:42 that the request has been blocked by
  • 00:20:43 course policy and this is actually a
  • 00:20:46 security mechanism built into modern
  • 00:20:48 browsers they basically check for these
  • 00:20:51 behind-the-scenes requests Ajax requests
  • 00:20:54 and the fetch API whether the server to
  • 00:20:57 which you are sending the request if
  • 00:20:58 it's not the same server as you're
  • 00:21:00 currently on on this page so if it's not
  • 00:21:02 localhost 3000 if that server allows
  • 00:21:05 cross-origin requests and our server
  • 00:21:07 doesn't allow that at the moment because
  • 00:21:09 how do we allow it by setting the right
  • 00:21:12 headers and we're not setting such
  • 00:21:13 headers on our server at the moment so
  • 00:21:16 that is something which will have to
  • 00:21:18 change and that is exactly what I'll do
  • 00:21:19 now in the App J's file before we even
  • 00:21:23 run our is off middleware I'll add a new
  • 00:21:25 middle we're here with a normal
  • 00:21:27 expressjs mil aware function which gets
  • 00:21:30 the requests and response objects and
  • 00:21:32 the next function and in there I want to
  • 00:21:34 add some headers to every response that
  • 00:21:37 is sent back by our server because for
  • 00:21:39 this server I want to allow cross-origin
  • 00:21:41 requests that's basically the case for
  • 00:21:44 every API rebuilding unless you are sure
  • 00:21:46 that you have an API which you only want
  • 00:21:49 to consume from the same host now there
  • 00:21:52 are therefore want to set a new header
  • 00:21:55 which has to be accessed – control –
  • 00:21:59 allow – origin and the value for this
  • 00:22:03 header will be a star and this means
  • 00:22:04 every host every client a location can
  • 00:22:08 send requests to this server now this is
  • 00:22:12 not enough we need to set another header
  • 00:22:15 – which is access control allow methis
  • 00:22:19 because we're granting access basically
  • 00:22:21 to every client location every client
  • 00:22:25 domain but now I want to control which
  • 00:22:28 kind of a request can you send and there
  • 00:22:31 I want to allow post and get requests
  • 00:22:35 and options because turns out the
  • 00:22:38 browser will also automatically send on
  • 00:22:40 an options request before it sends a
  • 00:22:43 post request that's a default behavior
  • 00:22:45 of the browser where it basically looks
  • 00:22:47 whether the post requests it is about to
  • 00:22:50 send is allowed by the server they
  • 00:22:53 for it sends this options request first
  • 00:22:55 automatically so we need to allow that
  • 00:22:56 too now there's one last header which I
  • 00:23:00 want to set and that's the access –
  • 00:23:03 control – allow – headers which controls
  • 00:23:08 which kind of headers we can send a set
  • 00:23:10 for the requests were sending to that
  • 00:23:12 server and there I want to allow the
  • 00:23:16 content-type header which we are already
  • 00:23:18 adding and the authorization header
  • 00:23:21 which will soon need so now we can send
  • 00:23:24 these types of requests now there's one
  • 00:23:26 special case which I want to handle and
  • 00:23:27 that is when the request method is equal
  • 00:23:30 to options then we have this
  • 00:23:32 automatically sent request this now
  • 00:23:34 however should not reach our graph QL
  • 00:23:36 API because it can't be handled there
  • 00:23:39 correctly so for such options requests I
  • 00:23:42 don't want to let this request continue
  • 00:23:45 on my server I just want to return a
  • 00:23:47 response where a send the status of 200
  • 00:23:49 where I basically signaled to the client
  • 00:23:51 it's ok you can send your whatever you
  • 00:23:54 wanted to send your post request in our
  • 00:23:55 case you're good otherwise if we don't
  • 00:23:59 go into this if statement alcohol next
  • 00:24:01 so that the request can continue its
  • 00:24:03 journey and now if we save that and
  • 00:24:06 therefore our back-end server restarts
  • 00:24:08 we don't even need to reload the
  • 00:24:10 front-end if I just hit submit again
  • 00:24:12 this now doesn't fail you see there is
  • 00:24:16 no error being thrown there but we all
  • 00:24:19 just don't see any other output if you
  • 00:24:21 go to the network tab however we can see
  • 00:24:24 requests here let me increase that a
  • 00:24:27 little bit we see there is a request
  • 00:24:29 which was sent to graph QL a fetch
  • 00:24:34 request here as you can see and if you
  • 00:24:36 click on that we see we got back a user
  • 00:24:39 data create user with the email and T ID
  • 00:24:42 so dad seem to have succeeded so that
  • 00:24:45 request was successful if you have a
  • 00:24:47 look at the headers at the very bottom
  • 00:24:48 we also see our request body which we
  • 00:24:50 attached which is our query so this is
  • 00:24:53 working now of course right now we're
  • 00:24:56 not doing super much with that
  • 00:24:57 information on the front end one thing I
  • 00:24:59 want to do at least is I want to print
  • 00:25:02 the response and fetch actually returns
  • 00:25:05 a promise so we can use
  • 00:25:07 then and catch now if we have an error
  • 00:25:09 here and by the way that is not an error
  • 00:25:11 thrown by the back end so not something
  • 00:25:14 like an on 200 status code but more
  • 00:25:17 things like network issues then I also
  • 00:25:19 want to lock that error we could show an
  • 00:25:22 alert and a modal but I just want to do
  • 00:25:23 that if we get back a response however
  • 00:25:26 then this will be interesting to look at
  • 00:25:29 I'll check if the response has a status
  • 00:25:31 which is not equal to hun 200 and which
  • 00:25:35 is not equal to 201 and in that case I
  • 00:25:39 will now throw a new error failed
  • 00:25:43 otherwise if we make it past as if check
  • 00:25:45 we have a successful response and
  • 00:25:47 therefore I will now return response
  • 00:25:49 Jason which is a method I can call on
  • 00:25:52 this response object given to me by the
  • 00:25:54 fetch API and this will automatically
  • 00:25:57 extract and parse the response body so
  • 00:26:01 that in the next then block I'll have my
  • 00:26:03 response data basically which I can now
  • 00:26:08 log here like this okay so now if I save
  • 00:26:12 this let's try it again
  • 00:26:15 and let's first of all try it again for
  • 00:26:16 the credentials which I just used which
  • 00:26:18 now should be taken it's open the
  • 00:26:20 console and click Submit and what we see
  • 00:26:23 here is we get back this errors array
  • 00:26:25 now will not get an error lock because
  • 00:26:28 in a network tab we can clearly see that
  • 00:26:30 this has a 200 status code and that is
  • 00:26:33 the default but we can see indeed it
  • 00:26:36 failed on it back end and we could now
  • 00:26:38 handle this we could check if the errors
  • 00:26:39 object is present and then proceed
  • 00:26:42 appropriately on the front end if I use
  • 00:26:45 a new email address test queue here
  • 00:26:47 which should not be taken and I
  • 00:26:50 submitted that then we can see I get
  • 00:26:53 back this success response format so
  • 00:26:57 that is all working now let's of course
  • 00:26:59 make sure that we can't just sign up but
  • 00:27:01 also log in and therefore this button
  • 00:27:04 caption is wrong here of course all my
  • 00:27:06 off J's file first of all here we can
  • 00:27:09 actually switch to login but I want to
  • 00:27:11 make sure that we can toggle between
  • 00:27:12 these modes anyways so let's make sure
  • 00:27:15 this is something we can add and for
  • 00:27:19 that I'll add state here
  • 00:27:21 in this class let's add a new state
  • 00:27:25 object here where I have is login and
  • 00:27:29 that has a default value of true let's
  • 00:27:32 say now when I click this button here so
  • 00:27:37 upon a click here I want to have my
  • 00:27:41 let's say switch mode handler being
  • 00:27:44 executed this switch mode Handler and
  • 00:27:47 therefore we should add such a method
  • 00:27:49 maybe here and in there I basically want
  • 00:27:54 to reword my state so we'll call this
  • 00:27:56 set state and use the function form here
  • 00:27:59 which gives me my previous state and
  • 00:28:01 then I can return a new state object and
  • 00:28:04 there I will set is login equal to well
  • 00:28:08 what it was previously not so the
  • 00:28:10 opposite of previous state is locked in
  • 00:28:13 its login with that exclamation mark I
  • 00:28:15 basically well revert this value now we
  • 00:28:19 can switch in state of course you want
  • 00:28:22 to switch in our output here to in our
  • 00:28:24 user interface for example here I don't
  • 00:28:27 want to say switch to login instead I'll
  • 00:28:30 put a dynamic value here and say switch
  • 00:28:32 to and then we check this state is login
  • 00:28:34 and if this is true then I want to be
  • 00:28:37 able to switch to sign up right because
  • 00:28:38 we are in login mode so we would switch
  • 00:28:41 to sign up and if we are not in login
  • 00:28:44 mode then we are in sign up mode so we
  • 00:28:46 would switch to login so now we got dis
  • 00:28:50 changed and of course when we submit the
  • 00:28:52 form we also want to send different
  • 00:28:54 requests right now we're sending this
  • 00:28:56 create user request but if we are
  • 00:28:59 logging in then we want to send a
  • 00:29:01 request to a different end point we want
  • 00:29:04 to send a request to our log inquiry so
  • 00:29:07 that's the next thing which I'll add so
  • 00:29:10 let's add a new request body variable
  • 00:29:15 now instead of a constant and let's say
  • 00:29:18 our default is actually that we do login
  • 00:29:21 because we also have that set to true so
  • 00:29:24 our default status that we log in not
  • 00:29:26 that we sign up so now the request body
  • 00:29:29 for that default here will still have a
  • 00:29:31 query but in that query
  • 00:29:34 command basically in the curry string
  • 00:29:37 I'll not send a mutation but a query and
  • 00:29:40 this can be confusing having that double
  • 00:29:41 query but that here is a must-have and
  • 00:29:44 that then depends on which end point you
  • 00:29:46 want to reach
  • 00:29:47 so here I'll send a query and I'll send
  • 00:29:49 that query to login remember that is
  • 00:29:52 this endpoint here now login text email
  • 00:29:56 and the password as arguments so here I
  • 00:29:59 will pass the email with double quotes
  • 00:30:01 and this injection syntax where I
  • 00:30:04 reference my email and I will also pass
  • 00:30:07 my password with double quotes and Det
  • 00:30:10 injections syntax here and I want to get
  • 00:30:14 back some off data or I do get back some
  • 00:30:18 off data and I'm interested in actually
  • 00:30:20 all let's get user ID token and token
  • 00:30:23 expiration so here user ID token and
  • 00:30:28 token expiration that is what we can get
  • 00:30:31 from the back end and that is what I
  • 00:30:32 want to get here and now I'll just check
  • 00:30:35 if this state is logged and if that is
  • 00:30:39 not true because then I'll not be
  • 00:30:42 sending my login request but my signup
  • 00:30:45 request so now I will move that request
  • 00:30:48 constructor here in there and just
  • 00:30:51 overwrite request body because it is a
  • 00:30:54 variable now I can change it if we're
  • 00:30:56 not sending a login request and then we
  • 00:30:58 can use that same fetch call to the same
  • 00:31:00 back end with a different request body
  • 00:31:02 effectively now with that let's save
  • 00:31:05 this at this and let's have a look first
  • 00:31:09 of all this toggling seems to work now
  • 00:31:11 we are in login mode now because we
  • 00:31:13 could switch to sign up and now let's
  • 00:31:16 take credentials dead that maybe don't
  • 00:31:19 exist and I get an error failed mmm well
  • 00:31:25 look here it's a 500 error password is
  • 00:31:29 incorrect
  • 00:31:30 okay so that's good now let's go back
  • 00:31:33 and let's use valid credentials and this
  • 00:31:37 looks better and we get back our login
  • 00:31:39 object with the token token expiration
  • 00:31:42 which is one hour and our user ID so
  • 00:31:45 this is now working we are
  • 00:31:48 to log in and to sign up obviously we're
  • 00:31:51 not doing anything with that token and
  • 00:31:53 so on on the front end yet that is
  • 00:31:55 something which will follow but this is
  • 00:31:57 an important first step being able to
  • 00:31:59 leverage our graph QL API now we will
  • 00:32:03 build up on this in the next parts of
  • 00:32:05 this series hopefully again see you
  • 00:32:07 there
  • 00:32:07 bye