1 00:00:00,450 --> 00:00:05,130 In the last section, we worked on the header component inside of our application and I got a little 2 00:00:05,130 --> 00:00:08,460 bit of an error message about the React router library not being found. 3 00:00:08,670 --> 00:00:11,490 That was a little bit of configuration error that was on my side. 4 00:00:11,940 --> 00:00:12,690 I fixed it up. 5 00:00:12,690 --> 00:00:14,730 So you probably didn't have that air at all. 6 00:00:14,940 --> 00:00:16,980 Again, it was just a small mistake that I made. 7 00:00:17,560 --> 00:00:22,710 So we've now got the text header showing on the screen, which means our header component is successfully 8 00:00:22,710 --> 00:00:26,250 being displayed to our users, which is exactly what we want to have. 9 00:00:26,280 --> 00:00:27,170 So that's definitely good. 10 00:00:28,470 --> 00:00:33,090 Now that we've got the header on the screen, we need to start thinking about what content it needs 11 00:00:33,090 --> 00:00:33,660 to show. 12 00:00:34,350 --> 00:00:38,940 So let's look at a diagram that's going to help us figure out exactly how to deal with this header. 13 00:00:41,070 --> 00:00:47,850 OK, so when our application first loads up on the page and the user sees that header component on the 14 00:00:47,850 --> 00:00:53,430 screen, we want to make sure that it shows the correct buttons inside the header, depending on whether 15 00:00:53,430 --> 00:00:56,410 or not the user is currently authenticated with our application. 16 00:00:56,940 --> 00:01:03,570 So when our header first loads up, I'm going to suggest that maybe we make a query to get our current 17 00:01:03,570 --> 00:01:05,070 authentication state. 18 00:01:05,620 --> 00:01:12,090 So remember that we just added in a field to our route query type to ask whether or not our user is 19 00:01:12,090 --> 00:01:15,310 currently signed in or to get the currently signed end user. 20 00:01:16,050 --> 00:01:23,370 So if we make a query inside of the header and we ask for that piece of data from our server, we can 21 00:01:23,370 --> 00:01:29,100 say that if the user is currently signed in will show a set of buttons that allow the user to log out. 22 00:01:29,450 --> 00:01:34,620 So that will probably be just a single button that says log out and if the user clicks it, we'll call 23 00:01:34,620 --> 00:01:35,960 the log out mutation. 24 00:01:35,970 --> 00:01:37,650 So that's definitely straightforward enough. 25 00:01:38,730 --> 00:01:44,880 Now, if the user is not currently authenticated, so if they are not yet signed into our application, 26 00:01:45,300 --> 00:01:47,910 we can show a set of login buttons instead. 27 00:01:48,330 --> 00:01:52,650 And those login buttons will be a button that say, you know, maybe log in and log out. 28 00:01:52,890 --> 00:01:58,230 So it'll allow the user to click on one of those and then go to the appropriate form to actually sign 29 00:01:58,230 --> 00:01:59,980 in or sign up to our application. 30 00:02:01,290 --> 00:02:04,230 So I think this is a good plan to go forward with. 31 00:02:04,590 --> 00:02:10,410 Will first write out our query inside of graphical and then we'll move the query over to our application 32 00:02:10,620 --> 00:02:14,190 and then make sure that we call the query from inside of our header component. 33 00:02:15,060 --> 00:02:17,520 So let's get to it first. 34 00:02:17,520 --> 00:02:19,670 I'm going to switch on over to graphical. 35 00:02:20,790 --> 00:02:26,730 Now, one of the last queries that we wrote was actually to test the current user query on the route, 36 00:02:27,120 --> 00:02:28,230 the route query type. 37 00:02:28,500 --> 00:02:30,650 So we've kind of already got this thing up here. 38 00:02:30,840 --> 00:02:35,990 If you deleted this for any reason, then you can certainly rewrite the query out very quickly. 39 00:02:36,000 --> 00:02:42,060 Here we are asking the query type to find the current user and we're asking to get back the current 40 00:02:42,060 --> 00:02:44,550 email and ID associated with them. 41 00:02:44,880 --> 00:02:46,920 So I'm going to add on the ID on there as well. 42 00:02:48,940 --> 00:02:51,570 You know, refresh it just to make sure that we get the ID as well. 43 00:02:54,900 --> 00:02:55,270 Cool. 44 00:02:55,920 --> 00:03:02,010 So now we can ask for the currently authenticated user and we get back the ID and the email of that 45 00:03:02,010 --> 00:03:08,000 user, just as we would expect, do you remember that if you see a user of NUL over here, that means 46 00:03:08,000 --> 00:03:13,950 that you're not currently authenticated with our application, which means you can run the login mutation 47 00:03:14,250 --> 00:03:19,590 to authenticate with the application and then you can rerun this query right here to get back the ID 48 00:03:19,590 --> 00:03:22,230 in the email of your currently authenticated user. 49 00:03:23,400 --> 00:03:29,450 OK, so we're going to take this query over here and we're going to move it over to our application, 50 00:03:29,460 --> 00:03:30,460 so I just copied it. 51 00:03:31,260 --> 00:03:36,240 We're going to move it over to our application inside of a new file that's going to house all of our 52 00:03:36,240 --> 00:03:39,750 different queries in my client directory. 53 00:03:39,840 --> 00:03:43,500 I'm going to make a new folder first and I'm going to call it queries. 54 00:03:44,370 --> 00:03:48,360 So I don't really expect to have many queries associated with this application. 55 00:03:48,630 --> 00:03:54,090 But definitely I want to, wherever possible, try to isolate them into a single file just in case we 56 00:03:54,090 --> 00:03:58,040 need to ask in multiple locations for the currently authenticated user. 57 00:03:59,100 --> 00:04:05,260 So inside of here, I'm going to make a new file called Current User G.S.. 58 00:04:06,090 --> 00:04:11,520 So this current user query will be responsible for returning the current user of our application. 59 00:04:13,140 --> 00:04:18,690 We've written queries inside of individual files several times before, so remember, at the very top 60 00:04:18,960 --> 00:04:27,420 will import the GQ will helper from Graff QOL tag and then we'll export default. 61 00:04:27,690 --> 00:04:28,760 The actual query. 62 00:04:29,700 --> 00:04:31,650 And again, we've done this several times. 63 00:04:31,950 --> 00:04:38,640 We place our GQ helper, we place our template string, and then we paste in our query like sell. 64 00:04:42,270 --> 00:04:43,800 OK, that's looking pretty good. 65 00:04:44,100 --> 00:04:49,830 We can now import this query into our header component and then instantly run the query whenever the 66 00:04:49,830 --> 00:04:51,530 header is rendered onto the screen. 67 00:04:52,320 --> 00:04:56,280 So I'm going to flip on over to my header at the top. 68 00:04:56,280 --> 00:05:01,920 We're going to import both the query that we just wrote and the graphical helper from the reactive Paulo 69 00:05:01,920 --> 00:05:02,470 Library. 70 00:05:03,690 --> 00:05:08,520 So we'll first import graph QOL from React Apollo. 71 00:05:09,510 --> 00:05:14,820 Remember that this function right here is what allows us to take a query and a component and sandwiched 72 00:05:14,820 --> 00:05:15,750 the two of them together. 73 00:05:16,620 --> 00:05:20,850 And then we'll also import our current user query. 74 00:05:21,030 --> 00:05:22,550 We can just call it query instead. 75 00:05:22,590 --> 00:05:29,580 Let's just keep it simple and call it query from up one directory and the queries folder and get the 76 00:05:29,580 --> 00:05:31,110 current user query. 77 00:05:34,890 --> 00:05:40,680 All right, next, we've done this next several times before to a lot of repeat code in here, we'll 78 00:05:40,680 --> 00:05:46,320 place the graphical helper at the bottom will pass that the query that we want it to execute and then 79 00:05:46,320 --> 00:05:50,100 wrap the component in a second set of parentheses after it. 80 00:05:51,410 --> 00:05:58,640 OK, so again, our job now is to run this query, look at the query and then decide whether or not 81 00:05:58,640 --> 00:06:04,250 we want to show a set of buttons that allow the user to log out or allow them to navigate to a form 82 00:06:04,250 --> 00:06:07,250 to log in or sign up to our application. 83 00:06:07,980 --> 00:06:13,790 So I'm going to suggest that maybe we can log the results of the query and then we look at the query 84 00:06:13,790 --> 00:06:19,880 itself and figure out exactly what properties we can refer to to decide what content we want to render 85 00:06:19,880 --> 00:06:20,720 inside the header. 86 00:06:21,110 --> 00:06:26,570 So essentially, whether or not we want to show the button to log out or the two buttons to sign in. 87 00:06:28,220 --> 00:06:32,480 So I'm going to place a log in here and we're just going to log out the results of the query, we're 88 00:06:32,480 --> 00:06:34,500 going to look at it and decide what to do. 89 00:06:35,330 --> 00:06:39,590 Remember that the results of the query always exists on this props dot data. 90 00:06:40,700 --> 00:06:42,840 OK, so this is looking pretty good. 91 00:06:42,920 --> 00:06:45,870 I think that we're just about ready to give this a test. 92 00:06:46,670 --> 00:06:48,800 I'm going to flip on over to my application. 93 00:06:50,210 --> 00:06:55,430 I'm going to refresh the page and I get my two queries logged out here. 94 00:06:55,460 --> 00:06:55,880 Perfect. 95 00:06:55,900 --> 00:06:56,720 So just what I want. 96 00:06:57,290 --> 00:07:02,640 Remember that the first result right here is from when before the query is actually completed. 97 00:07:02,660 --> 00:07:05,030 So that is the first time the component is rendered. 98 00:07:05,390 --> 00:07:10,850 The component is rendered instantly as the query is in progress and then the component renders another 99 00:07:10,850 --> 00:07:14,300 time once the component or once the query has been completed. 100 00:07:15,170 --> 00:07:18,250 So let's look at the data on these things and see what we have available. 101 00:07:19,670 --> 00:07:27,350 OK, so it looks like in the case that the user or the query has not been completed, loading is true 102 00:07:27,350 --> 00:07:30,090 and we've seen this property several times before. 103 00:07:30,680 --> 00:07:37,110 Chances are that when loading is true, we have not yet fetched any details about the user whatsoever. 104 00:07:37,490 --> 00:07:44,300 So I do not yet know whether or not I want to show some content to the user to say, oh yeah, you need 105 00:07:44,300 --> 00:07:46,400 to sign in or you are signed in. 106 00:07:46,850 --> 00:07:49,680 When loading is true, I still don't know what to render. 107 00:07:50,060 --> 00:07:54,320 So I think that we should probably have some catch inside of our component to say that if the query 108 00:07:54,320 --> 00:08:00,110 is still in progress, I probably don't want to show any buttons whatsoever because I don't want to 109 00:08:00,110 --> 00:08:02,810 assume that the user is or is not logged out. 110 00:08:04,700 --> 00:08:11,100 Now, in the response or the second counselling that we get here, we have a loading of false debt, 111 00:08:11,120 --> 00:08:12,110 so that definitely makes sense. 112 00:08:12,110 --> 00:08:19,100 The query is now completed and our user field is null, which means our user is not currently authenticated. 113 00:08:19,610 --> 00:08:23,540 Now, if you're looking at this and you're trying to say you're trying to figure out, well, Stephen, 114 00:08:23,990 --> 00:08:27,380 didn't we just make a query which said that we are authenticated? 115 00:08:27,410 --> 00:08:29,360 Aren't we currently authenticated with the server? 116 00:08:29,360 --> 00:08:31,190 Shouldn't user be populated right here? 117 00:08:31,700 --> 00:08:33,020 Well, the answer is yeah. 118 00:08:33,030 --> 00:08:34,460 We'll get to that in just a second. 119 00:08:34,490 --> 00:08:36,100 Just bear with me for a moment. 120 00:08:37,040 --> 00:08:43,040 The last thing I want to say about this is just after loading flips over to false, we will be able 121 00:08:43,040 --> 00:08:47,080 to look at this user property right here and if user is not null. 122 00:08:47,240 --> 00:08:52,700 So if a user is an object that has an ID and an email, that means that we should probably show the 123 00:08:52,700 --> 00:08:53,540 log out button. 124 00:08:53,900 --> 00:08:58,760 But in the case that user is null, well, then we should probably show the two buttons that allow the 125 00:08:58,760 --> 00:09:02,300 user to navigate over to the sign up or sign in forms. 126 00:09:03,080 --> 00:09:05,470 OK, so that's the overall plan here. 127 00:09:05,900 --> 00:09:10,690 We want to look at the loading flag first and figure out whether or not we should show any buttons. 128 00:09:11,030 --> 00:09:16,400 And then once loading is false, we can then look at the user property and decide what we want to actually 129 00:09:16,400 --> 00:09:16,730 do. 130 00:09:17,830 --> 00:09:23,600 OK, now I want to go back to something that I kind of interjected in there where I said that we're 131 00:09:23,600 --> 00:09:26,390 looking at this user property and it's set to null. 132 00:09:26,750 --> 00:09:31,670 But we had just ran a query over here, which seems to think that we are currently authenticated. 133 00:09:32,240 --> 00:09:38,390 So remember that you'll only see an ID in email right here if you have already signed in to the application. 134 00:09:38,690 --> 00:09:44,330 So if you are not currently signed in, be sure to run the login mutation and then you'll be able to 135 00:09:44,330 --> 00:09:48,650 ask for the current user and see the idea of the email that you're currently signed in as. 136 00:09:49,070 --> 00:09:54,020 Anyways, what I what I'm trying to indicate here, what I'm trying to show to you is that when we run 137 00:09:54,020 --> 00:09:59,330 this query to get the current user inside of graphical, everything around authentication functions 138 00:09:59,330 --> 00:10:00,440 the way that we expect. 139 00:10:00,980 --> 00:10:02,960 We are currently signed into the application. 140 00:10:03,530 --> 00:10:10,340 However, when we run the query inside of our application, it appears that we are not correctly fetching 141 00:10:10,340 --> 00:10:11,200 the current user. 142 00:10:11,600 --> 00:10:17,060 So it looks like between graphical and our application, there's a little bit of a disagreement on whether 143 00:10:17,060 --> 00:10:18,640 or not we're currently authenticated. 144 00:10:19,190 --> 00:10:24,440 So let's take a pause from our header in the next section and let's figure out what's going on here 145 00:10:24,440 --> 00:10:29,390 and let's figure out why our current user is not correctly being fetched inside of our application.