Upgrading to React Apollo 2.1 (P5D50) - Live Coding with Jesse

Key Takeaways

hey everybody welcome to live coding with Jesse I'm Jesse and today we're gonna have a short stream because I forgot that I told someone I would meet them and check out their computer and figure out why one of the websites I built wasn't working on their computer at noon so it's 11 a.m. here right now so that means the stream has to be a little less than an hour their office is just right around the corner for mine so it shouldn't be if I can finish like three minutes before noon that'll be give me enough time so apologies for that I know we usually go longer than an hour I just I literally I remember five minutes ago so it just totally slipped my mind and I never put in my calendar so anyway we're just going to get started right away I okay yeah I know there's probably not the normal amount of viewers in here yet I like to wait a minute but since we have a tight schedule I'm just going to go on probably just going to do one Pomodoro session and then questions if there's not really that many questions then maybe we'll do a little bit more but definitely we'll get two full sessions in so let me start up the clock today we are gonna upgrade my package.json so today we're gonna upgrade to the stable version of Apollo graph QL 2.1 so let's go to where we have that right now so it's the package name is react Apollo so right now we're at two point one point Oh beta zero and we had thanks to Harshit we had some workarounds happening that enabled this to work but at first when we tried to use this there were some issues so now that this is no longer your beta we should be fine to use it so I'm I think I should be able to just do this change that and then run yarn if I can't just do this somebody let me know so I mean what we're gonna do we're not just gonna install this and say hey we're done today we're gonna install it and then we're gonna go in and update everything that's still using the the old way like using a higher-order component we're gonna update that and try to use the new way whenever we can which if you're not familiar with a new way we had used it on some components before but now we use it and I'm gonna link to you a blog post that explains more about what is new and why we might want to use this so I'm gonna link that right now it's in the live chat if the link in the live chat does not work try copying and pasting it sometimes if you if you click right on it it's it doesn't work all right so let's try this and then we'll check the following correct for your dependency we got some morning's about peer dependencies but I think I don't think that's a big deal follow client okay let's see you know what let me double check the Apollo I thought I had it up on my screen the github repo I guess I must have closed that said so I'm gonna check this really quickly just to see what the with the versions are I guess we could try to do update Apollo maybe we could update the other stuff I mean it looks it looks okay I think it looks alright let if anybody notices anything weird with this or notices of the look something wrong let me know but I mean we've already had if we were installing it fresh we would want to install some other stuff too well we already have all that other stuff so I think we'll be fine I mean if we really wanted to we could try to update all the other things yeah let's try to do that what is that you're in command oh no I didn't have the right camera on sorry about that so sorry I can't believe I did that as in such a hurry ok so basically we have react Apollo all I did was type in yarn after changing the version number so that's what I did but I think I just want to upgrade the other a packages that have to do with this so like in particular these Apollo packages graph QL you know these ones so I just can't remember is it yarn upgrade or yarn update if I want to update packages no need of upgrade Harshit says it's good no need to upgrade those other packages oh yeah harsh it says they're separate I know they're separate but I'm just wondering since the last time we added those are there updates and should we just go ahead and update them right now okay aditya says you're an upgrade interactive latest okay and that'll let us go through right and see saying what we want to upgrade right now all right let's do that then all right so let's see what we have all right this is cool I never did it this way this is really cool choose which packages cool I guess what we should upgrade these material icons since we are now are at the latest version of material UI I suppose like we would want the version to match so all right a lot of these look like minor stuff obviously because they're green Oh more choices here yes yeah I don't want to mess with any with some of these that are red right now until we read up on them yeah so what's now I have you selected I'm good to go with Enter is that it okay okay double-checking the live chat here cuz I know if I'm about to do something really crazy you all let me know so there we go so let's try this I really ought to have a schedule to just update packages so I don't end up having packages really on a date maybe I should just set a day like every week we're just gonna update packages does that sound like a good plan what do people normally do is there for those of you who are developers you're working or you have worked with other developers before do you is there usually some schedule or what with some way to keep these things up-to-date what's the normal thing normal way to do it this is one of the downfalls of me you know working by myself most of the time when it comes to things like this I don't really know what the standard is Harshit says you need greenkeeper bought package maintainer x' use greenkeeper bought or some sort of not in github some sort of bought and github okay alright cool have to look into that I mean realistically we have a lot of stuff going on and I know we have outdated packages running on things and it's the more we make the harder it's gonna be to manually keep up with that alright so let me you know what on my other screen I'm going to type in green keeper bought and that way I'll remember it after the stream because I know I'm have to go right to a meeting after this so I'm likely to forget unless I already have it on my screen okay so there it's it's on my other screen and oh cool harsh it says the bot makes a pull request every time a package changes that's that's amazing that's really cool I'll all right if you learn nothing else from today's stream remember greenkeeper bought will automatically make a pull request every time a package updates in one of your projects that's amazing that's really cool all right well looks like we have everything updated first thing I'd like to do is just make sure that things are still working and then we can actually go in if we need to correct a problem we will correct it if there are no problems we'll go in and upgrade to some of the newer stuff that we can do now and hopefully that will help help the project to be more like uniform right now we're using two different ways or I should say we're using the new way in some places and then the other place it's just broken because I I'm pretty sure it doesn't work all right so we're not using it here on this page so that wouldn't really be useful to go to let's go to a page where we are using this all right nice check out these error messages all have to do with material UI and I think so basically we haven't changed yet so I believe neeki open an issue for this but when we upgraded to the latest version of material I beta we're now getting a warning because of this underline I think on the inputs so I haven't fixed that yet so that's why we have all that read there and I can run end grukk as well and they all check it out for yourselves there we are okay so it looks good also I have all the links now on the About section they all should work some of them are external links but all these links should not work and I have started in on academics so I'm going through it's taking a while because I'm going through in some of these places have like submenus you can't see them here they're on the the live site right now so I need a way to bring in some of those sub menus I'm still thinking about how to do that but anyway so it's not just these pages like for instance I'd go into this consumer information page and then there are links here that I'd go through and make sure each one of these links also works so it's taking me quite a while so that's what if you're under incarcerating I'm spending doing that with links or going through a huge Excel spreadsheet that has every piece of data that we've gotten out of the database and I'm color coding ones that like I need to input or I need to ask my boss about this is whether or not we're input and I'm trying to get rid of things that we're definitely not bringing over or we already have brought over because I want to make sure I don't miss anything so it's a little tedious but it's really the only way I can be sure that I haven't missed anything yeah because at the end of it I should have nothing left in that spreadsheet everything should be deleted and if I have anything left I know I'm not done all right so this looks good this works so I'm really trying to think if there would be I guess we could try out a profile a faculty profile just to be sure I don't think we're doing anything differently yeah that works okay now let's go in and see what we're doing that's so different let me let me commit this first we're gonna get add if you're not familiar with yet this is you do it you'll be doing this routine over and over over again when you start using it and it just said hey hey how's it going so you do a get add to stage your files that you want to commit now the follows are staged and then you do in our project we do yarn CM but normally you would do this you do get commit and then do an M and then put your commit message in then type answer we're going to do yarn cm all that does is it's exactly the same thing it just asks you a few questions to help you make a better commit message so all right well what were using when we update stuff I can't remember what it was was it Shh was it chore or build it was build okay oh that's cool yeah it says right there dependencies okay all right so we're gonna go to build I'm just double-checking these I never read these ones down here very cool all right sure so now we're gonna write a short description and this is what you would normally put in the parentheses after the EM flag if you were just committing using the normal git commit command and we're just going to say update Apollo packages the latest versions okay yeah so I mean we updated a lot of packages if anybody really wants to know they can look at the the log of what's changed in the package.json file but in general it was Apollo related stuff that we we did updated there are no breaking changes at least nothing that I've seen oops I don't have to do that just in tune and it does affect an open issue so let me reference this issue which one is this I was just reading through it issue 68 it should pass we're definitely gonna keep getting a warning until we fix all the stuff we need to fix from the materia upgrade awesome we're gonna push this up to get up with a get push command and they also you there your so you can check out that package.json file on your own now just to see what versions were running now and and what all we we just updated and see so hard just mentioned and the the issue that I just referenced was an issue that Harshit had made whenever we first had to kind of do that work around to get the beta version to work and the issue basically just says hey take that workaround out once we once we do that you know I can show said amend a file to a commit okay so hard let's um if you can if if you have time to help please let me know if I'm doing anything wrong but I'm gonna try to attempt to remove that extra stuff that we no longer need and I'm gonna keep an eye on the time let me see how much some of six minutes okay you know what let's I only have six minutes left so I'm not gonna remove that right now because I think it might be it'll be more useful to everyone watching for me to just go through some of the new stuff because not every I think it's it's probably gonna be a rare occurrence that somebody used the same workaround that we did so but they will be using some of the newer stuff here so let's let's do that for now and then later on I can remove the other stuff so let's just look at some of the files so we're gonna go in our pages folder here are pages so I believe page das has the new way to do things trying to make some space here so page Jas yeah here's the new way so we're using this query we're using this query component alright and that's where we're we're getting our variables and making the query so yeah so in our get initial props we're passing in from the route right the ID and the type which is what we need to send to WordPress to the graph QL plug-in and WordPress to get the right data we're getting this from our server it pulls it from the URL from the route once it goes in here and to get initial props and this is an XJS thing you can't use this regularly with react then it it's say these two props so that way we have access to this down here for a query component so we can pass in the type and the ID and then what we get back is we do we do some stuff to the data here but unrelated to the plugin we're working on right now or graph QL and then we just post the content this is meant to be a generic component to where we can route a lot of stuff into here and it will display the minimum data but what we have been doing for certain pieces certain types of content we want to have a more specialized template right so each one of these pages you can consider it like the the template file for that that site what's hard saying global X is still there I said to remove a third time out sorry I should I guess I just always forget to remove it I'll remove it right now there we are the global X was just there for testing so we don't really need that there I had totally forgotten that you said that now that you bring it up I remember when I asked you about it but all right so let's go to one page that I believe we did was it the faculty page okay I already switched the faculty page over to the query is it news there is one page it's still using the old the old way okay good here's the one that's using the old way so let's I have the the font size pretty big but I'm hoping we can do a kind of a side-by-side and see so this is what we we used to do so we we pass the data like this okay so we're still passing right the the ID and we didn't we weren't dealing with the type because we were sending it directly to the news query and everything in the news query was was all the type called news so let's let's just switch this over this I guess would be a good example of just how can you switch over component quickly so right off the bat we need some different things right we don't need page query anymore I'm sorry we don't need news query anymore I think we can do this with a regular page query okay the the difference in queries and only we need to look at it but basically this query allows us to pass a type along with the ID so we're just going to use this query and it'll really cut down on the amount of queries that we need and I'm gonna say page I mean I suppose I could just copy and paste this so instead of graph QL we're importing query and compose and let's see we still need what's for a component all right cool that's what we need now let's scroll down let's scroll down to the bottom and get rid of this stuff first so now instead of all of this actually let's just be easier again to just copy and paste so basically all this graph QL stuff can go away and I'm just going to change this to news okay since this component is news so now it's a bit more clean already and we just need to add in its query component so I think it would be best to just copy and paste this query component and we've already run through what this does and see we're doing anything different now we're not huh just double-checking oh okay I see what we have we do have a title so let's put this down here for now and then add in this extra this extra piece so the difference with our news component is that we're adding in a title so let's pull this down and make sure that we also add in our title and we're gonna need to wrap this in a div so this should be fun to wrap everything in a div I hope and I will say that okay so title let's see we're gonna find where there we are there's that last piece of data we need to get rid of that was in there from before and we need to make sure that we are getting back the title Wisconsin equals data and let's bring this back consonant and I believe we are bringing title in already we'll find out in a second then we can go check the query is not working all right cuz it's not used yet all right so down here instead of data news edges right we're gonna use title okay and the reason we can just do title right is because well let me see if it works first and then it'll explain it I don't want to explain it to you if I messed it up all right I think that's all we need to get this to work whoops I got some expected to be in the same line that's that's fine where did that come from whoops that's my fault I I shouldn't have put that there they were on different lines so I didn't realize what all was going into this is it's not just data see if I can show you here so it's the the data is this approach so it's within data we're looking up this props type edges node content so what we need to do instead is add another that's gonna be and let's put it here so we're gonna say instead of content title okay I think it's called title so I think that'll work we'll find out in a second there we go and I did see a question about that node edges 0 that's the the structure of the data that we get back from the WP graph QL plug-in that allows us to use graph QL with WordPress so that's the structure so that's that's why we're working with it in that way and that's kind of a lot to do so that's it's it makes sense to just use data and title down here instead of having a do you know everything so let's go to new zas which hasn't been working since we switched over and let's see if it works we don't have any links to it so I'm hoping there's something saved in my browser there we are No and this good country property loading I'm gonna find oh let's see did we have something I guess it wasn't a floating okay we can remove the loading so we have two loading areas here that we don't need okay and do we even need that data no we don't right we don't need that either okay so forgot to take that out okay I should have kept track of how many lines we were using in that component didn't remember that I let's try it out no 1621 that was odd then you refresh okay there we are I can offer you an under 500 lucrative minute surrender collection shows you some I said stay 32 it's possible we might have to make a change in the server because we were probably just sending oh you know what we never changed our get initial props function there we are now what we can do actually do we need that this Frost we don't need this prop site right because we know it's going to be news News is not defined because forget to make it shrink I think news was let me take the time okay I'm good on the time I'm gonna look at the live chat really quickly okay you are talking about the swipeable drawers and material you all right yeah I'm really excited about that all right let's see with a billing wrong here Fisher props a return ID I probably should check that I actually have a news item like this with this slug so I do have the WordPress installation open on my other screen so I'm just gonna double check on the slug here so I don't know if the slug is right or not I just copy and paste it just to be sure okay still can't read property edges on the fine all right what am i doing all right so let's see page query so we are importing page query let me double check the news query that we had just to make sure what we were supposed to pass is correct news yeah okay we are pulling in the title so that that part should work news should work let's double check our while we're here I guess we should check out our page query so type if we pass and type it should work here it should say news all right everything looks fine for that let's go back to our I guess we'll double-check the server and see what we're doing with news see if we have news in here so we did make some major changes to the server since the last time news worked I see some so a bunch of stuff in the live chat I'm going to end this in just a minute or two I just want to try one or two more things page news just go with we shouldn't really yeah we should be alright okay so faculty page type faculty I mean we could add in the type here if we wanted to it's not gonna make a difference though we're already manually putting the type in which we may want to end up doing at some point anyway and then maybe we could take that news component a little more reusable for things other than news oops hey a different error like that I don't think I've seen that one before oh and what's this when all else fails just restart your dev favorite all right same here [Music] mmm what did I break all right let me go back I'll make sure I didn't break everything let's chose in okay so that's working all right sue are taken to news what if let's just take this to page for a second and see if we can get it to render like that really still so news is being routed to page with the type of news what is going on see what time it is all right I I've got to be missing something simple I mean at this point I I totally bypassed the news component so are we getting back let's check our page query news I don't know what the problem is oh cool Nikki says I can just type rst to restart the server no need to control C and then you are never again alright cool that is a good oh it's just RS even better okay hard she thinks the workaround is causing the problem so remove babble plug-in module alias from package.json and babble or C alright this will be the last thing we try and then I'm going to stop so I can get in some questions alright it's so where's our PAC babble se plug-in module alias can I remove all the plugins stuff or do we need any any of this other stuff because it's just and upgrade next to higher version and then canary - oh okay so we'll actually need we need to upgrade a lot of stuff okay I'm just gonna remove all the plug-in stuff all right that's gone where's the package there we go where's my plugins all right harsh it was sorry I heard the bots got you be sincere its life and a lot of messages okay alright next Jas up oh okay he did all caps that's what we mess them up next James Version is important okay Babel plug-in module resolver is that what we don't need anymore I'm just gonna update neck next 5.0.1 where's next remove the canary - okay so you don't need that and then we won't need this module resolver plugin alright save that and let's do yarn Oh looks like I need a version for 5.0.1 interesting should I go down to 5.0 then or should I just move up to the latest version and then canary - okay you're saying upgrade next - higher version the canary - okay so we'll do the latest one all right okay so we've done that let me try this restart cuz probably need to do that is nice thanks for that one Nikki so much faster I'll just have to remember to do that cuz now it's like in my muscle memory to just restart it like manually shut it down and then start it back up all right cool wha-hoo it worked and it's not pretty alright well at least it worked excellent we did route it through the page component so let's let's go back and switch it back just to be sure that it works with the news component although you can't get that might be we might not need the titles we might have been getting dual titles anyway alright server and let's route it back to news mmm all right I must have done something wrong then with that new one if it's still not working let's go ahead and just move this let's just take this entire get initial props function and move that over here and then let's change this back from news to this props type and then that way we could reuse this we may even end up renaming it at some point if it helps all right so we're not getting an error we're just not getting any data hmm interesting I'm not getting any data really weird all right one more restart and I'm gonna start answering questions while I wait for that if worse comes to worst I can just run this through the page component to get it to work and later on figure out hey why doesn't it work but hopefully this was you've learned something I mean there were some cool tips that came up most of them not from me so hopefully you learned something I'm gonna try to go through the comments now I definitely did more I worked on this more than I wanted to so I apologize in advance for if my answers are kind of short you're shorter than normal let's see Odysseus says how long have you been coding like five years it seems like I always say five years and I never change it I guess it's gonna be almost six years then since I've been streaming for almost a year so somewhere around there like five or six years Lamar says what spec is your MacBook very random question off topic right now I'm on an iMac but my my MacBook Pro is I think it's like the late 2015 MacBook Pro I I don't remember offhand would it would it has the the iMac I'm running here I think is late 2014 and it's like 32 gigs of RAM I can't remember the processor sorry about that if I had more time I'd look it up for you right now Aniki says how are you liking fury code with ligatures it's kind of cool I'm still not like exactly used to it I still see it I'm like I looks weird but I I think it'll be good once I get used to it and asks what the weather's like today in my city it's actually not bad it was about 30 degrees Fahrenheit this morning I guess in Celsius that's around zero right where's my my free code camp Fahrenheit to Celsius converter I don't even remember where I have that maybe that's one code then anyway and it's gonna be about 50 degrees Fahrenheit later on today so it should be you know pretty nice I think it's supposed to be sunny so I'm sure the kids will be outside playing as soon as they get home from school Stephen says Jessie first time being online watching since I started a new job Oh awesome I'm glad you could watch let let me know how the new jobs going I was wondering about that to know I hadn't seen you in a while I know you started so yeah yeah let me know I'm really interested John says the tension when you do your short streams the dev like yet there's so much pressure when I try to do a short stream like feel it and things like why can't things just work when I do a short stream they'd never work if you believe it or not when I first started streaming like on my own channel my goal was to do a stream than a half hour or less I don't know how I did it well I mean nobody watched back then so it was much easier to you know there'd be like one person watching so I could keep up with a live chat a lot easier Oh Mike Michael how's it going yeah it's almost over Harshit I can I can definitely see your message Michael say Colin John mr. John like like my daughter did on Friday Angie says Ola Ola Angie thanks for joining us and it says what's the first programming language I learned JavaScript I did like I messed around with a couple of different programming language but the first one that I feel like I've really learned well enough to actually build things in other than like your really basic hello world stuff is JavaScript I have done a little bit with Python Java C++ and C all in PHP what I always forget PHP of course I've you all see me do PHP stuff now Phoenix asked if this is over yeah it's almost over sorry about that it's shorter than normal Steven says jobs going great very heavy on WordPress some programming on the back end I'm the only developer on a team with a couple of freelancers helping so far it's going great awesome I'm so glad to hear that so just got back from San Francisco working with a company website that's pretty massive oh that's so cool that's really cool michael says going back through all the old videos for this project to figure out what exactly you're trying to do maybe I ought to go back through the videos and try to figure out what we're doing sometimes [Music] and this as well it's great you know so much languages I mean I I don't I don't know those other languages I just done a little bit of basic stuff with them so like I'm I'm somewhat familiar so I don't I don't wanna I don't wanna make it seem like I know more than I I really do these are says I was a regular watcher of live session for project three and then after I discontinued is I still can connect to this and from this onwards or should I watch all videos tutorial nice are I would say like you're probably fine you just connect with this and keep watching ask as many questions as you need to I just think at this point it would probably really hard to watch all the videos I mean this is video 50 in for project five so there's quite a bit of content so I mean certainly you can watch it if you want but I don't think it's necessary and definitely if you're going to try to watch my old videos put it on like two times speed or something it's just so much content Phoenix says I actually have a degree in IT was starting free code camp to get at it again I heard a lot of good things you have any pointers I would just say my biggest pointer is when you're starting out again like just try to do a little bit every day so it's much better to do let's say a half hour every day with free code camp or whatever you're using to learn then they're like wait so one day a week like on the weekend and try to put in eight hours you'll remember it a lot better so I mean other than that like I could probably say a little bit more but I have officially no time it is 12 o'clock noon here so I'm gonna have to end the stream last question how old are you I'm 32 years old Junaid says you're doing great man thank you you're welcome and let's see I thought I I missed some stuff I did miss some stuff okay I remember this comment cuz I glanced up and saw it and it was crazy in a good way I know bored savage says Jesse makes major changes in my heart in a manly way of course and with that comment I will end thank you so much everyone sorry that it was a short stream and that I had never really figured out exactly what the problem was sometimes that happens and oh and I just saw your question I have to go to another meeting though so just ask me that question either in the next stream or like direct message it to me on some social media thing and I'll be happy to answer that all right I'll see you all tomorrow thank you