Four GraphQL Clients Compared

welcome back to blue collar coder i'm jack harrington and today we're going to take another look at graphql by looking at not one two or three but four different client-side technologies to go and connect for your application to your graphql server so first off we'll use just fetch off the client to show that you can still use that same http rest json style transfer protocol but use graphql as the query language from there we'll look at graphql request which is a library to help you that and then going on from there we'll look at apollo client and finally relay so by the end of this you'll have four different technologies that you know about and have experience with that you can choose for your application so let's start off by jumping into the server and get that implemented so the first thing we're going to do is have a look at the graphql server that we're going to set up first it's got one query on it and that's pokemon and it returns a name and a type and it's also got a mutation so we're going to try both things we're going to try a query which just gets you data and a mutation which changes data so this one is called add pokemon and it takes a name which is a string and a type which is also a string and it returns an id and that id is fake it just returns a concatenation of those two values we're just trying this stuff out this isn't really about graphql is it more about the graphql clients that we're going to try out so on top of that we're going to create this react app using create react app and this is the relay version of it which is the last one that we'll build and up at the top you've got the results of the query and down at the bottom you've got the mutation with a button and when you press the button it runs that mutation gets the id back and puts it up in that section above that says null pretty easy okay so the first thing we need to do is to create that graphql server so to do that we're going to use graphql yoga because it's a really easy way to make a graphql server so let's go create a new directory called gql clients gql's short for graphql and within that we'll create a server directory and bring up vs code and i'm just going to do yarn add graphql yoga and what that's going to do is it's actually going to create a package.json right there for me i don't really have to go and initialize one that's fine okay see as you can see it's got graphql yoga in there and i'm going to create a server.js file and just basically copy and paste in their example code next i'll uncomment this import of the graphql server from graphql now i'm going to change out our type defs so i'm going to create a new type called pokemon and say there's a name which is a required string that bang at the end of string means required and then type is also a required string and now pokemon is just going to turn a pokemon it could return to ray of pokemon it could have by id all that kind of stuff i didn't really want to get into that but it can totally support that all right and next we need a mutation so we'll create a new type called mutation and add add pokemon and it also has a name which is a type of string and required and also type which is also a required string and it returns a required id okay that is our amazing schema so let's go into resolvers and go build this so pokemon will just be a function that returns just a static return call that bulbasaur of type fire actually don't know if bulbasaur is a fire type tell me that's fine and also our mutation which first takes a context which we're just going to ignore and then the arguments the name of the type and we're just going to return a string template of the name and the type together and our last refinement on this is just to put http in front of that localhost that way when i option click it in vs code it can pop up all right let's fire this thing up by just doing node server.js and then i'm going to click on that localhost and that brings up grapheql which is built in already now i've already got everything set up for localhost 4000 because i did this already but let's just try out that mutation first that works fine and then try out our query and that works fine so that's it that is our entire graphql server setup for this video pretty simple pretty straightforward okay so let's get rid of graphql yoga keep the playground around we'll be using that a little bit and now we're gonna go create our first app so let's go over back into vs code create a new terminal window and then go do mpx create react app on a new project we'll call cra fetch so this is just going to be a version of the app which just uses fetch right out of the browser no libraries we're just going to make direct calls to our graphql server all right let's bring this up have a look and that's exactly what you'd expect out of the box from crate react up nice little spinning react so let's get rid of all of that i don't need any of that and so our first job is to make a fetch so we need uh some place to put that so let's go and use use state to create a data piece of state and a data set which is going to then set that and we'll just start off with null and we'll put an h1 in there and put in our stringify data and now we're going to use a use effect to make that first fetch but what's going to be in that fetch well i don't really want to type it out by hand here's a trick we're going to go back into the browser we're going to go replay this fetch and then look at it in the inspector and we can see that's the right one it's the third one in the list the reason that there's multiples is because that graphic ul interface is going back and and kind of pulling the server over time so now i'm going to right click on that and go to copy and then within copy i'm going to select copy as fetch i'll paste that in there and that literally created the fetch javascript for that exact call which is pretty cool just paste it in there and now i'll save it and let prior do its work and wow that was cool all right so let's just try and run this let's go and add a then to convert the response to json and then another then to basically set that data data set all right looks great right out of the box that is incredibly simple okay but it is kind of up and in the corner there so let me add a little bit of styling to the page kind of move in the center make it not so wide all right that looks pretty decent you can kind of see that on your youtube screen now it's also kind of nested in there so i'm going to change that to data.data.pokemon so that it it's yeah it's just the data that we want okay now this is a big fetch call right we don't actually need all this so let's first trim down these headers and see what we exactly need i'm just going to go with content type and see if that works hit refresh on here and it works just fine okay so all we really need is content type the rest of the stuff was just kind of added by the browser so what we really needed was just the content type now let's see do we need referrer for policy or that mode where the credentials nope let's see let's try that out refresh and it looks great so we're down to just headers body and method makes a lot of sense all right so instead of having this body as a string let's go and turn it back into an object and then use json stringify to turn it back into a string as that object it makes a bit more easy for us to control so let's go move that into an object and then let prettier handle that again okay looking good so it's got three keys operation name variables and query let's clean up this query a little bit all right and you could you know make that a template and have it on multiple lines or you can do it like this and it on a single line throw it up to you let's try that again oh still working great now let's see if we can just do it with just the query no variables no operation name excellent okay so this is pretty much the smallest piece of fetch that you can do to hit our graphql server you've got localhost on 4000 give the application json headers give it the query as a json stringified payload and we're gonna use method post now some graphql servers support get queries this one out of the box just supports post find by me all right now let's try a mutation so let's create a new h1 for mutation and create some new data so we're going to say that's the mutation response that would be the id coming back and then also a setter for that now let's go and just stringify that in there it's gonna start off with null and let's create that button call it add pokemon and then we'll give it a quick handler for add pokemon and we're just going to copy and paste that fetch in there but we don't want to use that same query we want to use our mutation so let's go back over the playground grab our mutation code and make it a string template and just pop it in there all right let's fire it up ah okay so here's what happened i'm actually still setting the original data set i'm not setting the mutation stuff so let's fix that and also let's just go with data to see what's actually coming back and we'll hit the button again all right looking pretty good but it's got that data and add pokemon so let's just de-reference it there a little bit add pokemon do it again and we get back yolosore and yo fire they should make one of those a yolo sword i don't know what that would look like but that really isn't realistic obviously you're not going to hard code name and type like that so let's go and just make some variables so we define that by saying that we have a dollar name which is of type string and a dollar type of to all subtype string and we name we map that in the mutation by saying name b is from dollar name and type is from dollar type but where do we define those well we'll bring back the variables that we got rid of because we didn't need them before and bring in jack and i i'm i guess i'm an earth type i guess sure why not oh hey okay jackasaur let's do that all right great so this works so this is pretty much it this is it for a fetch implementation of both query and mutation on our graphql server okay so we've got the server running we've got fetch on the client and i think that's great for like a proof of concept or a vanilla js setting so let's see if we can do a little bit better by looking at the graphql request library so next up graphql request let's go make ourselves a create react app with graphql request as a part of the name and then we'll start it up looking good so what does graphql request look like well it's pretty easy you import it you get a request back you create a query just like we did before and then you use request you give it the graphql endpoint that you want to hit you give it your query and then you get back the data so it's basically doing fetch for us it's just hiding a lot of the details all right now make it easy on ourselves or just to go copy in the app.js that we had before for fetch and bring in a graphql request that project paste that in there and now let's go and add graphql request to that project and then import it and then change out our fetches to request so we'll just change out fetch for request and then we'll kind of hack on this a little bit we'll take the initial url that's fine and just leave the query part of it we also don't need to convert to json that does it does it for us and we'll just set that to data see what that comes back all as let's try this again all right looking pretty good it does have pokemon in there since that was the name of the query method that we used all right let's go and do the same thing for our mutation change that to a request then just have the string in there and now the third argument is optional but it's the variables kind of like what you'd expect actually so let's put in our variables in there and again we have to do the json conversion that handles that for us and we can also scale back our data okay let's take a look all right looks great but again it's got that ad pokemon and pokemon on it so let's go and just add change out those keys and it looks really good okay so pretty simple upgrade from our fetch into graphql request okay so graphql request is really cool and i think it's great that it's compatible with something like a redux or a modbx an existing state management solution so what if you want to do actually something else let's say you want to maybe use the client itself as your state manager let's try that using apollo client so we're finished up with graphql requests let's get rid of that and now we're going to work on apollo client so again we'll create a new create react app we'll call this one cra apollo client okay looks like our create react app is up and running fine so this time we're just going to grab out the data and the format let's see how that goes up i forgot to make an ad pokemon let's go fix that all right so that's basically an empty husk waiting for data or something to go get data so let's try out the apollo client how do we get started well we have to install apollo client and graphql let's go do that and now we're going to bring in apollo client and in memory cache so apollo has the notion of a client and everything all of our requests will run through that client we have to create the client and give it our url for our graphql server so in this case it's you know the same 4000 as before start that up all right looking pretty good it's not blowing up on us which is always a good sign so the next thing to do is to provide that down the line so we're going to use apollo provider here bring that in gotta say the apollo docks are really very very solid so we're going to do is just change the default export from just app to a function that returns app but also returns it wrapped in an apollo provider that points to that client okay so now that we've got that going let's go down and see how we want to make a query off this thing so we're going to use a hook called use query and a helper function called gql which is going to allow us to template format our graphql strings so we'll place our first react use state with use query and then use gql and give it our query and then it returns an object and within that object is a bunch of stuff but most importantly data it's got an error flag and other things but the one we want is data and then we'll use that gql template function and wrap our query all right and that's it wow okay that's really cool so because we're already looking at data that translated really nicely into our current layout so there we go we got data pokemon and now when we stringify it we can just say well if you have an object data then use it otherwise here's an empty object and then on that use pokemon and there we go it is giving us this additional type name information you can ignore that if you want that's fine so how do you do a mutation then well let's go down into fetching and then into mutations and within that we can see that we have another hook called eu's mutation and it returns an array so in this case it's returning add to do which is the function that you're going to call to actually invoke the mutation and then just like with our query it returns another object which has all the error and all that as well as data so let's just paste that into our code and we're going to remap that data key to mutation response now we get rid of the react use state and then go and include use mutation and let's go back over here to get our mutation and wrap that in gql but that's not an ad to do is it it's an ad pokemon mutation sure okay so let's invoke that and we can give it some variables name is jacksonian sore and i'm a fire type this time all right go run that oh and oh i see what happened okay so the original mutation still has those hard coded values in it let's just go create those as parameters just like we did before with our name dollar type hey that looks great id is jacksonian firefighter awesome all right so apollo client is really cool the ability to provide that client down the line is great you can also use it in a redux or a modbx setting if you want to as well let's try out facebook's relay and see how that compares okay so the last one i'm going to play with is relay so let's go create ourselves a create react app on cra relay and let's go into the installation and setup section and just start doing a lot of yarn ads here so let's do our first yarn add of react relay and let's go change out our template add that data and this is just to get that ui running so create a little placeholder add pokemon in there start that up and great okay got a nice starting point there so let's go back to our docs and see what's next the next thing to do is add relay config so let's go and add that in development mode and then create our relay configuration file relay config.js i'm going to use pb paste for that on os x mac os x you can use pb paste and that just takes the paste buffer and exports it on standard standardio so i'm going to redirect that into that relay config.js file on any other system you just create a new file and paste that in there all right i'm going to call the schema instead of slash data came on make that schema.graphql just in that current directory and what is the schema.graphql what's just the schema so let's go copy that from our server cool and what that's going to allow relay to do is actually validate our queries at build time which is really neat all right next thing we need to do is bring in the babel plugin for relay now we're going to do something a little different because create react app doesn't allow you to hack on its babble we're actually going to use the macro version of this normally you'd use it as a plugin in babel just like it's documented here but we're going to use this variant where it's const graphql equals require babel plugin relay macro and that works and is compatible with create react app and the last thing we need to add is the relay compiler and that's going to compile the graphql which is in our js files and our jsx files into well it's got some intermediary files that it needs to run so it's going to go and create those for us it's a very picky compiler as we'll soon see okay now we'll go grab this script and add it into our package json and that's going to run that relay compiler for us on the source with the right schema and run relay and because we don't actually have any relay code it runs just fine but it's nice to see it actually work so we're actually going to do the ui a little differently here to kind of show off a lot of the value of relay as opposed to these other systems and one of those big values that you can roll up request together and run them as one request of the server even though the requests are from different components so we're going to create a fragment container for the name of the pokemon and then have another fragment container for the type of pokemon and then we're going to use a wrapper component that would then fuse those together and make one single request to the server to get all that done so let's start off with creating our name component and we're just going to paste in their example code and we'll rename this pokemon name and it'll take a pokemon and this is gonna basically have a div with pokemon name in there and we'll change the fragment container definition so we're pointing at pokemon get rid of some other docs call it pokemon name and all we want is a name okay cool and i'll also remove the graphql because we're going to bring that in from that macro if i was in anything other than create react app and i had control over babel i would just use that graphql but i need to use this macro graphql instead okay now in order to get this running we need to run that compiler so let's do yarn relay and it gives us an error and then error says that it wants pokemon name as the file name as opposed to name which it currently is as i say this compiler is incredibly picky let's try that again okay so it's like we said pokemon name name and it's expecting pokemon name pokemon okay let's change that now are you happy really oh you're finally happy great okay so now we need to wrap that in something that query renderer so let's give that a try so we're going to create a new file called pokemon.jsx probably the wrong name again and we'll start hacking we're going to include pokemon name that we just created and it's not going to take any parameters we'll call this pokemon we'll then build out that query the query is called pokemon and it just runs pokemon and then for that value the dot value we need to go back to the original file and grab out pokemon name pokemon cool now we're not going to pass any variables and we're just going to go and render once we have the data pokemon name with the supplied properties all right let's take a look okay so the last thing is we need to have this environment for relay we haven't created that yet so let's go back over the docs and check out the relay environment in the quick start guide let's just paste that in there create relay environment make some changes so we're going to call that localhostgraphql and run relay okay it looks like i messed up my jsx syntax so let's go fix that under variables okay oh again it doesn't like the name pokemon it needs pokemon query so let's change out both the query and also the name of the component okay relay is now happy with that because again it's very sticklery about that naming and let's give this a try last thing to do is bring in pokemon query into our host app give this a try all right so it has a problem with graphql now this is telling us that again we've brought in that wrong graphql we're not using the macro so let's go do that okay now it's failed to fetch that's interesting let's go take a look ah okay i messed up on the host name oh i messed up i didn't put the port number in there oh i messed up again it's not slash graph or yell it's just slash okay now it's working awesome so let's go take a look at that request it's sent out and you can see that it's got the query in there but it's also got the fragments and so that's going to tell graphql to kind of construct a query with fragments from different places that's all part of the graphql standard this isn't something specific to relay you can use that in any environment okay let's create a new file called pokemon type basically pokemon name which just changes to type and this is just to show you that you can have different components that have different data requirements and then they the query renderer will put that all together for you into a single request really nice now let's bring it back over to the query renderer add in pokemon type and now since the server's still running it's giving us an error that can't find that generated file so let's go back in and do yarn relay again got in one that time okay and it's still giving us just bulbasaur but that's because i haven't changed out the template so let's go make some changes there div and then use pokemon type in there hey that's looking great okay and it's still just a single request to the server go over and have a look at that inspector panel right there's only one request going to the server which is really cool what's interesting is if you took out one of those and then you took out the the fragment right the other one would be just fine which is awesome so the last thing to try out with relay is a mutation so let's go over to the mutations documentation on the api reference go and grab out some example code i'm going to create a new file called add pokemon mutation dot js paste that in there and make some changes first let's not fall into the same traffic graphql again so let's paste in that graphql macro now let's change out the graphql for our pokemon mutation okay looking pretty good and we'll change the function name to ad pokemon mutation add in some additional arguments that'll be mapped to variables okay looking good so let's relay that and it's having some issues all right maybe it's i haven't exported this let's try it again nope same issue oh i think i know what this is okay so the name of the mutation is wrong just needs to be lowercase add pokemon mutation okay fine be that way all right let's bring in the add pokemon mutation function and then call it and add pokemon uh we'll just say that we got our environment already and then i'm now a wind pokemon it's i guess appropriate bring in that environment and last thing let's go and set the mutation response to whatever comes out of that function and we'll run our yarn relay and start it up oh i didn't make that an async function so let's make that an async function so we can use a weight and now we'll add pokemon now the mutation is going but we're not getting any value back hmm okay uh i think i know what happened okay so we look back at the mutation code we're not actually doing anything here all we're doing is putting out a console log saying response received from the server great okay well what's in the response okay so let's go and create a new promise we want that anyway because we're awaiting it and pop that in there and then we're just gonna resolve with that response okay looking good great so there you have it relay on our graphql server all right so relay is really cool it gives you a lot of confidence when you go into production that it's going to work because of that compiling where you actually hit the schema to make sure that everything's cool before you get there all right well if you have any questions or comments just be sure to put those in the comment section down below if you like the video hit that like button if you really like the video hit the subscribe button click on that bell and you'll be notified the next time one of these videos shows up in the meantime be happy be healthy and be safe

Channel: Jack Herrington

Views: 4,442

Keywords: graphql, javascript, react, apollo, relay, module federation, javascript tutorial, javascript basics, javascript beginner, javascript error, web development, graphql tutorial, graphql api, compare graphql clients, graphql clients compared, graphql client comparision, graphql client, graphql clients, graphql clients comparision

Id: zJvB2hnsXr0

Length: 34min 36sec (2076 seconds)

Published: Wed Aug 05 2020