GraphQL Tutorial #25 - Apollo Client Setup

alright then gang so in order to work with graph QL on the front end and be able to make graph QL queries to our server we'll need to use what's known as a graph to our client so the graph QL client we'll be using is called Apollo so much like when we're making HTTP requests to restful api so we could use a front-end library like Axios or even jquery to help us make those requests when it comes to graph QL in order to make queries to the server we'll need to use a graph QL client Apollo and it doesn't matter that we're using react on the front end here it could be view GS or angular instead we'd still need a graph to our clients help us make those queries from the front end up to the graph to our server so in our react app here will be creating queries much like we did in graphical before and then feeding them through the graph QL client Apollo which will send the request to the server the service then going to respond feed the data back to our graph cue our client Apollo which will then pass it back into our react application so you can think of the graph QL client as the thing that's in charge with a passage of data between the front end and the server right like a data pack horse or something now there's a few different clients we can use like I said the one we're going to use is called Apollo client which is very widely used and quite well documented as well so then let's take a look at the Apollo website to see how we can set it up inside our react up alright then so I'm here on the Apollo graph QL website and this is kind of like a QuickStart installation guide so I'm gonna leave this link down below for you to check out but essentially this is how we get started with Apollo and react now we have to install a few different things here right and there's two different options we can either do NPM install Apollo clients plus all of this other different stuff as well and save those all we can do NPM install Apollo boost which includes several different packages we're going to need and bundles them together including the Apollo client we just talked about and it also wants us to install react Apollo which is kind of like a glue layer to bind Apollo react and also graph QL which is the JavaScript implementation of graph QL so those three things right there this is the option we're gonna do so I'm just going to copy that dude and open up my console and I'm gonna cancel out of this process for now pressing yep and I'll paste this in so I'm gonna install those three packages right here okay so now we have those installed we can go ahead and start setting up Apollo in our react application so let's head over now to the code and open up our routes component right here at Jas and the first thing we're going to do is up here import Apollo clients which we just installed from Apollo boost right remember Apollo boost was that package that bundles certain different things that we need together and one of those things is the Apollo client okay so we're importing that first of all and we need to now set up our Apollo client so if I will do that below components down here so a little comment and I'll say Apollo client setup all right so let's create a constant and call this client and set this equal to a new Apollo client like so and this Apollo client is going to take some options one of those is a URI so this is going to be the endpoint that we're making requests or queries to okay remember we set that up in the first half of this series and it was localhost 4000 forward slash graph QL that was the supercharged endpoint that handles all of our graph QL queries so let's pass that in here so HTTP double dot forward slash localhost and it was colon 4000 forward slash graph QL like so okay so now that's pretty much it we set up our Apollo client now Apollo knows that we're going to be making requests to this endpoint from our application all right but we also need to do one more thing inside this app JS file to set or Apolo and that thing is first of all to import the Apollo provider from oops react - Apollo alright so react Apollo is the thing that's kind of binding Apollo to react it helps react understand Apollo on what it's doing right and we need the Apollo not prove the Apollo provider to wrap our application and inject whatever data we receive from the server into our application right so the way we do this is by surrounding all of our template right here with a tag and this tag is going to be the Apollo provider type so Apollo like so provider and then if we need to say what client this is going to be using and it's gonna be this one right here that we just created so we can just copy and paste it up down here like so but we have to output it not in quotations but dynamically using these little curly braces this is how we dynamically output data in a react component right so let's place that in there and then close this off we need to also put a closing tag at the end so close that Apollo tagged Apollo provide attack if I can spell it all right Apollo provider like so we're just gonna scoot this up a little bit just to get the indentation roughly right now okay that'll do whatever so now we have our Apollo client created right we're registering that on the floor intent here to say we're making requests to this endpoint from this application then what we're doing is importing the Apollo provider from react Apollo which is surrounding our entire app here right and that is what enables us to get the data from this endpoint and inject it into whatever is inside the Apollo provider ok so it's taking the data from Apollo when it receives it from the server and injecting it into our application right so we can use it inside here so there we go now we have Apollo set up in our application on the front end and we in the next tutorial let's move on a start to actually create these queries from the front end