Apollo GraphQL for iOS in 7 Steps

hey everybody thanks for tuning in today we're going to use a palo graph QL and iOS to call a remote graph QL server so we're gonna do this in seven steps outlined right here so we're going to install Apollo using the Swift package manager the new Swift package manager the exciting add syntax highlighting plugins which is optional but I'm going to show you how to do it use command line interface to download the schema and the schema is a big JSON file that essentially maps out your graph QL calls for an Apollo app so the specific JSON format there's a few different formats I'm not going to get into too much detail because it's pretty involved too you know you have to know a couple different technologies for this mounted you have to note the seed the next that leads me in the next step create queries and migrations in the graph QL files you're using a different language there but it's not a difficult one like like if you if you're good with Swift you can you can use this you're gonna create a API dot Swift file using a run script that's in like that you put into Xcode and it's all provided for you by Apollo there it's a little complicated but Apollo makes makes up this using this technology a lot easier we're going to add an instance of Apollo to the app delegate with our link to our remote database and then we're going to call the Apollo methods and RV controller and as you see here you're using command line interface remote graph QL server and the Apollo framework so let's get started and we're going to work with the brand new Swift package manager but before we did that I want to introduce you to the starter project here here you have the main storyboard which always take forever to load dude but in it place you have a tableview controller and you have a custom cell that has these labels that you see here in the and the storyboard and they're already all linked up and in the tableview controller is just generic tableview stuff will be adding messing with all these functions so go to the link in my description if you've ever worked with my videos before that's how it works in the description and get the starter branch of this github link or whatever the link will take you straight to the starter branch here should so yeah make sure you download the starter one or you know you download the whole repo and then check out the starter one however you like to do it citing unless you're watching this in like 2025 and it's actually like oh well time I used the package manager and you know 15 years we just beam the beam that's the package is in with our eyeballs like something but yeah so we're gonna go file here Swift packages add package dependency and what we want to do here just want to say Apollo and then make sure is to one Apollo graph QL whose group deluxe was it just like for to see yeah that's weird but alright yeah as you see last updated yesterday constantly updated and legit its it's updated bus someone I know who is really good at io s she's a good follow on Twitter Lynn Shapiro so yeah check now if you have time designated nerd if you're if you're a Twitter person that's her handle um but yeah so once we pick and we want to update to minor let me make sure it that make sure every minor update that it updates because it's good practice when you see something like yeah up to next minor see it's waiting for checkout of 1.0 so you want to say up to next minor so where it updates at point 19.0 and yeah you just kind of keep an eye on what but yeah so you just want to use the Apollo package you can always add the other two later but for this we just need the one and there it is it's it's added that's pretty sweet a lot better than using cocoapods and having to manage dependencies that way kind of a pain but cocoapods was great it did its job very effectively and we thank them for it but yes Swift package manager is great now we're gonna do is add a syntax highlighting so this is the optional step but it is kind of useful I do think that the syntax isn't to we're you know not like I've got like the autocomplete kind of stuff and doesn't do formatting but you know it helps a little bit to be able to reference your other variables that you've created again and make sure you know they're spelled right and everything so in order to do that if you don't already have a folder in library to developer to Xcode I didn't even have the Xcode folder just create a folder for plugins and a folder for specifications and what we're going to do is we're going to drag the plugins and specs provided by Apollo into the into these folders so we're going to clone to repo for Xcode - graph QL that's found right here and I'm just gonna you know download that I've actually already downloaded it create a new tab here and we're going to development repos there they are so take this ide plug-in and put it in the plugins folder and then take this graph qxc lang spec put that in the specification folder and that is the completion of step 2 oh also you have to close xcode i'd recommend doing it before you even create the folder do any of that stuff to completely quit out of xcode and then rerun it it's going to give you a pop-up saying are you sure like do you want to run this plugin or whatever and yeah just say yes and you'll have it you'll never have to answer that question again now if you remember step 3 it was to add a schema JSON file into our app and you can find that if it's remote you can use this this handy command-line tool here and it's going to download so let's go ahead and CD into the folder we want to download it in CD desktop and then we're going to use a node package manager to install the graph QL schema command-line tool so it's gonna sudo NPM install G - Q - it's gonna say it's already installed or something because I already have mine installed but I wanted to go ahead and type it and C and so they're like you know maybe you don't have to pause the video and if you do it's it's right there for you so we're out on delete every line but that's cool it updated that's that's cool the next thing we're going to do is we're going to download the schema and in order to do that you get graph schema and then we're going to use the link right here is where we put it so they'll take your take your remote API and copy and paste it the API link into here I'm gonna do that right now I'm for this by the way I use the graph cool remote graph QL database because it was free and easy to use I did everything I needed to but that's going to be sunset in 2020 now they have another one called like prism Prisma something like that that does the same thing but it's essentially the next you know next level of graph cool but the website I used to craft are cool I have a video on setting up a thing on graph cool unfortunately because again it'll be gone in a year so you know that's the thing about technologies it's always changing and it's it's a cool thing good thing and also you have to change with it the videos don't always have keeping power so there is my API and then we want it in the form of JSON because it comes in a few different forms if you want to get in or graph QL more in depth you know feel free to google it but after that we need to put a greater than sign if you see all this it's because I cut it out of the video but I didn't put the greater than time and it didn't process it correctly it just printed out the schema in my command line so that means to download it to again whatever your CDs into and there we go so on my desktop now there is a schema JSON file the takes it takes a second to upload it to it was wall to say I was looking at my desktop like where is it but yes here it is pull it up for you there so you don't want to write all this code whether 3400 lines yeah so there it is and we're just going to drag that e-file in to our copy items if needed whatever yeah let's put that in this folder you want to make sure that it's in the proper folder and you want to make sure that you copy it as with like I've never done something don't need to copy the items have checked not true I have in this very tutorial this is the first time because we've run a script that that allows the you create a API file using a run script and because it's already in the folder you don't copy it you just kind of reference it but anyway let's go to the next step and we're going to create some mutations and queries in graph QL and our app bring to the the Apollo frameworks recommendation and it sounds like a good idea also we're going to create a file with the same name as our Swift file that we're going to be calling it in so for us it's a graphical table view controller and in here we're going to find empty file just total empty file and we're going to name it put it in this file target graph QL perfect there we go just let's just put it up here there we go and we're going to add some stuff in graph QL s language which is really simple again I'm not going to go too into depth here but let's let's add a query called load contacts and that query pretty all contacts and these are these are terms that graph QL actually uses so this first one up top is saying what like we want the function to be called in your hat this one is saying what function am I going to speak to the server to tell it to get me so all contacts is a function in graph QL and then I want to do ellipses and then contact details which is also something that is speaking to graph QL stick tab to keep everything orderly here and so that'll basically pull all the contact details contacts is a member of our database and we're also going to take we want to take parts of the the contact so say if we wanted the name or the number individually from the contacts we can't do it like this or it's not efficient really on your back-end and to do it like this what you need to do is create fragments where you can pull each one individually pull each piece of data individually that's really what graph QL that's their advantage over a REST API so I mean why would you do it if you weren't if you weren't using like fragmentation or mutations in the proper way but uh whatever we're gonna fragment contact details on contact and so we're at put contact you put whatever you're looking to do or you know if you're following a tutorial great I'm going to say ID do off the name we want comfort we want it created at okay we want update it at just add it all in it doesn't take up too much space to add this stuff and then if you need it you don't have to you know recreate the API file that we're going to create that's why we're doing this first because the API file is unique to what the queries are now we're going to have a mutation which is just like a query if you're not familiar except you're it's like a post so query is like a get you know I get requests and mutation is like a post request no I say that but like a query is really also a post request and just like naturally like the standard when you call it but you can also call get but anyway that's getting a little in the weeds mutation edit name and then we want to put this dollar sign for whatever we're going to inject and colon and then the type of it so ID that's we're going to make it required because you want to pair the ID with the name that you're changing and then we're going to name variable input variable that is a string and we're also required and then this is where we actually call our specific function and it's going to be update contact contacts know contacts contact and then ID that we put in is going to be that ID and put the name is going to be the name input and what do we want to get out of it so think about when we're calling this database it has created at and updated at or automatically updated and generated for you id is automatically generated but it won't be changing so when we change the name it's going to bring up the updated at it's going to change that as well and we're displaying that in our in our in our view controller here so we've want that to be updated when we call it you know I mean so we want to return the new name which that will and we also want to return updated at and so that'll do it for that one the next mutation is edit number and it's very similar to edit name so we're just going to do that change it to number and then we've got dollar sign number and that is an integer and it's you set it up to whatever the whatever kind of variable it is in your graph QL project so number and again you're calling update contact you're calling the same function on the graph QL side you just want to put in different variables take different ones out so number and that's that's what we're gonna do here you can also create delete all that stuff that's that's involves more like working with functions and all that stuff so I'll just show you how to update things because that's kind of them if you know how to update things like update and call things at the same time that's the most complex that this language really gets as this so we should be good now the next thing we're going to do is create a API dice with file using a run script now that run script is given to you by Apollo so if you go here to apollo site you can see gives you in the installation thing this was also really good to go through it's pretty similar to what i'm saying here but the difference is we're using a remote database for this this is also a good one to do if you're using a local database now the Swift package manager' run script we're just going to copy all this and we're going to paste it into a new build that's see it gives you the steps here to free Shay tech guys so yeah we're going to go into graph QL select it the target we're gonna go to build settings or no sir build phases going to add a new run script phase this run script will be called generate Apollo graph QL API and this API basically gets the graph QL side of things to talk to your source stuff so in here we're going to just paste what we copied and that's it that's all we got to do we have to move this up before compiled sources so that when we built the app it automatically does this and so we're going to go to product build now we're going to right click here show in finder open up our file folder and you can see there's an API dot Swift file I remember how I mentioned I've never not had to copy the items if needed well this one we actually don't copy the items if needed because it's already in our folder we just want to add to the target because it isn't yet added so there we go API and again aren't you glad you didn't have to write all this it's a lot of stuff and you can you know you can go through it to see exactly you know how it's working it's really you know it's mapping things to the to the JSON output and yeah so that's all really helpful now the next step is to add a reference you know delegate for Apollo so we want to port import Apollo and then up here we're going to create a constant for Apollo pollute polu civvy apollo client URL it's going to be URL and we're going to it's actually a string and the string is our API key and you want to use the simple key fql scale like subscriptions stuff like that a little out of the scope for this tutorial this is just the simple API key again and there it is so we have the Apollo client we're just going to force unwrap this I'm just yeah because with the API is going to be there or the URL like you know what I mean this even if the URL doesn't pull it's going to throw an error in Apollo not here so anyway our last step finally you get the rights more Swift and we're gonna go into this Swift file we're going to add a load data where you query all the data from your database and that is this first one is the one we're going to talk to and it's in the API file the actual you know what they call everything like the syntax for it but for now let's just let's just get through it we're going to create a contacts variable the as an array of the data that we get from the load contacts query so not data contact because it says all contacts and then it simplified you know takes that piss off and then it's gonna be dead set and table view down reload data so every time it's basically listening and we'll reload the table view every time that something updates we're also going to call a load data function and for that we're going to use a watcher and that's another actual variable and I'll put it up here there you go hold watcher just in case we need it again graph QL query washer and why can't we do that yet because we haven't imported Apollo and generic what comes xquery and there we go we're good there now in load data arrow into reference that watcher - Paulo that's this is our instance in the app delegate Paulo dot watch and the query is going to be the load contacts query and the here's the result handler results and and then the two cases for graph QL the result is success and failure so we're gonna have Xcode automatically create that it's nice that they do that right and then success is results create a constant pair and then we're gonna create let error here at roar and then self dot contacts because we're in a closure equals new results dot data oops dot contacts and in case of failure we want to print error loading loading and contacts err localized description so there we go that is our first function now our next function is in the the commented out alert item here we're gonna highlight it all a command slash to uncomment nice one comment and so there's a little pseudocode in here we're going to move that around we want to match like name text field equals name so where are we getting this name data from what we need to do is create an instance of contact it's a card let because it's an optional and it's going to be equal to our contacts and doing a lot of optional training and this and this bad boy so get ready index path top row and as you know index path is already a variable up here so we're just using we're referencing that one dot fragments dot contact details so now once we go in here let's do an else fail error contact perfect so once we do this can't see you'll see dot notation contact details has all name number ID all that stuff that we need so we're gonna be referencing that in a second the next thing we're going to in the mutation we're going to change the cells data so we're going to get an instance of the cell and since we're in a table view function it's easy to do table view dot cell for row add current index path I want it to be as a contact table view cell so we can reference the you know other stuff we have inside it like name label number label etc next thing we're gonna do to make our code a little bit safer is we're going to create guard let's for our for our name and number inputs so guard let name equal contact contacts contact dot name else fatal error I'm able to name we're gonna do the same thing for number or number was contact number I'm able to get remember now we're going to go in here and do our mutations change it from placeholder actually this will be text I'll put it as text in your starter file and yeah if I don't get around to it just make sure yeah change placeholder to text there makes this a little this makes a little more sense so when you hit the submit Update button whatever you want to make sure these numbers are equal so we're gonna let's wrap this to make it a string there we go and so let's start with the name mutation there of course going to be very similar going to name pulls name text field type text text field text pretty self-explanatory Apolo perform and this is for performing mutation we want it to its the edit name mutation and it should already have that yep perfect our ID is contact current contact ID and the name is our new name that is in text field text see cuz if it's changed if there's you know if they don't equal then you know there's a new one and so we need to do something with a new one and result and and create us a closure here it's gonna be similar to the query so switch results and then I just have an auto-fill success result data cell dot updated label which is the updated at label and text needs to equal our result data that data update contact updated at and this is one of the beauties of graph qlz and when you're calling this it's just one call that gives you all the stuff to get a lawyer I'm sure they have this lawyer that says this stuff everywhere but it's one call that's all and that's uh that's essentially graph QL thing and equals result data dot data update contact name all right failure is here the fatal error we're going to say our edit name mutation didn't work and I'm using a lot of fatal errors you might not you might want to log them you know just for if you're in like a production app or something like that instead of crashing the app but for us and this at this point you know learning how to do something crashing the app is good so there we go we're done with that one and we're going to say number text fields it's not equal number we're going to do basically the same thing your number if you want to pause it and try it out yourself before I do all this craft or stuff you know yeah it's not crap it's it's pretty sweet but but anyway we're gonna cast this number it's it's coming out as a string so we're gonna cast it into an integer number text field dot txt else another fatal error unable to get number text fields and we're gonna Apollo dot perform edit number of mutations ID is contact ID and number is our new number and then so right here we need to say result in and then we're going to same thing switch results and then just let it complete it for us so which one's for you exhausted yeah let mrs. old theta I say Celt updated label dot txt this can be exactly the same that's the one up there result theta dot data update contacts dot updated at and then sell that name label not named whoops number label number number label not x equals result data data update contact dot number perfect and then the last thing is area yeah we got to do some option or training here or you got to put in it as a string so if it doesn't come up let's just give it a default value of zero zero zero just you know and if it fails you know that that's why then our bring it to a fatal error saying edit number mutation didn't work and we're going to error over to the last description and there you have it that's that's that's basically it right so there's a few last things we need to do I create a view will appear function called load data and we need to change all the stuff in the table view functions in order to display it in the UI so yeah there was a number of sections in here that I deleted I'll change that in the starter repo where it'll already be deleted so whatever why I even say that number of rows and section is going to be returned our contacts dot count and it's an optional so we're going to say zero if there is an account and now we're going to configure ourself a row at index path and say was contact table view cell and let's turn this into a guard let just always you know being careful then else fatal error couldn't the Quai contact so I like mispronouncing things on purpose because sometimes it's funny uh guard let contact equals contact we're gonna be similar to what we did in that other function contacts dot index path row Oh not dot that would be why it's not showing up nice past our row diet fragments dot contact details all know why the autocorrect was having some issues there are now it's coming back usually it'll it's quick to add stuff throw stuff like that in there for me whatever couldn't find contact rule and expats arrow perfect so now we're just going to so not name label dot text equals contact our name cell that number label dot text cools contact time number and you know what we're they're gonna make us do all this stuff with the string so I'm just gonna come down here and oh that's a different so I have to wrap this one up yeah I know this video is getting kind of long so I want to speed it up any way I could but yeah and we're gonna have to default value for this so if it's not pulling up you know why or you can see why sell or you can see that it's happening actually sell created label text and again the created at and updated at or automatically created by the database when you add something which is kind of cool contact updated at so now it's building run make sure this works here we go I just have one thing in the database just test it out and that's not right do a little troubleshooting here see what we need to change yeah okay yeah these boilerplate boilerplate text I put in here name number now let's build it should yeah it should be good now here we go my goal sound more official here there we go and you can see this changed my name changed and it also changed the updated time which i think is pretty cool and just just for consistency of UI everything works but let's just say updated label we're gonna want to add updated and unable to update updated and let's just copy paste the whole thing again geez okay one last time because we're about 45 minutes and a little longer that I wanted to go but I can't like there was really no way to go sure about this this is a lot of different stuff here I understand it might be a lot to take in but it there's a lot of companies right now twitch is moving into graph QL anything that uses a large amount of API calls you can save a lot of money using graph QL instead of API just restful api stuff so 8 6 7-5 3 or I don't remember who did that song but there it is and it's updated in the database - I've already checked to make sure that that works so there you have it if you liked the video click Subscribe I'm putting putting these kind of videos out all the time and you know hit me up on Twitter if you'd like to have miles of tweets and yeah that's that's about it take it easy and good luck in your graph QL future

Channel: Michael Miles

Views: 2,805

Keywords: swift, swift 4, swift 5, xcode, iphone, mobile development, learn swift, graphql ios, apollo ios, apollo Graphql ios, apollo swift, graphql swift, apollo Graphql swift, apollo graphql iOS swift, graphcool, remote graphql ios, remote graphql swift, remote Apollo ios, remote Apollo swift, graphql backend swift, graphql backend ios, graphql query ios, graphql query swift, graphql mutation swift, graphql mutation ios

Id: 8XXNckRiG-E

Length: 45min 41sec (2741 seconds)

Published: Fri Oct 25 2019