Using WPGraphQL with React (P4D7) - Live Coding with Jesse

Key Takeaways

hey everybody welcome to live coding with Jessie and today we're gonna begin some data from wordpress with a wordpress installation that's set up with the graph or uh what's it called WP graph QL plugin and so that basically allows us to get data from wordpress with graph QL so we have a react site with apollo and we're going to use that to get the data and we're gonna bring it in and display it and react so we've been doing some of this in previous streams and now we've got a little bit more of the app build out so we're gonna kind of dig a little deeper into that so we've had a significant pool request from yesterday from from Harshit and we also just had a pull request today from Sebastian so I haven't brought in Sebastian's pool request yet so we'll probably start with that and I'll pull that in I have some changes that I was making that I didn't commit yet so I'll need to finish up with these quickly commit that and then there'll be some merge conflicts and this will be a good opportunity to show what to do when there emerge conflicts I don't know that we've actually had any merge conflicts on the stream so this may be a first nice opportunity to see them and see how we we deal with those then we'll get into some of the the graph QL stuff so we actually have the creator of WP graph QL in the live chat right now which is awesome so hey Jason thanks for joining us and I'm really glad that you're here cuz I'm sure we'll have some some questions and let's see let me I was doing some other stuff I didn't have my normal setup okay so I have my normal screens up now so let me show you quickly what's changed since yesterday if you want to check it out in depth its pull request for so the the link to the repo on github is in the description of this video so you can check out pull request for and see all the files that change and everything happens it's a lot so I'm just gonna try to sum it up here so basically the biggest change in structure is that we used to have one component for layout now and that encompassed the the app bar at the top and then that that side navigation drawer that we had now that's split up so now we have a folder inside components that's layout I know it's really hard to see the folders over here I can't I can't make this bigger easily so I'll just describe is we have a folder inside components that now has several other components inside and they're all separated out instead of having one very large component and let me think oh also the the categories were brought in let me show you this will be easier for you to see let's see it looks like you're hearing some mic pops let me maybe move my phone my phone was was kind of closer to the mic than it normally is I'm gonna move it farther away and let me know if you still hear it now maybe it was just the phone okay cool I think it might have just been the phone so sorry about that I usually remember to move it away but I didn't didn't today so let me show you they'll be easier to just show some of the changes whoa probably because I was changing things and I didn't finish before I started this dream this is from State alone side component yeah I was was i working inside component I think I was see where I have it open let's go back and see layout drawer okay in the drawer yeah what's the one some things okay so basically now in that side navigation drawer we have all the categories listed okay and then I went in after afterwards and I set up the links so that when you click on one of those categories it pulls up just those posts from that category so that was the change I had hope to actually show you on the site with the changes but evidently I messed something up it's probably some passing wood it's a line 50 for this loading so it says the cannot read property edges of undefined oh you know what I'm messing with how we're pulling in these categories so that's probably the issue so I guess now's a good time to just jump right in and show you what I've been working on with with Apollo because we need to get this working to even have the app render so let me go ahead and start my timer and we'll just jump right into it and then I can go over after we get this working then maybe we can pull in Sebastian's pool requests so I'm going to start this up if you haven't watched before we do 25 minute sessions of code during that time I don't really look at the live chat that much so if you ask a question during that period I'm not ignoring you well I guess I'm ignoring you a little bit but not not for forever so once that 25 minute period is up then we'll do five minutes of question and the answers where I'll check out the live chat and then it and when I'm all done with the coding I'll answer all the questions that are left in the live chat so if you can stick around for a little while your question will get answered and if you can't stick around you can always catch the recording of this later on on the free code camp Channel and hear my response alright so let's get to work on this so here's what I was doing I don't need that up there I don't need this so right now we're pulling in all the categories and we're pulling in all the posts from each category so if you check this out here we're pulling sistas get all categories and posts so when I word click on one of the categories in that side drawer we would pull in all this data ok which works but I was thinking do we really need all that data no we don't actually we just need for each one we just need the posts for that particular category ok so the way we had it set up before we didn't need all that data because we were displaying all the categories and the posts so this is what I started to change this so that we would just get the data for that specific category so I pulled in below here how we were getting a single post by passing the ID and what I thought we could do and what I hadn't done yet I was I was looking through the documentation for WP graph QL to make sure it was possible was instead of passing the ID I I thought we could just pass the slug because I was already using the slug in the in the URL so basically with the link component we have access to let me see if I can show where it is ok here so we have access to this props match params category and that's the slug and we're passing that with react routers through that link component so I thought since we already have this data why not try to pass that data in and get our our post just for that one category based on the slug and a set of based on on the ID so I'm assuming that that's possible it seems like seems like that's possible so that was what I was attempting to do was just to kind of remake this after this example so I figure there's not really any need to take this out right now because it's possible we might need it and if we can't get this working I'd like to just fall back on what it was doing so for now thinking if we say single category and okay if we change this instead to slug and this way I was confused I'm not exactly sure what's going on here I it's there probably is necessary to work but I don't know if I can just do this and have it work so I was going through the documentation trying to find you know some example but I couldn't really see anything I saw things in the the sample project that did the that worked with the ID but I didn't see it with anything other than an ID all right so we should be able to get okay let's say category and then I guess under category we would then have category and edges node posts I guess that would be but we how we need to do it okay so and feel if anybody has any thoughts on on this process of how we're doing it put it in the live chat I'm going to try to keep glancing over since you know I'm just kind of trying to figure this out you know as we're going so based on on how we're getting things from the categories here I'm assuming that we would have to have this structure so let's go with that again let me cuz let me look at what we have for for posts forget all posts we post and post data okay maybe we need something more like this yeah I'm gonna see if we can go with this is if we have one category I'm assuming that in that one category there is something called posts that lists the posts that are for that category so let's just do this for now see what we get from that category let's see and okay there's a good discussion going on the live chat about what looks like spread operator so I'm gonna make sure I read over that once we get to the five-minute question-and-answer session I want to see if this works first but if you're wondering about this I'll will get an explanation of it you know from the live chat so if you can check the live chat now you know you can check it out now if you're watching later on and can't see the live chat just hang in there for a little bit and and I'll try to get you an explanation okay so now we have this data we want to pull this data into our category J S component so instead of get categories we're gonna say get actually we gonna say single category I don't want that to be I just I want to say get single get single category cuz that matches what we're doing here okay get single category and we'll have to pull that in from up here so instead of get categories it's single category okay we're gonna have to change up how we're doing things here as well but I'm gonna save this and see if we can load it enough and not get an error that I can look at what data we're getting we're still getting oh wait a second just because I obviously that's not going to work so I'm gonna take this out briefly did I not change did I not save that Howry property as okay so we wouldn't have the the edges now so we will have to edit this a bit so let's go we won't need this filter anymore because before we are getting multiple categories and we had to filter by the particular category that we wanted for that page so we can get rid of this filter just nice it'll clean it up a little bit and also we don't need categories edges instead what we need actually the way this is set up do we even need to map no we don't because we're passing all of the posts so we can come get rid of this map completely we don't need this let me get rid of some of the space okay so let's get rid of that we'll still give it we're gonna change these up so instead of categories let's go with posts now we'll go to a category and this props data like this will probably come in his category right this prop stated category all right so now now these will actually work still in terms of just saying category I don't think we'll need the note anymore so we should be able to just go we should be able to do this and it should work at least I think we'll see there's a lot of stuff going on here it's hard to test it okay this rough state of loading edges okay I'm using edges elsewhere I need to get rid of that then so where's my side drawer pulling in actually this doesn't this doesn't make much sense because this is basically unchanged we're still pulling and get all categories unless I've done something here let's mess this up I don't it doesn't look like I've changed anything there let's see I'm gonna check the latch act quickly in case there's something that you all are seeing that I don't see okay doesn't look like it right now so I'm thinking just in case I did something here that is is affecting this down here let's for now comment all of this out because we shouldn't need this at all to render the homepage oh you know what I don't know what I'm thinking obviously it's gonna go through everything USAir so instead what I'm gonna do is just move this I'm gonna move this down here I really don't think this will do anything but you never know still nothing this hmm maybe I'm not getting data let's let's try to check out its inspectors go to our Apollo dev tools let's see what we're getting syntax error let's check out our post see if we're still getting pose syntax error it's in this the same area we got last time when we weren't actually getting any data from WordPress this looks like the same error so maybe there's something going on within WordPress I mean I I didn't do anything but we could check it out that's I'm just gonna go through kind of the last part of the installation process again maybe it will reset something so let's go to those permalinks and change these up and do that I'm gonna purge our cache holy it always worth the shot to get rid of the cache nothing and I'm gonna refresh this just in case whoa all right not sure what I did something worked though okay now this is the the big test here four categories words no that is not working now we get that same error again we briefly okay alright so while we have this up here I want to check out what data we're getting so let's go it's going to react for some reason the react dev tools won't open from the drop-down at least for me okay is there some way that I can quickly get down this this this tree here this tom tree it's so annoying to open those up okay so here's our data and we have posts we should have our categories hmmm alright let's check out or a side component let's see what data we have here all right great we have the categories there okay and it is in the form of edges and then node and then name array so this is how how we're getting this double check so edges node that's that's exactly what we're looking for let's go back into categories here and see yeah categories it should be categories edges note yeah that's exactly what we want hmm okay so for some reason we're getting the data some of the time and not all the time it seems like if I do a hard refresh then it works so I guess we'll just go with that for now we do have everything structured correctly so let's go back here and we're gonna try at least you can see the categories now so before I this up again and we get an error you can see on the side these are the categories that we're pulling from WordPress so these are all our categories currently when you click a category the URL changes to have the name of that category there I'm gonna try a hard refresh and see if we can get something okay well this is better than nothing we have an error message to go by it's expecting a variable slug but was not found in the props passed to Apollo okay so we're not passing a slug and we should be passing it all right all right let's see how we're formatting this again category oh okay right right now we're only asking for posts from category but what we need is to get the ID the name ID not idea name and slug okay so this might have been my mistake for just not not getting these let's see if if this works now and let's do a hard refresh hmm all right what am i skin care you're wrapping calories victim variable slug but it was not fun okay so we're still not getting not getting that let's see if we have anything we should be able to see the state all right so we got live nothing in there which that's what I thought normally we get an error you can't see anything which that kind of stinks but we can't see any of our queries either okay I I'm pretty sure I saved this I'm going to double check and make sure I saved it and let me see you know what I might not be formatting this correctly let me go back to our fragments okay maybe I'll need maybe I'll need to do edges and then node maybe I'm missing that so edges node and then let's pull all of this into here let's give this a shot mm single category oh you know what are we maybe we're not now that I actually read that error message I don't I don't think our problem was even in here yet I think the problem was it's expecting us to pass something in and we're not actually passing anything in so let's let's take a look at how we were passing in the ID for post and so that was probably in our somewhere in our post preview or under preview maybe not let's see pseudo post detail let's see there we go okay so in our single post detail then we're also pull doing this all right so I'm guessing this is what we need to do something more like this okay okay now let's go back to our categories and let's paste this in I D so in this case we have slug match params slug all right let's see lapis unexpected token I ordered idea let's see I think I may have forgotten to copy this this as well so let's grab that yes we don't have any closing tag any closing bracket for that one let's see if that helps and whether or not this works it'll be the last thing that we do undefined Oh actually this might work if we hard refresh okay a different error which is good that's progress so my timer is up so I'm gonna do five minutes of question-and-answer but we are making progress I mean it may not look like it but we're continually getting different error message which is which is progress if we were getting the same error message over and over again then that would be disappointing but different error messages are hopeful that means we're fixing the previous problems and just working our way through so I think we're close let's see all right so I'm gonna do five minutes and I'm gonna scroll way up to the top of the live chat just work my way down chronologically so if you just put a question in there I may not get to it in this session but I will get to it in the next session let's see hey everybody is here buddy saying hi let's see Sebastian's watching on his phone how was that it must be hard to read oh let me increase the font size a bit that's that's got to be tough I'll do that and then for now let's give some more space and I'll zoom in on this as well maybe it'll be easier to see okay all right so quanti sure says hello I'm new here nice dream a welcome thanks for joining us and joining in the live chat so you have any questions or comments or any things or anything let let us know okay so I mentioned I was going to talk about this there's three dots that look like the spread operator so in this case in in graph QL they're actually fragments so for those of you who have been following along along with the live chat you probably already have read everything I'm about to say but if you can't see the live chat this is basically what's it is so we have category data here so we're pulling in categories fragment and then we're bringing in category data so let's check out fragments touch is so within the categories fragment we have category data's who are exporting this and that simply is edges node and then we have ID name and slug so what that means is basically instead of writing edges node ID named slug in here we just put three dots and then category data and then it saves a lot of space otherwise it would we basically be repeating a lot of the same stuff and it would make this look huge so it's a lot more readable like that and the same thing with post data we could check out the fragments and see instead of writing all of this we can just write dot dot dot post data okay and that's the I mean that's we're putting in so it's basically like a variable really I mean that's that I guess it's what it is so it's like saving this all to a variable but it's it's a fragment right and then we just pop it in here so cleans cleans things up I'm not sure if there are other benefits to it but definitely it cleans things up okay denaun jay says hey Jesse hey how's it going thanks for joining us okay see oops okay Blake just put in the live chat well I just saw it maybe he put it in there earlier reminding me about starting the engross server so I'm starting it now and I will paste in the link for you all under the live chat so the link I'm about to paste in if you click on that you will see a live version of what I have here running locally on my computer you can inspect it check it out with dev tools and it kind of allows for a lot more real-time interaction than just having to depend on me being on this screen and showing you things so all right yeah there's a lot a lot of connections there so sorry I forgot to do that I have remembered at the beginning but we just had an error message and I thought I'll wait till we get it working and then I I forgot about it okay oh okay Jason I just saw the things you're talking about there with the slug so that's awesome that's perfect timing that I saw that and that you put that in because we're gonna start up our next Pomodoro session so 25 more minutes of coding and let's go back here and I'm gonna try out so I didn't even look at this error message but evidently we're not getting what we need in here I just saw Brookes comments I just saw the bacon ipsum that's hilarious yeah I like I like the bacon ipsum it's funny but it makes me really hungry it's the only downside and I don't have any bacon here in my office unfortunately okay all right so Jason has in the light and remember Jason is the one who created this word press graph QL plugin so let's see your get single category should look like categories like shrink okay so let's go to our get single category why do I have categories I must have clicked on the error message C get single category string okay missus speak too slow straight babe okay so I need to all right so I'm gonna attempt to do follow Jason's advice here so Jason let me know if I'm if I'm doing this incorrectly but I think what I need to do is say string and then category slug okay let's see what we have okay I mustn't mess something up I'll also I can check within my component too just to make sure category actually like if I go like this then really I need edges node right if I want to be able to do this yeah okay all right evidently that didn't work so I'm for this ere is further up the page so that was not that's not coming in okay Jason said actually I need the ID of the category okay so so evidently I can't do this with a slug I will need the ID that's what it seems like from from which ace insane in the live chat okay I wondered about that make sure like 31 string okay so jason says slug support will come soon but it's not available now okay cool that's not a problem let's pass in the ID so let's see I think it was supposed to be like this but actually let's do this with an ID so let's go back over to where we have our posts and we'll just pull in what we've done there in terms of the ID oops press the wrong thing there we go swears our posts so let's pull in the ID and I'd be here and then what we'll need to do in our side drawer I have too many things open I'm gonna close some of these out because I can't see the names of anything there we go okay actually I just remembered in Harsha's pull request he also did a lot with linting so but I don't wanna I want to make sure I give him credit so he did a lot of stuff with linting so you can check that out there's some extra NPM packages in there for es lint so that's in there as well so the linting experience should be better now than it was all right so within our drawer we were within our link the slow okay let me check out I think there is a way with react render or I'm sorry react router to pass in more data so let's bring up the documentation for that and I still want to use the slug here now actually how are we going to do that you know what for now I don't think we're going to be able to use the slug as the URL because it would be fine if users clicked on this link but if they're just coming there from so just coming there from a URL then it wouldn't work would it I don't think it would okay so here's what we're doing we're gonna change this up a bit so instead of our slug we're gonna go category and category node ID and then we're gonna need to change this up in our router as well so let's go to our apt j/s file and in our router we need to say category and then we'll have this category ID there okay now what we should be able to do is pass in in our category dodge ass down here we're gonna use instead of slug we're gonna use category ID or should we probably could just use ID that'll work I do want to double check where's our post detail yeah we just use ID here so since we're using the same code that we are using to get the single post let's just keep it the same but what we do want to change is this so instead of post ID we're gonna call this category ID because that's how we are bringing it in let me see I thought I did that somewhere where did I do this not Oh in our app dot J s we are calling a category ID here okay so down here we just changed this the category ID let's save make sure I saved it here and here and here and let's see hopefully this will work oh we're getting nothing at all that's that's worse than we were at before okay what did I do you don't even need to use the ID for the euro URL path or not oh okay I changed the path so of course that's not gonna work all right so here's our categories now let's click it see what's going on whoa cannot read property edges of undefined this profs data maybe what am I doing wrong here okay thanks Jason that was just what I was wondering about so I shouldn't have the edges and node here so I had added that in before thinking that was the problem but that really wasn't our problem so let's take that out and see what happens oops I forgot to take take out the edges note here I've been just says thank you guys it's too late into the night here and thanks for watching Abid sorry it's too late I did do the stream a half hour later than normal so hopefully on the normal days you'll be able to watch more so so goodnight thank you so much for watching okay alright so now we're farther down on the page and we're in a different component let me do a hard refresh though oh and we have a different thing now okay so we're back here two key categoryid cannot repro pretty ID of undefined okay let's see what's going on now this frosty let's see I'm gonna see if okay we're here I'll shoot or night we can't get any queries from that right now actually I have two different names here that all the other ones match up the categories Oh actually they don't they don't need to match up so yeah it wasn't my problem oh well we'll check it out anyway yes still that's the same air this world says do you ever get confused with so many tabs open occasionally it's hard to find things but I have a place for everything that I normally use so I have the general idea of where everything is at so usually doesn't take me that or that long to find everything okay all right at this point I need a way to figure out what data I'm getting because that's really the issue right now is I'm kind of I can't I don't know what the data is so I'm making these changes but I'm not exactly sure what they're doing I'm just going by the error messages so I need some way to get whatever this is is pulling in so maybe let's use that tester okay Jason says we need to do the need to do the loading check yeah yeah yeah you're right okay let's pull that from our post detail page yeah oh you know what maybe we are doing it higher up now I shoot we are I didn't even see that food let's make sure okay that's okay all right let me grab this and we'll go to hmm I thought I had the the page open where we could test out there we go I knew I had it someone I thought there was a link here no there you go oh okay I do have did I download that as a plug-in now I can't remember there we go I knew I had it up here okay let's try well let's get our test one let's get our URL the right one test one slash demo graph QL all right and let's test it with one that we know works okay great so we know what works now let's go with this one oops we're not gonna alright you know it for now let's take this out because we obviously we don't have that fragment available so we're gonna take that out for now just to just to test this first oops I don't have an ID okay let's see let's get rid of this for now and let's just put in manually we'll put in the ID that we have here let's see will that work no expected one aid I probably need to put this in like that okay no category was found with the ID - all right well this kind of works so if you see it says no category was found with the ID - I didn't mean to pass in the ID - but at least we're on the right track here in that it did look for a category with a certain ID for whatever reason I don't know what's up with this with this thing yeah why is that the ID okay okay Jason says there's a variables pain at the bottom okay she could do that I guess alright let's try to put in if we can whoops so he said so could I say ID like that alright I'm not sure if that'll work I've never tried to use the variables before let's see alright still tell me no categories found with the ID - hmm uh-oh I okay I see now what you're saying so Jason says they're all base64-encoded so the category would be category two okay thanks it occurred to me at some point that like wait a second normal IDs in WordPress don't look like this okay no category was found with that ID that's odd because I'm pretty sure that there would be a category like that let's go to those categories let's just see what our category IDs are you two let's check this one out it's not gonna she's not gonna show us our category IDs I guess not let me see actually let's go back the homepage was rendering before right we should be able to grab see what the IDS are from the homepage maybe so now let's check out Cruz whoa we just got the data with the egg there we go all right Oh actually I have an idea I can get the IDS like this let's do the what is it I can't remember the let's go with WP JSON WP v - all right cool alright so I just used the REST API to be able to get the categories we do have a category with ID - so category one has the ID of - we have a category with an ID of 6 that's category 2 we have an idea of 9 and we have an idea of 1 okay Jason said I could also add category ID to my query to get the actual ID okay so I'm I'm still not exactly sure why so I do have something with a category with akattak and ID of two so so that's not the issue it's not that it doesn't exist there must be something about the way we're querying this that I don't know that must be something wrong right it's a category I mean he's category the right path to go with I mean should we be using categories instead that's not really outposts work did it yeah alright ok my timer is up so we're gonna do another five minutes of question-and-answer let me check my time here might do another session let me quickly make sure nothing I don't need to respond to any emails or slack messages ok nothing looks nothing looks pressing ok so we should be good for another Pomodoro session after this let me check out where I left off I don't think there's that much in the live chat in terms of questions right now so I should be able to get through whatever's left okay Abu now says just to let you remember that I'm a keen follower and that's surely not long from now I'll meet up with you thanks for sharing with us your skills shout hi to all others in the coat house all right hey good to see you in the live chat and let's see quantity' says how long has it taken you to build all this Blake said day 7 yeah yeah so this is day 7 I haven't actually spent seven days on this almost everything has been done everything that I have done has been done during the livestream so I mean on an average live stream I get in like 50 minutes of coding and that's push it's not exactly 50 minutes of coding because even during this 50 minutes sometimes I'll check back in the live chat so somewhere around 50 minutes of coding so I mean it's less than when we say seven-day day 7 then it's less than seven hours of has been put into this project in terms of what I've done now we do have pull requests that have done a lot of stuff so it's kind of hard to gauge exactly how long the project is taking in - in terms of real like hours worked because I don't know how many hours you know everyone is put into this who have been doing the pull requests but I just like to count it by days just so that you all can if you want to watching them in order then it's easy to tell near the sequence of the videos actually I can so I have I do track my hours let me see how many I have for this projects bulletin reacts okay actually so I have listed here 10 hours total for this project so so I have done some work outside of the livestream because I've I've tracked 10 hours so for me it's been 10 hours and now I lost my live chat there it is Blake says I like the latest post yeah so on the I don't know where we put the the page so we find it so Blake caught that okay so Jason says what I'm doing should be working alright so we'll have to it's probably some silly thing that I've misspelled something or it's out of place oh okay awesome so Jason just posted something I'm not going to read it out because it'll be weird I can copy and paste it alright Marco just says hey Marco how's it going thanks for thanks for joining us here for the stream so let me copy what with Jason just put in the live chat so you all can see in case you don't have access to the live chat right now is I think this might help us out this might be our answer so down oops I can't put it down in the corner right because my face is there and you can't see it so let me put it up here okay so so I got so basically this query that he's giving me saying it you could do it's a post query but it says where category ID is in this case you know we're using six but it could be any ID then we're gonna get everything so I'm gonna test that that out right now but if that works then that is probably going to be the answer to to what we need to do here okay and he does say that that that that particular query uses the actual database ID not the base64 encoded one so we will have to change some things up to make sure we get that ID but that shouldn't be an issue that should be a pretty easy change alright so let's go let's go here and let's try this I don't remember if I had a category that was six so let's see whoops whoops I messed this up that's weird that that character came in all right let me clean this up a bit let's see how we were doing this before all right so we need you like this okay let's try a different ID so we knew the two wasn't was one we had in there hmm nothing those edges yeah need an opening bracket jason says can you make sure you have posts attached to these categories I do that I have posted tattoo there I was actually I was getting the posts earlier before I made some changes so we can double-check though in with the WordPress API does it say here I think if we look for our posts it'll tell us what category they're attached to categories okay so we have a post attached to category one wow we did have a category six okay category two okay Marko yeah the data is fetched from WordPress and that we in the past we've used the WordPress REST API we're actually using the graph QL API that Jason here and the live chat has actually built a plugin to give us a graph QL API so that's what we're trying to work on now are they published posts I think that they are published they should yep they're published okay what is going on now I lost where I had it here it is all right let me let me see if we get any posts like this why are we getting two posts okay Jason is asking what version of graph QL Milan I'm on 0 dot 0 dot 17 should I upgrade would that help then maybe that's the problem I can't upgrade it shouldn't take too long and I'm pretty sure I forgot to restart my timer so let's do that okay yeah let me let me upgrade then cool okay this is actually awesome so somebody had asked i've asked me on twitter let me check and see okay so brett had actually asked on twitter if i could demonstrate how to get the graph QL plug in and get it get it working on wordpress so let me demonstrate that now he actually asked if i could post about it but i'll do maybe i can do that one day but at least for now I can demonstrate you know on the video here how to how to do it so let's go here let me refresh to get the releases hold on release okay so let's download this source code so you need to do the plug-in you need to get the zip well yeah I'm gonna get I said I think it could work either way but I did it before with the zip and it works so let's just stick with that waiting okay let's save this now we're gonna go into WordPress to our plugins and we're going to add a new plugin I'm going to click upload plug-in at the top and then choose file and now in our downloads we can click on the zip file that we had just downloaded we're going to open that up and install that and I don't want to activate it right now I want to deactivate the other one first so I don't cause any weird conflicts not sure that it would cause conflicts but just in case let's see so this is our version 17 and we're gonna deactivate that this says version 19 but I mean obviously you saw we just downloaded version 20 so it's probably just in the documentation so let's see I'm just gonna change it here just so we know so 20 update so now it should display properly yep so now it says 20 let's activate that now you Brett hit us about actually downgrading so if you did want to downgrade you could go in and just go back to a previous release and you would just download the zip for that release and then upload that and use that as the plugin so it's the same process you just pick whatever release you want and make sure you don't have both of them active at the same time so right now this is active I'm not sure if I have to do this but I'm just going to go in and flush out the permalinks I'm not sure if there's an easier way to do this but it seems to work by just clicking to a different permalink setting saving it and then going back to the original probably don't even have to go back to the original if you don't want to alright so now let's try this out well first we'll just see if it's working great all right we're still getting data now let's go back to to this see if we get this to work no still no data okay [Applause] maybe category in category name all right so that's I mean it's there it's available let's [Music] Carlos says this live coding is nice it's like having Stack Overflow helping you code yeah for sure I get a lot of help from the live coding so I really hope that I helped some of you or at least the other people in the stream you know help you with their expertise but I definitely get a lot of help from this so let's see that pose you know I kind of want to check whoops let's see where this is uh that's kind of follow I really want to check this out just in case it would take see if it'll take that and I didn't all right so so this isn't working for some reason so we can get something else to work to push based on the keyword search let me try to zoom a neogeo can see got a great array of category IDs used to display objects from one category or another so you use category slug oh let's try this and then we can this if this works this would be ideal because then we could use the category slug so we should have a category slug of category one I hope this works now I know still all right what is going on see if I can get anything to show up like this oh that's okay to automatically fill that out oh man okay let's see alright so Jason has checked this out says the category name is also working locally okay so it's working for Jason so I must be doing something wrong on my end here it's like I said usually when stuff like this happens it's it's just hmm it's just something little all right so all right so Jason's given me something to paste in here let's try this out let's get rid of that okay Wow that's interesting why is the categoryid 43 where are we getting let's see where we're getting this for a categoryid oh wait a second why is it still pooling data oh man I know what the problem is now I apologize to everyone that had to sit through this I never hit the button to set the endpoint I'm almost positive this is what the problem is all right if you all want me to just quit live-streaming forever after this I'll entirely understand so let me know oh my goodness that was the problem the whole time everything that Jason was telling me was correct and I just never reset the endpoint so it was still pulling data from Jessie while calm and of course nothing we tried worked because I had different categories and IDs oh man yeah alright so if anything this is this is a good example of not giving up and realizing that it had to be I knew it I kept saying it had to be some little thing that I did wrong that had nothing to do with the plugin that Jason had made all right okay I'm gonna calm down a second okay this is great news right so it works and not only that but we found out because it didn't work at first we realized that we can use the slug instead of the ID and so this is actually gonna be better than it would have been otherwise right so it's it's not I wish it wouldn't have taken me that long to figure out what I was doing wrong but we're gonna have cleaner URLs now because we're gonna be able to use a slug so let's double check you gotta find the good and stuff like this or else you just will want to quit right okay so let me back up here a bit and let's see categoryname yeah this is what we want okay so let's see if we can get it by category name great look at that okay so we got our post by category name so let's go back into our our app and let's switch things around a bit so we can get this this slug and search by that and everything should work okay yeah and thanks Jason for sticking around and trying to help out for that long that was awesome thank you and it was my fault the whole time okay all right where's our code at let's do this okay so down here let's switch it back up to say slug and let me say slug there we need to change it as well and our apt je s I think I actually want to keep it as category then category ID so for now let's let's do that but I just want to change this to slug okay let me save I don't think I was saving it before okay so let's save that here and this should what are you getting the data back in chequered our data format so he did have it's going to be different it's gonna actually be under posts and not category so let's see so we should probably move this out entirely so we shouldn't even have this in the categories anymore this should really be in posts all right let's let's do that let's move this to posts and we'll call this and put it in here uncle I will call this get post by category this makes more sense I'm gonna breviary so and we'll do this well this is called a tag template right is that what it's called when we do this with the template literal right on the end I think so I'm gonna do a query and it's we're gonna go get by cats and now we're gonna say posts oh but we need to put in we need to do this as well so let's go with slug oops dollar sign slug and then what do we want to put string was that it string and was there supposed to be I don't know if I'm supposed to be an exclamation point at the end we'll find out really quickly if it doesn't work okay let's see now below that we want to get our posts posts and yeah let me double check post where category name okay oops sorry I keep going back and forth okay let me I ought to just copy this okay okay we're category name and it's instead of category one we're gonna say it's going to equal slug we do that the dollar signs slug okay slug and then we're gonna have our post at which we can double check the fragments and make sure that that's what we really need might as well do that post that a edges node yep perfect that's what we need okay let's go back to the post okay okay that looks all right let's see all right we need let's make sure I did this right here now I need to change I knew there's one more thing we had to change so get posts and actually there's two things we need to change because we got to import that oh okay now we should be good oh yeah okay oops does not cane oops I messed up one thing we switch this over to posts okay oh hey what did I mess up here let's do it still hardly that so I could see this error again link now how did I mess that up I didn't even touch that hmm all right we didn't even change anything let's see this is we're not getting category anymore on the category route just posts of that category okay all right did we change that then get all categories we should be right we can get rid of this as well we don't need this anymore right is this the one we didn't need okay Jason says I think you're trying to pass that data down as if we had fetched the category but we're not anymore I said we should be right I mean we still we're still doing get all categories here right we're still calling get all categories we didn't change that right get all categories from categories on the category slug route whatever view that is whatever you are we in this is the this should be the home view that's what's confusing me is it nothing say component side component render I mean this one was working you know before this was actually working don't a category we take the slug and get the post for the category or don't get the category object itself we should yeah we should be could it be so I was getting I noticed in the and the slack chat for for the plugin for WP graph QL someone was having an issue with using Apollo and it was sending it was saying that he was sending like an options request instead of a post let's see could that be the issue could in fact we be getting back some things that we shouldn't actually let's see what we should do anyway to avoid this error and actually display something to user in case something goes wrong we should check to see if these exist first anyway so let's put that check in right now okay Jason says the version zero point zero point two point twenty fix the options thing okay that's that's awesome okay so let's let's go into our drawer here that was side component drawer yeah all right so let's go in here and we're yeah down here let's check first all right let's try to do the check let's see if this will be sufficient good ok better so instead of an error message now we'll get this loading logo not working okay we'll get the loading thing we are we're gonna switch back to the newer logo as well at some point okay now the good thing about this is since we don't have an error screen we can actually look in our dev tools and see what data we're getting and what responses were getting so it looks like I'm getting a 500 error okay so this makes a lot of sense as to why we're not getting the data so it's much much easier to see what's going on when I mean error messages are great but it's it's much better let's check the console fail to fetch yes response for pre-flight has invalid HTTP status of code 500 I said HTTP really weird there y'all can laugh at me a few hon okay Jason just said guren in the live chat okay yep so it is still doing the options thing for me well it's sending the options right and that's what's I guess causing a try updating from the master branch instead of that release okay alright we're going to do another update to the graph QL plug-in so everybody who's still hanging in here and watching thanks for sticking in there this has been kind of a frustrating episode but I mean I'm I'm still smiling I'm happy we're making progress but I don't know what it's like on your end watching if it's frustrating or not but let's go where am I I need to go over to to here and let's grab the master branch right is that what juice from the master branch okay and we can see let ladies commit two hours ago so this was very recently updated and let's grab the zip so we're going to download the zip and save that great that was really fast and now let's go into our plugins and to add new plug-in and file we're gonna install that just like we did last time and we're not gonna activate it yet because we want to disable the other one first so let's do that so we're gonna deactivate this one I wanna fact this one did have the correct version number already and we're gonna activate this newer one all right and now let's let's flush those permalinks just to be sure alright now let's give it a shot my timer actually did go up for my session but I want to see because if this works we're so close to getting it to work I think we can just be done and not do another session so I'm gonna run over just a little bit and see yes yes it worked it worked awesome ok cool so Jason had in fact already fixed the issue it's just on the master branch and it hadn't yet gotten into the version of the plug-in that we had installed so awesome awesome great ok now here's the other big test if this works then we're just going to take some questions and we'll be done for today so let's see No ok what's our problem oh we didn't change here ok my fault my fault we didn't I didn't change these things right because we're not getting category anymore so instead of category let's just call this post pose right okay we're actually we need to change up how we're doing this should we map through this now we should because this is giving us multiple posts so we can't just say posts idea won't work all right let's check our render I'm gonna save this it's not gonna work but I'm just gonna say this and I'll forget let's go to our render post component and see where we add components where's render post set where am I I'm missing this somewhere oh where are we pulling that in from render pose from render pose preview okay those TV what is going on here rendering render those render for you okay we're just bringing it in we're calling it something different all right okay so we have the mapping going on here but what we could do is just skip this component and go right to our post preview and do the mapping in our category that's what I think that's gonna be the best way to do it so let's do that so we'll bring in our post preview and our render post preview will copy let's just copy this we need to change a few things but this will at least tell us what we need to pass in save us some some time going back and forth so here we're going to replace this with this now we already have our post here so we probably won't need to change this post edges map we're mapping over all those posts let's double check our data here just to make sure it's it is in fact what we want post edges yep that's what we want okay so post edges map our post preview post node ID good this should work this should work date and as your nice I think this will work and this this should work yeah let's save this see what happens those preview is not opes we didn't bring in post preview so let's change this to post preview those preview we might be able to get rid of this render post preview component I don't know that we're using it anywhere else so that's good we might be able to get rid of a lot of code here Oh what did we do okay pose edges map property edges can't read property edges of undefined okay what did I learn it a mess up here so we're grabbing pose this props data posts all right let me I want to see what data we're getting so if pose let's see if that okay let's see what with data we're getting passed down here and our props yeah we should be okay we're not passing the slug what happened here I messed something up and we're not we're not getting the right data okay let's go back to our app let's see category slug let's go to our drawer and make sure we're passing in oops you know what we didn't change this we need to change this to slug that's our problem okay now let's let's see what's going on here oops alright let's give this a okay just do still nothing but hopefully we get something that can help us whoops here we go okay so we have some data now do we have we're still getting an error still getting an error all right let's see what we got oh it still gave us this URL what happened there category knows love oh I know I know what I'm still I'm just refreshing the same page let me see man okay the euro is still using that d oj Jason already caught that so sorry I didn't see that looks like jason has to leave thank you so much for all your help I'm we're a few minutes away from getting this so thanks for sticking around I really really appreciate that okay let's see all right so the problem was I was trying to refresh the same page obviously that's not gonna work okay so let's see so did we get another error let me do a hard refresh before I start changing things okay now let's check out what happened we okay we did get an error unknown fragments oh okay what did I do here I suppose that's post that's yes I wonder why that's saying it's post data is an unknown fragment hmm all right well let's you know what let's just grab this instead of using the fragment we'll grab this and just in case and see actually we should grab the fragment cuz that's what we really need so let's go into the fragment I don't know why we be getting an error from that but this is something easy that we can test okay now we don't want categories front post area save that let's see what it says now alright it worked for some reason it just didn't like me using the post data in there I don't know what I did maybe I spelled it wrong I don't know and I didn't notice it alright so let's try it out here oh-ho nice we have any on categorise yeah we do it works ah it works oh man I'm exhausted okay so we did finally get it to work thanks in big part to to Jason I know he's not he's not in here anymore watching but definitely it was a huge huge help so glad he decided to watch glad I decided to tag tag the plug-in in the Twitter post I did before the stream so okay let's let me check through the live chat to see if there any questions I've been keeping up with the live chat more than normal since I was having so much trouble so I don't think there's too much in the live chat but if you do have a question you want to throw it in there now that's cool I will still try to get through all the questions I know it's been a long stream but I actually got into work late today so I don't have a problem with staying later than normal okay I do want to check my phone and make sure my wife didn't call me let's see No all right she called me earlier he couldn't find her keys so she can't get into the house without the keys so she might stop in to get them from me we'll see alright okay actually you know what I'm gonna do first I'm gonna commit these changes first because I've been forgetting to commit the changes and I don't I don't want to have anybody try to submit a pull request without these changes and then it's just gonna cause a lot of merge conflicts so let me find there we go that is all right I changed a lot of stuff commit and let's just say on display all right that's not exactly everything we did because we had single category pages before we just changed how we're getting the data so that we could grab less data but that's fine with me my brain is fried at this point I don't want to think of a better commit message so it's interesting we still didn't have linting going on on commit so I've totally forgot to check out why that's happening so for now we don't have it I guess I could do lint whoa we have confined plug-in use it in four pretty sure I installed all the packages yeah it did weird okay you're I'll show that again alright great it worked this time okay okay now everything is and get um great so now we can check out the questions whoo all right I'm gonna scroll way up okay I think I figured out where I left off maybe I didn't let me keep scrolling okay so right around the time when I realized my mistake of having the doing all our tests for graph QL and having it pointing to the wrong WordPress installation so Abba now says hey Jessie we're okay with the challenges we're happy at least you found the error along the line so thanks X is saying that Marco says let me go back in the stream and see it again Patrick says if I had a dollar for every time something silly like this has happened to me I would be a millionaire thanks Pat sir Evan L says Jason you are tough your contribution and participation has so much lifted me yeah definitely Jason was oh man so much help really awesome I'm so glad we decided to use the WP graph QL plugin because jason has been super helpful and yeah yeah just amazing so yeah I definitely I read I wish I had more time I'd love to contribute to that plug-in so if any of you are interested in some PHP stuff check out that plug-in and see if you can contribute and help Jason out cuz I mean he's he's been a great help to us here in a stream so hopefully at some point I'll be able to contribute to to the plug-in as well okay all right so I think I think this is pronounced yarn its Jo RN but the O has a little slash through it so correct me if I'm wrong but I think it's yarn says I sympathized recently I had two one-hour hunts in one day we're googling the air is brought up just a few esoteric instances that had nothing to do with my problem man I feel for you there I I know how that is that's just I can't believe that happened twice in one day two one-hour hunts yeah that's that's tough but it's definitely it's really encouraging to hear do you all have same problems like that okay okay Jason did say I said hey this was super fun but I have to step away happy to chat with anyone at any time it's Twitter at WP graph QL also WP graph QL calm and then the slack you can go join the slack channel WP gql - slack Heroku app com awesome okay all right a boo now says thanks so much congratulations to all say hi to your beautiful baby and wife oh thanks Evan oh yeah I I will do that yeah I couldn't I was late this morning to work partly because I just couldn't I couldn't leave my my kids I had the two littlest ones were still at home they don't go to school yet and so they were home when I was just having a good time hanging out with them and finally I had to leave but they're just so cute okay all right John Hanson said I have found getting Adam eslint and yes linfer react JSX set up to work together as to edit that can be a bit tricky once set up it's great helps point out errors I know you know what I've had several of you have suggested that I do it like that and I totally agree I really do want to set it up like that I just I just have not taken the time to actually do it I either forget about it when I do have the time or I just have too much going on to be honest with you this week has just been crazy with like a lot of little things that I have to do a lot of different projects and I've just been so scattered it's just been difficult for me you know trying to get to anything I'm just trying things are coming in and I'm trying to get them done because I have to and I can't really set aside the time that I need for some of these other things so hopefully it'll slow down a bit we got some projects that should finish up here soon and then then I can focus more Mandella effects is what's the link to the plugin yeah let me copy that in for you into the live chat I had that here let's copy that I'm copying it in right now if you're not in the live chat it's you know look at WP - graph QL on github okay so it's it's like the the name I was trying to pronounce before is it's like urine so okay cool I have to work on my pronunciation urine if you don't mind me asking where are you from I'd like to wait to be able to pronounce I guess and it would help if I know the general area and then I could maybe have a better shot at pronouncing names like that my my coworker just waved to me I don't think you could see it from this camera but he just waved to me in the door he's the one that I said a few days ago they used to hang out with the wu-tang clan in the late 90s he came back again let's see okay okay Norwegian so it's so it is it's urine and correct me if that's wrong but I think it's urine from and it's Norwegian okay awesome I'll do my best to try to remember that if I mess it up again please let me know don't let me slide on mispronouncing names because I I want to I think it's like being courteous to pronounce someone's name correctly and to take the time to try to learn it it shows respect so I do want to do that so I won't be offended if you remind me again about how to pronounce your name I do want to get them right okay I think that's it I might I'm at the bottom of the live chat here this has been it's been difficult working through all this but this has been a lot of fun it's a really fun stream so it feels great whenever you finally get when you finally get something working alright your incest close enough I'm going to look up my Norwegian pronunciation and and try to get it get it right maybe oh there's there's got to be a youtube video or something of somebody pronouncing your name correctly I'll get it yeah but thanks for sticking around there's not that many people that actually stuck around to the end and I totally understand this has been long and crazy but thank you all for for being here and helping out in the live chat I will be back tomorrow what's tomorrow Thursday yeah Wow this week's going fast I'll be back tomorrow probably sometime around 2:00 if I can get to stream in a little earlier like 1:30 maybe I'll try that because I know there was someone who is getting too late for him so maybe I'll try to do it earlier if I can but until then have a great day I'll see you tomorrow