How To Use GraphQL with Ruby on Rails - Part 2 - React Apollo Frontend

[Music] Hale this is the second part of how to use graph QL with Ruby on Rails this part will focus on the front end portion so there in the previous part if you haven't seen it it's on my blog here or on my channel but you're probably watching this on what we did the back end portion of using graphic UL with groovy on rails and leveraging graph QL specifically to render the type of query and mutations and whatnot we wanted within our app so graphic QL is a little bit different than the typical rails restful routing kind of model there's a whole concept of that to know about probably before even diving into doing something like this on your own so definitely maybe read up on that on the graphic ul documentation I'll just follow along with one of my this video here it's the initial point of getting into rails and using it within our app so the next part like I said is gonna be the front end portion we're actually going to leverage a few libraries to make this work a pretty well-known port of getting graph QL into a front-end portion of an app is from the folks at Apollo they kind of made this famous graphic UL concept their their main stake in the lay of the land I could be wrong with this I'm I'm pretty new to the react side so a lot of this stuff is based on react and Apollo and whatnot so we're gonna leverage those since they're kind of known ways to kind of absorbed graph QL queries and mutations whatnot and many of you manipulate those on the front-end so like I said we'll be leveraging react on this but it's actually a port of react that's called react Apollo and it's an integration of react to the Apollo client itself so that's a easier way to kind of get going with that and then of course like I do in most of my videos I used tailwind for the CSS so the actual app we'll end up doing is pretty trivial but the idea is that it's a single page app and it displays some users based on the query data we pass back here we're using kind of a package to get their graph Gravatar and if they don't have on of course these are fictitious users that has seated with some radials data if they don't have a Gravatar they won't display but you can create a new user which I've added below if you click through to a user they'll be some posts they this could be extended completely right now I just display a post title but our data layer doesn't didn't have more than the title at that time so we only have what we did at the body but I think I just had the title for this specific case just to kind of save some time so there's only two layers of this so there's like users listing and then the user are listing within that you see posts this is all react powered so that's kind of neat and then you can create a user so I'll do want to real quick that's I think gonna have a pretty good Gravatar actually it should be any limerence and Andy at just a lever come if we create that user it should pop up there I am and then my email and then I don't have any post you actually we didn't create anything to kind of make the posts in this tutorial but I just wanted to show you how quick and easy it can be added based with graph QL react and rails so underneath the hood I'm actually running two servers one's the front-end portion of the app and one is the backends so we actually have some rails server in the background communicating with the front-end app in our actual same app project to kind of talk back and forth using this API approach with Ruby on Rails and then Apollo and react so this is kind of I would say a little advanced so if it's not making a ton of sense that's quite all right looks like you're gonna shoe here but disregard that for now so I actually have a I'll just open this individual studio code and I have a front oven folder in here that I created with react in mind so what I want to do is recreate this in this video and it's gonna have all of our components and you know react really related stuff we use create react app for this but you notice it's in in an actual rails app too so I've actually contained these into one github repo and I prefer that just so there's one source of truth for code you might feel like you want to extract that into its own repo which is totally fine you can communicate between two different apps that way they just need to know what ports and and URLs to talk through basically is the gist so let's go ahead and kick things off I am gonna reference for the original project that I called just graph QL fun on the github repo so on my github itself you should have access to this if you don't I'll link to it but it's the original version of part one and I'm gonna start from that part to continue part two we'll add it like graph QL fun slash front end on it just to make it clear so as you can see it's part one so look for a part two when you go to see this video finally after done recorded it and then we'll kind of come back and fix things up from there so I'm going to deal with this little issue real quick and come right back okay so I'm on my repo here I'm gonna actually clone this down this is the part one version of our just a Ruby on Rails implementation of it so just the back end is what we're looking at here and I'm gonna clone it down so it's a git clone I'm gonna paste in that you are I am i call this graph QL fun front and I already have this folder in there so I'm gonna just say demo so we clone it into a folder called that okay and then we can CD into that graph QL fun front-end demo I'm typing it all out because I have that other folder okay so I'm on Ruby 2 6 5 we just need to run bundle at this point and then a few other actions to go ahead and install this I already installed this project so it's gonna go fast for me but you might take a little time there is a caveat to this for some reason when I originally created this it uses rails 5.07 don't know why 6 should work if it if it's that way on your end if you've run into issues with that let me know I'm just curious why mine shows this I think I had some sort of different Jim activated or something like that when I ran the app initially but since part one used five I'm gonna go ahead and carry on the torch here to go continue doing five like I said it should work on six if you're using that today but let me know if not I'd be curious to know so we ran bundle install now we could Zeus to Rails DB setup I believe and I think this should go ahead and run rails DB create and then migrate and then also seed but let's go ahead and do C just because I just want to make sure we have data to work with okay and then we could say rails server to go ahead and run it and yours might say rails six or something there that's totally fine okay so rails is running if we go to the graphic cool interface we should see this from part one this is where we were doing some querying believe we could do like a a test query of users and within users this is graph QL we're doing its get IDE name email posts count and run that query we should see some data since we seeded it if you're not familiar with any of this like I said go back to part one where we did all this setup so we can work with it in the front-end on this part so from here on out well we basically won't use Ruby on Rails but as just our back in our data lair so we're going to be talking to it through an API there is some set up we need to do to make sure we can talk to it securely and that's usually done with a gem called rack cores with that we can kind of tell what origins to allow access to so let's go ahead and set that up I'll give you a visual of how that's going to look so we're in our app here I'm going to go ahead and open it in this one in the code and I'll probably put this in a new window so it's easier to see okay so here's our app we don't have any react or anything in this but we do our crap graph QL and everything set what we need to do is in likely in your gym fire you're gonna have a commented out gym called rat course if you don't go ahead and just add this and then run bundle again run bundle they're okay so that installed that gym inside your config directory there should be initializers directory and inside that might be a cores that RB file if you don't have that go ahead and create it and inside that we want to uncon with this and a little background of what this is is basically if you read the comments here it's cores issues so it's costs origin stuff between different apps you don't want to allow certain things in that shouldn't and this is kind of a gateway it's called middleware to protect against that and the idea is you pass in the specific origins for your app to allow talking to happen and then any resources you want to allow through that since we're doing this locally you would pass anything a star means anything but on your production site it might be like your actual URL so web Crunch calm or and then you could say you can comma separate these and say like staging sites to so if you do staging now if I can type staging web crunch etc you know what I mean so in our case all we need to worry about right now is the star so let's leave it there you might do like an if rails environment development something like this to go ahead and you know do that otherwise you could just do it for production and set it and forget it up to you since this is an initializer we need to restart our server to take effect same thing because we did our bundle install there that I would need to be done to so with that done we should be able to boot your server everything should be fine and not that much different so with that we are able to now go ahead and install the concept of a react front-end ray'll six comes with the possibility with Webb packer to install react that way I'm gonna use a create react to app and install a completely new react app within the directory instead and I think that's why is in the sense of you can keep those CERN's concerns separated so your front end isn't melded too tightly with your back end and I think that's the approach a lot of people would take and the benefit of using a new front-end framework for something like that now let me preface all of this with the fact that I'm no react expert so if you see some code that you're cringing about I'm probably doing the same behind the scenes after watching it so never fear but what I built on the initial front-end is that you know the first attempt at getting something going with reacting Apollo and graphic UL so that's the whole point is just to get that stuff to talk to each other and understand it a little better so I have to go ahead and install a global and create react path if you don't already have this you if you do already have this you won't need to run this of course so I'm gonna go ahead and run it I believe I might already have it so this might go pretty fast yeah so I have three two as you can see and then we could go ahead and say create react app and we'll call it front-end and this is gonna live within this same folder so our same rails app and then root path so what that installed we get quite a bit of defaults and everything set up for us which is great a lot of stuff to installing react which you don't want to deal with so this create react app has been pretty sweet there is one for view - I like random aside there so we could say yarn start at this point and boot this up it's gonna tell you oh there's something already running on 3000 and that's actually important we want that rail server running as well as this server so you can just say run another port so why in this case is boot up 3000 won which is good to go so here's what a create react app looks like nothing fancy but if you look in the code we can fire up the actual look over here we should have a new folder just called front-end added to our stack a react app we have this structure going on a nice way to look at reacts or a folder structure in my opinion is using package called tree I don't think I have installed here enough so I'm gonna salt install brew install tree and as I like to look at it in the kind the command line once it installs real quick okay so with tree we have access to this new concept of displaying like a route vert looking feel of a folder so what you can pass is this ignore flag and I'm going to ignore node modules because there's so many damn things in those folders so we'll just do this and this is the fun in app as it stands after just an initial installation we're not gonna worry about tests in this case you see there's a test file that's something you could add later as your app grows that's not anything I'm gonna deal with simply because I'm so green on it I don't really know how reacts tests and stuff work I'm not sure what they even use so anyway what I want to do is leverage tailwind in this too so we're still not done installing things we need to actually add to and CSS and to do that we need to do it through a arm so yarn tail wind excuse me yarn add tail wind CSS we'll need a few more things two that are gonna be dubbed appendices that I'll add so we can run this on command and it's gonna be post CSS CLI and autoprefixer so we'll say yarn add post CSS CLI and autoprefixer and I'm gonna pass the Big D flag here to basically says this is for development only we're not gonna actually ship this any shape or form once we go to production at some point which we won't but if you were to okay so if we go back to our code we can see in the package JSON that should be a Deb dependency now right here those two and then we have tailwind right here which is good to go now with tail when there's a config config file and we need to actually initialize that so I'll do that next and we're gonna just say yarn tail when init full and the full flag basically says bring over the default side of the configuration file so if we look in this folder now we have all that stuff I normally copy from github if you pass that flag when you initialize it all the defaults come in which is pretty handy now we still need a way to like address how does the toe-in and the react app understand and you know get to know each other inside our front-end folder we have a CSS file called index CSS and what I want to do is basically get rid of all this garbage and import tail in this way so we'll say @eo and base and this is all stuff from their Docs so you can go refer to compile in stocks if you want and then utilities so we just basically initialize it that way now this needs to go into a post CSS config folder file - we don't have that yet so I'll actually create it stop CSS excuse me post CSS config yes and this is just how you setup tailwind so it's not anything to do with react at this point exports equals an object and then plugins will make an array where we require plugins and the first will be tailwind and then within that you can pass another parenthesis in the path to the tailwind config so in my case it's straight up within this same root directory so we could just say tailwind config KS and then here's we're gonna pipe through autoprefixer as that dev dependency we added very good essentially yet we can add that final semicolon there and then per the tailwind Docs you can actually run this on the command line once you're you know all set up ready to go and what we'll do is go back to our package that JSON file and modify one of the scripts here to run what we need so we could say right here build style will be tail end build source and next up CSS and then the output would be source tailing dot CSS and it's not a zero should be oh so here's the end or in and here's the out and we need a comma there and then on start we can run yarn filled style so with basically refer to the one we just add and you could do an ensign to do react scripts art to so that's pretty neat and you do tan them there so based on your folder structure that might change I'm not sure where you put certain files but the idea is when this compiles Tara one will build this index CSS file the one we just saw in source right here will build everything we need compile it down and create a tailwind not CSS file to come out here to and that's what we're gonna import into our career react app so when we go ahead and run yarn start on this let's see build Styles not found it's double check our typing there no I can't type there we go you see it ran tail and build and it's gonna tell me the port its running us the running two ports so I don't need this one running at all actually see again from this one again it's gonna tell me hey you're on three thousand let's use three thousand one okay great so nothing's really changed the fact that you will see though that the tail end CSS file now exists and it's compiled out which is perfect now there's a lot of CSS there and I would invite you to trim down this file so that's way less but like it's this is all just for show and tell so feel free to change that now the big difference here is we want to import into our app itself the let's see we have EPS CSS I'm gonna get rid of that completely I don't want to scope styles that way and within index J s is our main concern here we have a next CSS at the moment we can just import tail and instead since it's compiled at that point and then we'll have react react Dom tail-end app and I'm gonna actually put a components directory into my source folder just for some organization and I put app inside of that I'm doing just doing some housecleaning here I don't want this test file so I'm gonna delete it you just do that components and so components will actually hook in this file components since we move that one and save that down I think we should be pretty close so we can get rid of this logo and probably this stuff up here I don't need to react logo if you refer to the blog posts I'm gonna have this outlined like what the actual files are in it so definitely check that out if I went too fast there I apologize but I think that should do it if I'm not mistaken cool so within our actual app file I'm gonna just clean it up I don't need any of this stuff it's gonna just render components app GS camera so absolutely so app is trying to import app CSS we got rid of that and this so we don't need that it'll still render at this point logo is not defined because we're trying to source it yeah so here's the trim down version of no styles anything whatsoever I'm gonna leave the containing div we need the one root div I'll just leave the app portion there and we're all set so next we need a way to interact with graph QL react can't do it on its own it needs some sort of querying language to meld react together and that's where Apollo comes in and why you here Apollo so much in this world so what I'm gonna do is install reaction Apollo just like we did tailing in this case so I'm gonna actually quit the server so we can just do it all in one place I'll just say yarn and react with Apollo and we're gonna get another dependency too that's gonna help with Apollo just to get it set up and like a quicker way then install like 14 packages so Apollo boost is like a grouping of packages we'll need and it'll allow us to kind of just get things rolling faster and then of course graph QL we need as well from the node side so we have it by the ruby port on the the version 1 of this if you cut the part 1 I should say was all rails in Ruby and this one is the front inside using node so we're doing kind of dual action there and we can install them and then we'll import the is once it is installed and where that's going to happen is in our actual index dot JSP a lot of imports in here so what I'll do is under the service worker we're going to import a pollo provider and that's going to be react Apollo and then we'll do is similar to client like for here so Apollo client from Apollo client and Apollo or excuse me create HTP P link and you'll see what all this is gonna do in a second this is just stuff that Apollo ships with in-memory catch Paulo cash in memory okay so we haven't used any of those yet we still need to and the way that's gonna work is first we're gonna set up the link to build that's going to be our localhost connection to graph QL on our part one so that's running on port 3000 right now that's our rails server so if we say comments link equals create HTTP link and we pass in an object as a parameter that's going to be a URI and it's gonna be set to localhost 3,000 and we actually need HTTP so on our rails app we have graph QL as the actual execution paths for graph QL and that's where all the clearing and mutation and stuff actually pipes to so once we have that one endpoint and that's what we need to define here so it knows where to port all these queries and whatnot through and then we can make another one called client that's going to be a new Apollo client again pass in an object and we'll pass in the link we just created and really need to turn those suggesting things off and then cache will be the new in-memory cache we just imported and we need to do a new up on that one there we go and this is all to say in our react app here instead of just our main app containing layer there we need to do a provider so appalled provider and passing our app in between that and then a client will be a prop within the app so like if I if I knew exactly what was going on I wish I could tell you but these this kind of stuff is new to me so take it with the greatest assault but this is what the docs say this is what I've seen on how to use Apollo and react together with the graph QL so here's the starting point and what we can do for now is to kind of start to build UI up we don't have anything in the front-end at all it's just a blank slate so if we run our start from yarn we get tailwind it's going to tell us a new server and we'll boot it and it's gonna be a white screen so coming up we'll add the user lists that I showed you that kind of looks like this or I'm gonna basically make it look like that and then we'll go ahead and modify it from there so let's go ahead and do so and we're gonna start off by creating a user's components so we'll set users AAS inside it we're gonna import react of course from react import react Dom or not react down we shouldn't need that in this case since we're just importing it as a component the first thing we'll do is build a we're gonna use react hooks there is two types of using react I think your hooks and then the traditional props rendering hooks is what I've seen that looks pretty more readable to me but it's also kind of confusing so there are some shared logic going on in this app that I use two different types of react hooks is the newer thing so this is how that works with Apollo so we're gonna say use query and we'll say from at Apollo and then react hooks and we're gonna just import all the things right now so import shorthand graph QL from graph QL tag and imports what will be an import we're gonna create a user avatar component from user avatar and then import create user once we want to do a creation part from we'll come back to these parts so create user I'm going to comment them out for now and now I can set up our query so first let's go ahead and do that so this will be stuff you remember seeing in the first part where we say I'm gonna call it I'm gonna give it like a constant this is how a query looks at this point and use backticks with the gql tag and it's gonna basically build that query just like we saw in the graphical in the interface in the first part so users ID name email and then post count and we have all the data already set up in our rails app so you can kind of forget about that here we're just gonna get that data back based on what's setup so we can build our react hook at this point by defining a function called users and in it we're going to pass in a prop of select user we'll get to that part in a second but this is how it works we have a Const and we're going to D structure loading err data back end and use query and then pass and get user it should be users excuse me so I'm going to modify this to users we go and that's the essential query we're building and then we could say F loading will return just a little like a mundane loading state and if we can do another one if air return air and then we could pass in the message in backticks actually just all being backticks and fix that real quick air will be air message all right and then finally the meat is we'll come back to this one actually I'll come back to that part but we want to return actual JSX now so this is the stuff you've probably seen other react apps remember class name you can't type class and make it work since this is all JavaScript if you need to react that's kind of one initial gotcha that I've seen items Center this is tailwind now PV 16 let's just get our initial user rendering going yes so within this class we can map the data users map and then through the mapping passing our user fed error function and then in here we can actually do what we need so we'll render div key we need a key for each rendering so user ID is a good place to start and then we could set class name the tail end we'll set it to one third on the larger screens and then full on the smaller padding will for all around text Center and then in line and then we'll do a on click event coming up that like so you load the user route and that's going to end up being this select user proper gonna pass so we'll just say select user defined we're going to need to bind what to this and then user and close that off okay and then we'll just have a containing div there so this is going to be like the avatar div block so why don't we go ahead and create the user avatar that want to be probably the most straightforward and we could pass in the user object since we're returning it now so let's go create that component so I'll just say user avatar Jas inside there we're gonna have grab our import reacts react from react import Gravatar from react Gravatar that we need to actually go install this with yarn so go do that okay so let the run your arms start again we should be able to import that now and back over here and we could say Const user avatar equals function that returns prop of user and here's the actual return block so you could write this as return like this but this is the shorthand I believe so you could just say that and then gated I'm gonna use a react fragment it's kind of like a placeholder without necessarily needing a div empty div or something inside that will get a Gravatar email and get the user email since we're passing that user through and with a Gravatar you can set a size so let's say 204 now class name equals rounded full text center in line and that I'm gonna just close it with this style inside that we can get more details on the user though so we'll have like a user avatar name and title or whatever in post count so we'll say px 6 py 4 inside there we'll have another div class name of font bold text XL margin bottom two and then we're gonna pass in the user name below that will be a P tag of class name tons of classes cuz tail end you know text gray 500 and tech small for this one and we'll just get the email back there so user dot email and I'm gonna just copy this part and it's gonna be posts count and this will be a little bit bigger so base great so we still need export user avatar though so let's export default user avatar all right and then that should give us our users and allow us to loop through so we get on comment this bit now add the user avatar awesome so I think we should be able to render once this boots up some data you might need to import users into our main app I think that's the culprit so we don't have anything going into the main app which is the entry point so that makes complete sense let's do import users from dock users and we can use that we have that that selected user state so what I'll do is actually just a traditional react component so I'll say class app extends react that component and within that we'll have a state that's going to be selected user of null initially and then we can do a method called select user that's gonna basically pipe through the user prop and we'll say this dot select state oops and pass in selected user and then the user we're passing through so and finally they'll be a return statement here but we need actual render statement now as well we won't do the react hooks Sparkle miss or whatever you wanna call it and render should be not that I can't type this and then open brackets closed brackets go clean this up okay so within our return block we have our app and we can actually get rid of that I'll just do it some tail one container MX auto and then px fours to give it some padding on the sides and then we could get basically what I'm gonna do is do a if it's a certain view render this if it's not rendered that so we're gonna say this thought states dot selected user and within this block we can render either the user component which we need to make still I'm gonna go ahead and type it though so you get the sense of what we're doing user equals this thought state not selected user and then selected user or select user equals this not selected user else we're gonna render the users component we just created so that will be select user will pass that through equals this dot select user so that's a mouthful hopefully it's sort of clear idea is in a single page app we're not rendering two different views it's basically all based on state so in this case we're gonna render our actual our actual users component I think I have something wrong though so let's double check I need to app I need to export default users okay and then user is not defined so we're getting an error so let's go ahead and create that so I'll get a component called user again we're gonna import react as you would quite a few things here actually so we'll say import we act from react I'm typing this all out you could get like a template if you want I'm not a big react guy though so it's okay do use query this is for the Apollo part and for gql just like we did on the user's so from graph QL tag import user avatar from user avatar and imports we will be doing this but I'm not going to have it done just yet so posts initially comment that part out though okay so let's construct the get user query and this is gonna pass in an ID to get the user we're talking about so const get user equals the same thing so gql backticks and we'll say query and here's the weird part we're doing kind of a active record kind of thing so ID is going to be the variable that we pass through and we'll pass the type of an ID within the query and then we could get the user which is the query type we built ID passed that in and then finally returned the post on that user of ID and title so that's probably confusing as all hell but it seems to work so now we can use the react took port of this called user gimel pass and user and select user these are kind of the props I guess you could say from the props ID and then the same thing loading error data equals used query get user and when you pass in variables you need to actually extend this query used query to include an object which is going to have a variables method on it or key value I guess you could say and what we could pass in is an object that gets the user ID since we're passing that through here so all that's to say once we actually run this we'll be able to pass a user in on the app GS as we're doing here and kind of query for the specific user we need based on their ID so if loading I'll do this process again return if air returned backticks here error and they can just get the error that message all right and then we'll return our actual block and again a react fragment I think these are handy for the sake of the route component he needs some sort of root element and you can get away with adding like multiple divs in this case instead of that one parent one which has always been a weird problem in my opinion so class name will be flex flex wrap margin why four inside that we're gonna have a button that's gonna be a back button and the idea of this is to kind of get back to our users listing instead of on these individual users so class name equals quite a few here background gray 200 hover BGE 400 texts gray 900 font bold py2 px4 and rounded it's basically building a button here it's gonna say back that's it we do need an on click event though so let's add that say on click and we'll I think needs to do these brackets yeah we'll say on click select user dot find this and then we'll actually pass a null because we don't want an ID to go through it'll just kind of bark and go back to the users area so then we'll get below it can render the users avatar so this will be like the users individual page flex flex wrap item start margin bottom four and we'll do it another day of class name equals large we'll go with a 1/4 on large screens and then with full and small and rounded and Tech Center there's that and then we can pass in the user avatar component and the user one more div within this div that's gonna be the post listing so as you saw in the beginning the user avatar had a post next to it so we'll see it flex one kind of span the full width with full and inside that we can render what will be the posts so we're going to need to create that so this will probably air out on us because I don't have it actually built but we could say export default user to export it and then finally we'll say just import post it's going to return air users not defined let's double check we need to import user now into our app now let's put it before here okay and then if you expect an assignment of function callings question no one used expressions yet cannot find module posts so we'll get to actually seeing something in a minute but let me go ahead and create that and this is pretty straightforward so we'll do another component called posts import react and we'll do a hook so a posts pass in the posts and user return react fragment all right and then in there we'll have class name large will be pls do a ton of padding on the left h1 class name equals font:bold large bottom four and we'll just hit post from username and then we can map through the posts we're passing through so map and then posts could return the fat arrow and return some stuff so this will be div key you need typically or if it's like a ray of objects or something like that we need to pass in a key through back there's better performance gains that I believe and then within that class name is p6 shadow margin-bottom for an h3 class name equals text to XL font bold text gray 800 and then finally a post title now I finally need to export default posts so we're getting air on users and I think it's because I actually did some on click events that use some quotations here so I'm hoping this clears it up you know what I did wrong this should be parentheses and not the brackets there we go I was getting error on users and that's what was going on so now we're doing I think the same thing on posts so I'll go back and fix that so this should be not brackets parenthesis that's I don't like that but hey whatever react do your thing so here we go it looks like tailwinds not importing 100% the way we want so let's double check all that setup right so what I did on the app here I said select state and I got confused with all the select stuff it should be set state for one I'm still getting airs getting tail when to work for some reason but we are getting our UI so I get the back button in the front buttons now I just need to solve the tail-end scenario and I'm wondering why it's not working because we have in XJS here we're importing tail we're not CSS and it's inside tail and CSS is right here for whatever reason all these things aren't compiling down though so I think I need to double check my package that JSON file and my post CSS config module that exports because that plugins that choir to and CSS tan ones oh wait no tell when that config that's right so let's double check a package that JSON tailing filled source that Enix out his source tailing that CSS that's right start is yarn build style which is referring to this you know what it is I can't spell gas utilities price cream at me on the other end one little I made this probably not work and then let's boot this up again I bet we'll see our layout boom alright cool so we have some data we can click through we see our posts that's very good we can't do posts you can't click through post you accident build-up functionality and I invite you to take that further if you want but let's approach a mutation next this is the querying side of it let's actually create a user now and what we can do is create a new component just around that so let's do that so I'll close this folder inside our components let's do create user component and and it will have a variety of things kind of the old-school react way cuz this was confusing me as hell like super bad so I'll do what I think is the easiest to explain anyway so you can import instead of writing react component down here you can import it as a D structured object here and just use component on its own some like to do that some don't you notice another components I didn't but I will for this one just because so we need the gql tag and we need mutation from react Paulo okay so what with the mutation if you recall we're actually creating something we're modifying data and that's the the idea with a create user obviously so let's call this one a constant of create user equals gql and we'll do the backticks thing again this query is pretty gnarly so we'll say mutation create user just be camel case and then we'll pass in what we need so the name is a string type email another strength and it's capitalized so inside that we'll have a block that's the actual create user method we made in part one so input and then the object will pass through so name is name email is email and then inside that we'll have the user and we'll have the ID name email post count this is what will actually render in the view but if we return any errors those little pipe through as well so that's essentially it for the query for the mutation in this case so we create actual old-school stateful component now so we'll say create user extends component and we'll have some state here so create an object that has named empty email and that one will be empty and then we'll have an on submit method that's going to do the actual creation so we'll call that create user method here so this will coming up more context in a minute but I'm gonna just go ahead and create this method we're going to pass in the event and the create user portion that we made up and we'll do events default and we'll create a user and this is that mutation we could pass in variables and a new object and we'll have this thoughts state pipe through so States gonna end up being the name and email which is what we're actually needing to create the user in the first place so hopefully that makes sense and then we could finally say this thoughts set state to nothing so we can reset the form but we're gonna have for the creation of a user okay so that's the actual method we'll call coming up and then we'll have a render method and a return statement that I always do brackets on that should be parentheses return a mutation and we'll end at this just so it's easier to see mutation equals passing that variable we made that has the quote the whole mutation query update will be something we call once that is actually updated so this dot props dot on create user it's kind of a nifty built-in and inside that we can say create user mutation more parentheses there this gets crazy so sorry if it's confusing this to me to be honest so don't feel alone large will be fixed I'm going to fixate this whole form on the bottom of the page to get it out of the way but also still always in view so left will be zero with full background white order top order gray 300 and there will have a flex container our form excuse me and will say class name on it will be large px8 so some padding on the top are left and right padding top to p2 here's what we'll call it on submit method and we could just call will pass in the event through to it this that on submit and inside that we can pass that event and to create user mutation so that should handle the actual creation once the form is indeed submitted and inside there will have our form field so let's go ahead and say div class name Emmet is not a friend right now equals large flex flex wrap flex between item center justify:center large P equals zero but P on the bottom or smaller screens this will be kind of just a flex container so we can make all the fields horizontal so we'll have a H for that's going to be class name equals font:bold 14px aim of large pr4 s kind of pushes some space between each div and block element here and that will actually have the input finally it's an input and I'll just do class name equals order rounded with full py to px 3 class name will stem type of text value equals this that state name and placeholder equals name on change we'll listen for the change event to update States so we can pass in the event to do that and then we could just say this set state name equals name or eat out targeted out value excuse me okay so that's the input for the name we can honestly dupe this for the email and chain just a few things and email here will be that and then email and email cool finally we need a button of course to submit the form that will go after this dev I believe button class name equals PG blue 500 text white px 4 py 2 we rounded and we'll have a type submit' in there we'll just say create user and then way down here we have our ending mutation bit which will come after the form the div and right here so mutation and we need a semicolon there I believe that's it now we have to export this monthís component so export default create user I hope I didn't spell anything wrong and then we can go back to our users listing we we commented out this before but I'm gonna import it now and go back to that and add that block below this one so it's gonna come after the mapping so we'll say div class name equals large and force give it some offset large with 1/4 with full on smaller screens rounded and then shadow large to give it some offset and in there we can import to create user component and then say on create user pass and update users so we need a method to do such and that's going to be in this component too so we can come up and here create a function before the return statement update users and it's kind of a gnarly function but it's gonna pass in cash and then object that's going to have the data and then create user and outside of that will create an opening function say users equals cash read query this is how we're gonna actually read the actual graph QL query that comes back once a user is created like all at the same time query get users and really rehydrate the users listing and cache it as well so write query and inside that will be a object with the query get users and then the data will be users users can cat and it'll pass an array create user user so again I don't know how to explain that one but that's what I found in the Apollo Doc's it seems to work so we'll see hopefully that makes some sense looks like I'm getting some errors those have found graph QL I see what as I see what it did I put a dollar sign here that's causing conflicts so definitely I wanna do that I was referring to the old project and I noticed there was no dollar sign there but I see them other places so that was the culprit now we should see our actual [Music] UI everything's working we don't see our form yet though so let's see if I can find out why that's not rendering on our users create user importing create user so that's interesting maybe it's a physician in the wrong spot it might be I think I have this in a weird scenario so this is gonna be a thing I'm gonna get rid of this oops there we go yeah we didn't need that quarter flexbox stuff going on so I'm gonna save this down swear Emmet is going nuts and then we should be good to go I think so if i refresh this I'll close my dev tools it's kind of not doing great there though so let's do relative I think I put bottom o instead of Potter Oh in that component and that's probably what's up so let's do let's go back to that create user and in that yeah that's a o 0 that should shift it to the bottom of the screen there we go okay so let's try this out and e at just the lever I'll do my other email should be the name there though any loads yeah email this is kind of wonky looking but hey it works cool I don't have any posts yet so let's figure out why I'm gonna remove margin-bottom from that in that in this and save that yeah another Alliant it's cool so if I add an D Lorentz and E at web crunch I think I have another avatar for that one awesome so as you can see that stuff works I can click through and see everything there I don't wanna be posed because I don't have that set up but that's something I invite you to extend the story of tutorials gone for far too long but hopefully you've learned something there's some stuff that's even pretty fuzzy for me it's even trying to teach you this but I wanted to at least do the old college try in terms of getting Ruby on Rails talking to graph QL and react on the front end so here we're doing all those mutations as you can see the rails server is running on localhost 3000 I was that email I just added here and then on the front end we're running react on its local server in Apollo so all that mixed in with some tail and CSS too so hopefully you guys enjoy this I don't know if I'll go deep diving into in terms of building a complete app with something like this I'm sure there's gonna be talk of like well how do i authenticate and whatnot there are ways to do it I would recommend like Adam leveraging maybe devise and Jack Jason web tokens and whatnot but that's a whole nother can of worms to open so this is not an easy approach but it is one that allows you to separate your front-end and your back-end and use some pretty cool technology so and if you enjoyed my stuff check out my other videos got quite a lot on Ruby on Rails I have other stuff coming to on tail and and JavaScript and I might do some more on like product design as a whole coming up - I'm a product designer by day so that's stuff I just deal with it's whether it's design related or development or just solving customer feedback issues help everything all that stuff under the Sun so thanks and so long for now hello rails is my new course on Ruby on Rails I'll teach you Ruby on Rails from the ground up visit hello rails die Oh for more information you you

Channel: Web-Crunch

Views: 5,565

Keywords: react js, apollo, react-apollo, ruby on rails react, graphql, ruby on rails graphql, react graphql, react ruby on rails, graphql ruby on rails, ruby, ruby on rails, How To Use GraphQL with Ruby on Rails - Part 2 - React Apollo Frontend, How To Use GraphQL with Ruby on Rails, learn ruby on rails, learn graphql, learn react, rails tutorials, graphql tutorials, react tutorials, react rails tutorial, react graphql tutorial, learn to code, rails api, coding tutorials

Id: TOq86ozyHIA

Length: 70min 0sec (4200 seconds)

Published: Thu Nov 28 2019